How to show current position on map (Leaflet)?

This public forum is for user-to-user discussions of PHPMaker. Note that this is not support forum.
Post Reply
buhuhu
User
Posts: 205

How to show current position on map (Leaflet)?

Post by buhuhu »

Hello,

How can I show on list page with leafleat the current position on map ?

Best Regards,


arbei
User
Posts: 9389

Post by arbei »

You may use browser's Geolocation API and then add marker to the map.


buhuhu
User
Posts: 205

Post by buhuhu »

window.addEventListener('load', on_load_handler);
let $map = $("#ew-list").find(".leaflet-container").first();
let map_var = $map.data("map");
let map_ext = $map.data("ext");

async function on_load_handler(event)
{
    $map = $("#mp_viewStatii2024_ShowOnMap");
    map_ext = $map.data("ext");
    map_var = $map.data("map");
    get_position();
}

console.log("JQ obj:",$map);
console.log ("map_var:",map_var);
console.log("map data:",$("#mp_viewStatii2024_ShowOnMap").data());

function get_position()
{
	let coords_tmp;
    if (navigator.geolocation) {
	navigator.geolocation.getCurrentPosition(save_pos,error,{enableHighAccuracy: true});
    
    }
    
	return coords_tmp;
}

let myIcon = L.icon({
    iconUrl: "gpsIcon.jpg",
    iconSize: [15, 15]
});

function save_pos(pos)
{
    let coords_tmp=pos.coords;
    if(typeof (map_var) !=='undefined')
    {
        let latlng = L.latLng(coords_tmp.latitude,coords_tmp.longitude);
        let marker_now = L.marker(latlng,{icon:myIcon}).bindPopup("<p>You are Here:"+"</p> <p>"+"Lat:"+coords_tmp.latitude.toString()+"</p> <p>"+"Long:"+coords_tmp.longitude.toString()+"</p>").addTo(map_var);
    
        $("#mp_viewStatii2024_ShowOnMap").data("marker_now",marker_now);
    }
}

function error(err)
{
    console.warn(`ERROR(${err.code}): ${err.message}`);
}

For anyone this working on mobile now


Post Reply