How to draw maps by using Leaflet.js.
This document describes how to draw maps and how to draw figures on the map by Leaflet.js for beginners.
The tutorial for how to use the "Leaflet.js" step by step.
These demonstrations are confirmed by Microsoft Edge (Ver. 11.0.17763.379), Firefox (Ver. 65.0.2/64 bit), Google Chrome (Ver. 73.0.3683.86/64 bit) and Safari (Ver. 5.1.7/ It is not available to save and to load local data file.) under the condition of Windows 10.
Tutorial for Leaflet.js: How to draw a map, set markers and/or figures on the map step by step.
How to draw maps in several cases.
Demo for Tutorial_101: To draw an open street map.
Demo for Tutorial_102: To draw a Stamen Design map.
Demo for Tutorial_103: To draw an Esri designed map.
Demo for Tutorial_104: To select a map from several maps.
How to show some utilities on the map.
Demo for Tutorial_301: To show some Utilities on the Map. Examples of utilities are mini-map, mouse position, graticule lines and search windows.
How to show Markers on the map.
Demo for Tutorial_401: To show a fixed Marker (with default configuration).
Demo for Tutorial_402: To show selected Icons as Markers.
Demo for Tutorial_403: Add to Draggable Markers.
Demo for Tutorial_404: Interactive Markers.
How to draw figures on the map.
Demo for Tutorial_501: To draw lines.
Demo for Tutorial_502: To draw polygons.
Demo for Tutorial_503: To draw circles.
Demo for Tutorial_504: To draw figures with added the button to delete a figure.
Demo for Tutorial_505: Interactive Markers and Figures.
Demo for Tutorial_601: It is a demo including almost above tutorials.
Demo for Tutorial_602: It is a sample to show your device's position on the map.
Demo for Tutorial_603: It is a sample to trace in any interval your device's position on the map.
Demo for Tutorial_604: It is a sample to show the place of the photograph on the map.
Demo for Tutorial_605: It is a sample to show the place of the photograph with photo frame on the map.
- jQuery user interface
- calvinmetcalf/leaflet-ajax: plugin for leaflet for ajax - GitHub
- k4r573n/leaflet-control-osm-geocoder - GitHub
- aparshin/leaflet-GIBS: Leaflet plugin for NASA GIBS Imagery integration. Contribute to aparshin/leaflet-GIBS development by creating an account on GitHub.
- Norkart/Leaflet-MiniMap: A minimap control plugin for Leaflet - GitHub
- ardhi/Leaflet.MousePosition: A mouse position control for Leaflet. Contribute to ardhi/Leaflet.MousePosition development by creating an account on GitHub.
- marghoobsuleman/ms-Dropdown: Image dropdown - convert your dropdown to image dropdown - marghoobsuleman/ms-Dropdown. - GitHub
- OpenStreetMap is the free wiki world map.
- Stamen Design: Data Visualization and Map Design Studio
- Esri's GIS mapping software is the most powerful mapping & spatial data analytics technology available.
- OpenSeaMap - die freie Seekarte, nach dem Wiki-Prinzip, auf PC, Garmin, Lowrance.
- Earthquakes - Real-time Data - USGS