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 the WMS layer, Geojson layer, vector layer, tile layers, and also supports other types of layers using their supported plugin.
2. It supports creating markers on the map with its events. Also, create a custom marker as our choice using images or create an SVG marker.
3. Use different map tiles(like OpenStreetMap, Google Map, Mapbox, bing), and easy to change its tiles.
4. It supports clustering, declustering Mechanism. Also, add a 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 include Leaflet.js (CSS and Js) which is available on https://leafletjs.com/examples/quick-start so include a library.
In setView, It contains two parameter
LatLng(first is latitude, second is longitude). So Above Value shows the LatLng of New Delhi.Zoom level.
TileLayer contains the URL of the map-tile in which the Map is shown. and the parameter json block use for Setting 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);
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 changed).
6. Powerful API, and plugins
7. Easy customization.
8. Support on multiple js frameworks.
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 setting up information.
4. customization takes more effort on elements sometimes.