TransWikia.com

Get MapBox Marker Coordinates Dynamically

Geographic Information Systems Asked by Prince Kadiwar on November 1, 2021

I am new to MapBox and this may be a very simple solution, what I am trying to Achieve is to get the Coordinates of the marker which pops up when I search for Any Address/Location in the Search box. The Marker is a draggable, and it should fetch the updated coordinates when moved.

Please have a look at the below code:

<html>
<head>
<meta charset="utf-8" />
<title>Locate the user</title>
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
<script src="https://api.mapbox.com/mapbox-gl-js/v1.11.1/mapbox-gl.js"></script>
<link href="https://api.mapbox.com/mapbox-gl-js/v1.11.1/mapbox-gl.css" rel="stylesheet" />
<style>
    body { margin: 0; padding: 0; }
    #map { position: absolute; top: 0; bottom: 0; width: 50%; }
</style>
</head>
<body>
    <script src="https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v4.5.1/mapbox-gl-geocoder.min.js"></script>
    <link
    rel="stylesheet"
    href="https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v4.5.1/mapbox-gl-geocoder.css"
    type="text/css"
    />
    <!-- Promise polyfill script required to use Mapbox GL Geocoder in IE 11 -->
    <script src="https://cdn.jsdelivr.net/npm/es6-promise@4/dist/es6-promise.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/es6-promise@4/dist/es6-promise.auto.min.js"></script>


    <style>
        .coordinates {
        background: rgba(0, 0, 0, 0.5);
        color: #fff;
        position: absolute;
        bottom: 40px;
        left: 10px;
        padding: 5px 10px;
        margin: 0;
        font-size: 11px;
        line-height: 18px;
        border-radius: 3px;
        display: none;
        }
        </style>
<div id="map"></div>
<pre id="coordinates" class="coordinates"></pre>
<script>
    mapboxgl.accessToken = 'pk......';
    

    var map = new mapboxgl.Map({
        container: 'map', // container id
        style: 'mapbox://styles/mapbox/streets-v11',
        center: [-96, 37.8], // starting position
        zoom: 2 // starting zoom
    });

    map.addControl(new mapboxgl.NavigationControl());

    var geocoder = new MapboxGeocoder({
        accessToken: mapboxgl.accessToken,
        marker: {
        color: 'orange',
        draggable: true
        },
        mapboxgl: mapboxgl
        });
    
    map.addControl(geocoder);


</script>

</body>
</html>

Please add you Mapboxgl AccessToken.

One Answer

When you select a result from the search, as it places the marker on the map, the Geocoder will also fire a 'result' event, https://github.com/mapbox/mapbox-gl-geocoder/blob/master/API.md#on which you can listen to with:

geocoder.on('result', function(result) {
  console.log(result)
})

I don't think detecting when this is dragged is officially supported yet, but you could probably hack a solution with:

geocoder.mapMarker.on('dragend', function (e) {
  console.log(e)
})

You might need to register the listener only after the result event is triggered, by placing it inside the previous callback function.

Answered by AndrewHarvey on November 1, 2021

Add your own answers!

Ask a Question

Get help from others!

© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP