I am trying to get user's current location and implement it into my leaflet map, or just echo it with PHP.
only one problem... I dunno how to do that properly.
currently, I'm getting user location through IP address but when I host on my server it just retrieves the server location (which i need to avoid):
<?php
$query = @unserialize(file_get_contents('http://ip-api.com/php/'));
if($query && $query['status'] == 'success'){
echo 'Your City is ' . $query['city'];
echo '<br />';
echo 'Your State is ' . $query['region'];
echo '<br />';
echo 'Your Zip Code is ' . $query['zip'];
echo '<br />';
echo 'Your Coordinates are ' . $query['lat'] . ', ' . $query['lon'];
}
?>
please help :) explain simply
here's the code for leaflet map:`
<!-- Map-->
<script src="https://unpkg.com/leaflet@1.5.1/dist/leaflet.js" integrity="sha512-GffPMF3RvMeYyc1LWMHtK8EbPv0iNZ8/oTtHPx9/cc2ILxQ+u905qIwdpULaqDkyBKgOaB57QTMg7ztg8Jm2Og==" crossorigin=""></script>
<!-- Available tile layers-->
<script src="js/map-layers.js"></script>
<script src="js/map-detail.js"></script>
<script>
createDetailMap({
mapId: 'detailMap',
mapZoom: 14,
mapCenter: [-42.40916, 172.83898],
circleShow: true,
circlePosition: [-42.40916, 172.83898]
})
</script><div class="text-block">
<h5 class="mb-4">Listing location</h5>
<div class="map-wrapper-300 mb-3">
<div class="h-100" id="detailMap"></div>
</div>`
You can use the geolocation API from Leaflet. Here the offical tutorial.
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);
map.locate({setView: true, maxZoom: 16});