- Notifications
You must be signed in to change notification settings - Fork184
iamtekson/Leaflet-from-basic-to-advance
Folders and files
| Name | Name | Last commit message | Last commit date | |
|---|---|---|---|---|
Repository files navigation
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 thebasic ideas about the leaflet. I added various functionalities about theleaflet.js.
Inside this folder I added following functionalities.
- Adding base map
varmap=L.map("map").setView([28.2521,83.9774],18);varOpenStreetMap_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);
varbaseLayers={"OSM Mapnik":osmMap,Landscape:landMap,};L.control.layers(baseLayers).addTo(map);
varmarkers=[["7C6B07",-40.99497,174.50808],["7C6B38",-41.30269,173.63696],["C820B6",-41.51285,173.53274],];for(vari=0;i<markers.length;i++){marker=newL.marker([markers[i][1],markers[i][2]]).bindPopup(markers[i][0]).addTo(map);}
varpolyline=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 atleaflet-sidebar-v2
Inside this folder, I useleaflet-router-machine plugin. for more information gotoleaflet-routing-machine
This is also adraw 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 gotoleaflet-routing-machine. This plugin can be initiated by using
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.2.0/dist/leaflet.css" /><link rel="stylesheet" href="https://unpkg.com/leaflet-routing-machine@latest/dist/leaflet-routing-machine.css" /><script src="https://unpkg.com/leaflet@1.2.0/dist/leaflet.js"></script><script src="https://unpkg.com/leaflet-routing-machine@latest/dist/leaflet-routing-machine.js"></script>In this code, I usemapbox layer as base layer. The general style for showing the mapbox layer on leaflet is
varmap=L.map("map").setView([28.2521,83.9774],12);varmapboxTile=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 asmarker-cluster is very useful for the multiple markers. This plugin helps to manage the multiple markers on the map.
About
This contains basic codes on leaflet programming. It includes important plugins of leaflet & some other different technique for analysis the map.
Topics
Resources
Uh oh!
There was an error while loading.Please reload this page.
Stars
Watchers
Forks
Packages0
Uh oh!
There was an error while loading.Please reload this page.