Introduction to Maps in JavaScript

Interactive maps can be made using Leaflet, an open-source Javascript library. It has all the mapping capabilities that the majority of us require for any project, including the ability to zoom, add markers, popup windows, vector layers, and choose a location's latitude and longitude.

We will learn how to use Leaflet maps in this blog and also perform tasks like adding markers and popups.

Creating your webpage

1. Include the Leaflet CSS file in the head area of your HTML page.

Leaflet.css can be found at this address: cdn.leafletjs.com/leaflet/v0.7.7/.

2. Include a Javascript file for Leaflet.

A leaflet is available at http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.js.

3. Add a div element with the Id of the area where you want your map to appear.

<div class="myMap">

4. Make sure the container for your map has a certain height. CSS can be used as follows:

#myMap {height: 250 px}.

Let's start by initializing the map right away.

Setting up the map

Initialize your map first, then set the zoom level and some geographic coordinates for the view.

map is set to L.map("myMap").

centre of London with zoom level 13: setView([51.505, -0.09], 13);

Add a tile layer to the map after that. In this situation, the tile layer should be OpenStreetMap. Setting the URL template for the tile images and the attribute is necessary to add a tile layer.

('http://s.tile.osm.org/z/x/y.png', 'attribution: OpenStreetMap contributors) is a tile layer.

addTo(map);

Make sure to call all of these lines of code following the inclusion of the div and the javascript file leaflet.js. Your map container will now include a rendered version of the map.

Putting marker on

By entering the lat-lng, a marker may be added quickly. Add a marking now:

L.marker([51.5, -0.09]).addTo(map);

Inserting popups

When you want to include more details with a map object, popups are employed. In Leaflet, affixing popups to objects is quite easy:

marker.bindPopup( "World, welcome! The popup that I am ").openPopup();