Building an interactive map using leaflet.js

Leaflet.js:

Leaflet is the leading open-source JavaScript library for mobile-friendly interactive maps. Leaflet is designed with simplicity, performance and usability in mind. It works efficiently across all major desktop and mobile platforms can be extended with lots of plugins has a beautiful easy to use and well- documented API and a simple readable source that is a joy to contribute to.

Step 1:Adding the HTML file with Leaflet

we need to create a HTML structure and include the Leaflet’s CSS and JS libraries. Leaflet requires both a CSS and a JS file to work properly. I have included them from a CDN:

Step 2:Initialize the MAP:

1.We have already leaflet setup, lets initialize the map and add the base tile Layer map using OpenStreetMap.

2.L.map(‘map):Initializes the map inside the #map div in your HTML.

3.setView([lat ,lng, zoom]:Sets the initial map center and zoom level.

4.L.tileLayer: Adds a tile layer (OpenStreetMap),this will display the map tiles.

When we open the above code on a live server, we can see the map as shown below.

Step3: Adding Marker to the Map:

1.Markers are used to indicate specific locations on the map. We can add a marker using L.marker() and bind popups to show more information when clicked.

2.L.marker(lat,lng):Creates a marker at the specified latitude and longitude.

3..binPopup:Binds a popup that will open when the marker is clicked.

4..addTo(map):Adds the marker to the map.

Step 4:Adding Polyline to the Map:

1.Polylines are used to connect two or more points with a line. Lets draws the the lines between multiples coordinates.

2.L.polygon(lat,lng):Creates a polyline connecting the points in the latlng array.

3..addTo(map):Adds the polyline to the map. Now, we can see the polylines on the Map as shown on below.

Step5: Adding GeoJSON Layer:

1.GeoJSON is a widely used format for encoding geographic data. You can easily add GeoJSON features (points, lines, polygons) to a Leaflet map with L.geojson().

2.We have a GeoJSON file that includes Points, Linestring and Polygons. Here's how we can load and display that on the map.

Below figure shows the geodata loaded and displayed on the map.

Step 6: Adding Routing on Map:

Routing machine allows us to display routes between two or more points, complete with draggable waypoints, instructions and route lines.

1. First we include the required libraries for the routing.

2. 

   

   we add routing control on our script.

   

   3. Now we can see the route between three different points which displayed on the map as shown below.

3. 

Adding DrawTool bar on Leaflet map:

1.If we want to draw shapes like circles, rectangles , polygons and etc., on leaflet map. We can use the leaflet.draw plugin. This plugin adds a control panel to your map where you can draw, edit, and delete shapes interactively.

2.we include the required libraries to draw shapes.

3.Now we can add draw control on our scripts.

4. We can see the draw tool bar on the leftside of the leaflet map, we can draw the polygon, circle, rectangles as shown on below figure.

5.