CODEWITHSUNDEEP
javascriptmapbox-gl-js
David
David

Reputation: 815

Mapbox GL JS : Displaying lat, lon location

I have implemented a LAT LON readout of the cursor location in my webpage by following the example at This Mapbox GL JS Tutorial

However, the returned values come in as something like : 

{"lng:-74.949147382928,"lat":40.43829220439884}

You can see that in their example. Is there a way to only return the LAT and LON values? I would like something like :

-74.949147382928, 40.43829220439884

I am not very great with javascript, but I tried experimenting to use substring to modify the output like follows, but I am unable to do so. Surely there is an easier way? The code I tried is below, which was only a test just to see if I could theoretically do it. But using substring in this fashion doesnt seem to work. I am looking for any way to just return the LAT and LON values only, to be clear.

Failed Code : 

topleftmapbox.on('mousemove', function (e) {
    document.getElementById('info').innerHTML =
        JSON.stringify(e.lngLat.substring(6,17)); // attempting to substring out just the values
});

Upvotes: 0

Views: 69

Answers (1)

Scarysize
Scarysize

Reputation: 4281

You don't need to call JSON.stringify() with event.lngLat, you can just access the properties lng & lat of the lngLat object:

const info = document.getElementById('info');
info.textContent = `${e.lngLat.lng} ${e.lngLat.lat}`;

The example uses textContent instead of innerHtml and JavaScript template literals (backticks) to format the string to display.

Upvotes: 1

Related Questions