My first Geo Location program using Leaflet JS

Hi folks,

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

https://gist.github.com/psrdotcom/85c56bc2ffaadb254e63bde2b3b162d5

Procedure

• Make the empty HTML page with HTML, HEAD, BODY tags
• Place the CSS link first in HEAD tag
• "https://unpkg.com/leaflet@1.6.0/dist/leaflet.css"
• After CSS, paste the Leaflet JS file reference
• "https://unpkg.com/leaflet@1.6.0/dist/leaflet.js"
• 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 psrdotcom@gmail.com