Create Mobile Responsive Web map Application Using Leaflet.js

Pick From https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRtTLYFLAQ1_uUuwcB1Wa6WfX8xdhfCYNIn3g&usqp=CAU

Leaflet.js is an open-source, lightweight, Mobile-friendly javascript library Created By Vladimir Agafonkin. In which you can Implement map content on different map tiles like Google-Maps, OpenStreetMap, Mapbox, Maptiler, and your custom tile layer also using lots of plugins available in leafletjs.com and also Develop our own plugin by publishing on their GitHub repository. We can implement it in Vanilla Javascript, and its framework like React, Angular, and Vue.

Features of Leaflet.js :

1. It Supports WMS Layer, GeoJson Layer, Vector layer, TileLayers, and Also Supports Other Types Of Layers Using their Supported Plugin.

2. It Supports Creating Markers on The Map with its Events. Also, Create Custom Marker as Our Choice Using Images or Create an SVG Marker.

3. Use Different Map Tiles(Like OpenStreetMap, GoogleMap, Mapbox, Bing) and Easy To Change Its Tiles.

4. It Supports Clustering, Declustering Mechanism. Also, Add HeatMap On The Map.

5. Add Vector Layers on The Map Like Point, Circle, Polygon, Polyline, SVG, Canvas, Circle Marker, Path and Etc.

6. It Supports Creating Custom Control On maps, Adding Image Overlays, Video overlays on maps, Animate Marker Showing ToolTip.

7. Customizing All the Map Elements Using Javascript.

How To Use Leaflet.js:

For Use Leaflet.js It Has To Included Leaflet.js CSS and Js Which is Available on https://leafletjs.com/examples/quick-start So include a library.

It needs a container in which a map has been displayed.
take a div tag.

<div id=”mymap”></div>

The map container has to define the height.

#mymap{
height:200px:
}

Now It needs to initialize the map in which we need to work. then set the tile layer.

var map = L.map(“mymap”).setView([28.644800,77.216721],13);

L.tileLayer(‘’http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',{
}).addTo(map);

In setView, It Contains Two Parameter

1. LatLng(First is latitude, Second is longitude).
   So Above Value shows the LatLng of New Delhi.
2. Zoom Level.

TileLayer Contains Url of Map-tile in which the Map is shown. and the Parameter Json block use for Set its property.

Above Url Is For Open Street Map.
For Google Maps:-

L.tileLayer(‘http://{s}.google.com/vt/lyrs=m&x={x}&y={y}&z={z}’,{
maxzoom: 18,
subdomains: [‘mt0’, ‘mt1’, ‘mt2’, ‘mt3’],
}).addTo(map);

For SateliteView:-

L.tileLayer(‘http://{s}.google.com/vt/lyrs=s,h&x={x}&y={y}&z={z}’,{
maxzoom: 18,
subdomains: [‘mt0’, ‘mt1’, ‘mt2’, ‘mt3’],
}).addTo(map);

Adding Markers and Vector Layer on the Map.

L.marker([28.644800,77.216721],{tooltip:’mymarker’})
.bindPopup(‘mymap’)
.addTo(map);

L.circle([28.644800,77.22],{radius:20,color:’red’}).addTo(map);

L.polyline([[28.634800,77.22],[28.644800,77.20],[28.65,77.20]],{color:’green’}).addTo(map);

L.polygon([[28.674800,77.22],[28.624800,77.20],[28.65,77.30]],{color:’yellow’}).addTo(map);

Here is a Basic Overview of how to use a leaflet and its elements.it is pretty easy .just put elements and then add them to view.

Advantages:

1. Lightweight. only weighting 39KB.
2. Fast Performance.
3. Easy To Implement.
4. Open Source and Freely Available
5. Easy To Change Map (As only The Url of Tile layer Should Be Change).
6. Powerful API, And Plugins
7. Easy Customization.
8. Support On Multiple Js Framework.

Disadvantages:

1. The developer should be Familiar With Javascript.
2. In some base layers, it should cost(like Mapbox).
3. It Needs To use GIS Programming For set up Information.
4. customization takes more effort on elements sometimes.