Skip to content
This is a tutorial to draw maps by Leaflet.js for beginners.
HTML JavaScript CSS
Branch: master
Clone or download

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.


"Leaflet.js" is an open-source JavaScript library for interactive maps. This document is a tutorial for beginners to use the "Leaflet.js". I will show you how to draw a map, how to set markers and/or figures on the map step by step.


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 draw overlays on the map.
Demo for Tutorial_201: To draw some overlays based on Tutorial_104.
Demo for Tutorial_202: Added overlays for MODIS's data and USGS's earthquakes data.


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.


Several samples.
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.


  1. Leaflet - a JavaScript library for interactive maps
  2. jQuery: The Write Less, Do More, JavaScript Library.
  3. jQuery user interface
  4. calvinmetcalf/leaflet-ajax: plugin for leaflet for ajax - GitHub
  5. k4r573n/leaflet-control-osm-geocoder - GitHub
  6. aparshin/leaflet-GIBS: Leaflet plugin for NASA GIBS Imagery integration. Contribute to aparshin/leaflet-GIBS development by creating an account on GitHub.
  7. Norkart/Leaflet-MiniMap: A minimap control plugin for Leaflet - GitHub
  8. ardhi/Leaflet.MousePosition: A mouse position control for Leaflet. Contribute to ardhi/Leaflet.MousePosition development by creating an account on GitHub.
  9. marghoobsuleman/ms-Dropdown: Image dropdown - convert your dropdown to image dropdown - marghoobsuleman/ms-Dropdown. - GitHub
  10. OpenStreetMap is the free wiki world map.
  11. Stamen Design: Data Visualization and Map Design Studio
  12. Esri's GIS mapping software is the most powerful mapping & spatial data analytics technology available.
  13. OpenSeaMap - die freie Seekarte, nach dem Wiki-Prinzip, auf PC, Garmin, Lowrance.
  14. Earthquakes - Real-time Data - USGS
  15. Exif.js. A JavaScript library for reading EXIF meta data from image files.




T. Fujita

You can’t perform that action at this time.