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.
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
Get help from others!
Recent Answers
Recent Questions
© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP