Checkout the playlist on leafletjs from basic to advance below,
- Leaflet from basic to advance
- Leaflet Crash course
- Advance spatial analysis in leaflet | turfjs
- What is GeoJSON, How to use, What is the important of GeoJSON? | geojson.io | mapshaper
This repo contain all the basic ideas about the leaflet. I added various functionalities about the leaflet.js.
Inside this folder I added following functionalities.
- Adding base map
var map = L.map("map").setView([28.2521, 83.9774], 18);
var OpenStreetMap_Mapnik = L.tileLayer(
"https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
{
maxZoom: 19,
attribution:
'© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
}
).addTo(map);var baseLayers = {
"OSM Mapnik": osmMap,
Landscape: landMap,
};
L.control.layers(baseLayers).addTo(map);var markers = [
["7C6B07", -40.99497, 174.50808],
["7C6B38", -41.30269, 173.63696],
["C820B6", -41.51285, 173.53274],
];
for (var i = 0; i < markers.length; i++) {
marker = new L.marker([markers[i][1], markers[i][2]])
.bindPopup(markers[i][0])
.addTo(map);
}var polyline = L.polyline(
[
[-40.286, 175.796],
[-41.281, 176.086],
[-41.279, 175.776],
[-41.29, 174.075],
[-42.292, 174.788],
],
{
color: "red",
weight: 10,
opacity: 0.7,
dashArray: "20,15",
lineJoin: "round",
}
).addTo(map);Inside this folder I added following functionalities.
- Adding Geojson in map
L.geoJSON(json_data).addTo(map);
- Custom Popup in Geojson
- Custom style in Geojson
Inside this folder, I write the code to redirect the user location. It takes the user location and shows on map.
This is actually a plugin. This plugin can be found at leaflet-sidebar-v2
Inside this folder, I use leaflet-router-machine plugin. for more information goto leaflet-routing-machine
This is also a draw plugin. This plugin supports the Drawing feature in map. There are lots of features in this plugin. The user can add the point, line, polygons, edit this layers, delete the layer etc.
This plugin is very useful for the navigation. for more goto leaflet-routing-machine. This plugin can be initiated by using
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" />
<link rel="stylesheet" href="https://unpkg.com/leaflet-routing-machine@latest/dist/leaflet-routing-machine.css" />
<script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
<script src="https://unpkg.com/leaflet-routing-machine@latest/dist/leaflet-routing-machine.js"></script>
In this code, I use mapbox layer as base layer. The general style for showing the mapbox layer on leaflet is
var map = L.map("map").setView([28.2521, 83.9774], 12);
var mapboxTile = L.tileLayer(
"https://api.tiles.mapbox.com/styles/v1/{username}/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}",
{
attribution:
'Map data © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="http://mapbox.com">Mapbox</a>',
username: "iamtekson",
id: "cjwhym7s70tae1co8zf17a3r5",
accessToken:
"pk.eyJ1IjoiaWFtdGVrc29uIiwiYSI6ImNqdjV4YzI4YjB0aXk0ZHBtNnVnNWxlM20ifQ.FjQJyCTodXASYtOK8IrLQA",
}
).addTo(map);The leaflet plugin named as marker-cluster is very useful for the multiple markers. This plugin helps to manage the multiple markers on the map.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent