I have encountered an issue while using MapBox. When a user clicks on the map, I am receiving longitude and latitude coordinates that are not very accurate. For example, when I clicked in the United Kingdom, the values pointed me to the middle of the sea according to Google Maps.
How can this problem be resolved for more precise results? I tried using position absolute as suggested, but it gave me the same inaccurate outcome.
<div id="right" class="map">
<div id='map' class="map" style='width: 100%; height: 100%;'></div>
<pre id='info'></pre>
<script>
mapboxgl.accessToken = 'pk.eyJ1IjoibGl2ZS1vbGRoYW0iLCJhIjoiY2ozbXk5ZDJ4MDAwYjMybzFsdnZwNXlmbyJ9.VGDuuC92nvPbJo-qvhryQg';
var map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/streets-v10',
center: [-1.77, 52.73],
zoom: 3
});
map.on('click', function(e) {
document.getElementById('info').innerHTML =
JSON.stringify(e.point) + JSON.stringify(e.lngLat);
});
</script>
</div>