Today I am going to explain writing an geo location HTML page with Leaflet JS.
You can find my program in my GIST GitHub List
- Make the empty HTML page with HTML, HEAD, BODY tags
- Place the CSS link first in HEAD tag
- After CSS, paste the Leaflet JS file reference
- In BODY, create a DIV tag specifying the ID attribute and height and width style attributes
- id="mapid" style="width: 600px; height: 400px;"
- Get lat (Latitude) and long (Longitude) of your own choice of location.
- Take latlong reference from https://www.mapcoordinates.net/en
- Use map setView to set the location with latlong and zoom level
- var mymap = L.map('mapid').setView([17.496380,78.393175], 15);
- Make a marker with popup using marker and bindPopup functions
- var marker = L.marker([17.496380,78.393175]).addTo(mymap);
- marker.bindPopup("Hello !! This is JNTU, Hyderabad, India campus.").openPopup();
- Open your HTML page in any compatible browser
- You should be able to view your map with specified location and control the map with zoom out and zoom in capabilities.
Please send your feedback and comments to firstname.lastname@example.org