Displaying Current Location on Map Using Leaflet JS
Lets Get Started -
1. First we
create a basic HTML Structure with a Header and a Body section.
2. Then Insert a <div>
element in the body section to set the Map id so that we can style the Map
later.
3. Now
you can insert <style> tag inside the header section to style the map.
(The above style sets the map to Fullscreen)
4. Now
we will import the Leaflet library
copy the below code and paste it in the head section-
<link
rel="stylesheet"
href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css"
integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
crossorigin=""
/>
<script
src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"
integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="
crossorigin=""
></script>
for more information click here to see the documentation.
5. Now it's time to use javascript. We need to create a variable to assign it map layers.
you also need to set a map view.
*This set zoom(zoom:1) and focus on coordinates (0,0)
now you can see a map on your screen
Click here to find more Map tiles
7. To get the current location we will use locate() method.
This method will Set focus on your current location and set the specified zoom
8. Now we will add a listener to locate() method and call function with a parameter 'e' which will contain the coordinates.
In the below code marker is added to the map with a popup
fullcode -
<!DOCTYPE html>
<html>
<head>
<link
rel="stylesheet"
href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css"
integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
crossorigin=""
/>
<script
src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"
integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="
crossorigin=""
></script>
<style>
#map {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
var mymap = L.map("map");
mymap.setView([0,0], 1);
var map_1 = L.tileLayer(
"https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
{
attribution:
'© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
}
).addTo(mymap);
mymap.locate({setView: true, maxZoom: 7})
.on('locationfound', function(e){
var marker = L.marker([e.latitude, e.longitude]).bindPopup('Your are here :)').addTo(mymap);
})
</script>
</body>
</html>
Comments
Post a Comment