In my project I am using leaflet to display points. I want to get the current lat and long after clicked on button Show Your Location, I tried the below code:
https://jsfiddle.net/a1p26e7v/
What do i do?
lat = '34.020479';
lon = '-118.4117325';
var map = L.map('map', {
center: [lat, lon],
zoom: 12
});
mapLink = '<a href="http://openstreetmap.org">OpenStreetMap</a>';
L.tileLayer(
'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© ' + mapLink + ' Contributors',
maxZoom: 18
}).addTo(map);
var gIcon = L.icon({
iconUrl: 'https://up.grdagrd.com/image/map_maker.png',
iconSize: [20, 32],
});
map.on('click', function(e) {
var latlng = map.mouseEventToLatLng(e.originalEvent);
console.log(latlng.lat + ', ' + latlng.lng);
L.marker([latlng.lat, latlng.lng], {
icon: gIcon
}).addTo(map);
});<script src="https://unpkg.com/leaflet@1.0.1/dist/leaflet.js"></script>
<link href="https://unpkg.com/leaflet@1.0.1/dist/leaflet.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" name="latitude" autocomplete="off" readonly>
<input type="text" name="longitude" autocomplete="off" readonly>
<p></p>
<button type="button" class="btnGetLoc"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-geo-fill" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M4 4a4 4 0 1 1 4.5 3.969V13.5a.5.5 0 0 1-1 0V7.97A4 4 0 0 1 4 3.999zm2.493 8.574a.5.5 0 0 1-.411.575c-.712.118-1.28.295-1.655.493a1.319 1.319 0 0 0-.37.265.301.301 0 0 0-.057.09V14l.002.008a.147.147 0 0 0 .016.033.617.617 0 0 0 .145.15c.165.13.435.27.813.395.751.25 1.82.414 3.024.414s2.273-.163 3.024-.414c.378-.126.648-.265.813-.395a.619.619 0 0 0 .146-.15.148.148 0 0 0 .015-.033L12 14v-.004a.301.301 0 0 0-.057-.09 1.318 1.318 0 0 0-.37-.264c-.376-.198-.943-.375-1.655-.493a.5.5 0 1 1 .164-.986c.77.127 1.452.328 1.957.594C12.5 13 13 13.4 13 14c0 .426-.26.752-.544.977-.29.228-.68.413-1.116.558-.878.293-2.059.465-3.34.465-1.281 0-2.462-.172-3.34-.465-.436-.145-.826-.33-1.116-.558C3.26 14.752 3 14.426 3 14c0-.599.5-1 .961-1.243.505-.266 1.187-.467 1.957-.594a.5.5 0 0 1 .575.411z"></path></svg>Show Your Location</button>
<p></p>
<div id="map" style="height: 250px;width: 360px;z-index: 9999999;"></div>Add a html id to your button:
<button type="button" class="btnGetLoc" id="btnGetLoc"> ...
and then use following, to locate the location:
L.DomEvent.on(document.getElementById('btnGetLoc'), 'click', function(){
map.locate({setView: true, maxZoom: 16});
})
Getting the coordinates after location found:
function onLocationFound(e) {
var radius = e.accuracy;
L.marker(e.latlng).addTo(map)
.bindPopup("You are within " + radius + " meters from this point").openPopup();
L.circle(e.latlng, radius).addTo(map);
}
map.on('locationfound', onLocationFound);
You can find more infos in the Leaflet Tutorial: https://leafletjs.com/examples/mobile/