Skip to content

Latest commit

 

History

History
78 lines (67 loc) · 7.57 KB

README.md

File metadata and controls

78 lines (67 loc) · 7.57 KB
Raw

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.

Description

"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.

Demo

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.

Step-1

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.
(Note: The Stamen designed map is not working well at the condition of "https://" by the security's reasons. However, it will be working at the local condition or at the site of "http://".)

Step-2

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.

Step-3

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.

Step-4

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.

Step-5

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.

Step-6

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.
Demo for Tutorial_606: It is a sample to link the 360 degrees video by photo frame on the map. Then, it is to show the 360 degrees video under the Babylon.js 3D graphic engine. These 360 degrees videos are downloaded from Free 360 Video Downloads Page at METTLE.
Demo for Tutorial_607: This is a sample for the VR mode of 360 degrees video. You can change from the nomal mode to the VR mode of the video by click the goggle mark at bottom right. If you want to return the normal mode, please press down the "ESC" key.
100 Selections in Japan: The map for several types of 100 selections in Japan.
100 Selections in Japan Plus: It also supports the display to the local saved CSV files.
EN_Dialog_020.html: "EN_Dialog_020.html": It is a sample to show the Map with "Leaflet.js" in the dialog box. Inside of the dialog box is same to the "Demo for Tutorial_404" above.

References:

  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.

Licence

MIT

Author

T. Fujita