1

I'm still a js noob.

I am currently developing a map using the Mapbox GL JS API with their geocoding plugin, however, I'm am not seeing any examples of adding a marker after the return.

I did find a previous thread (Mapbox Geocoding and Markers) with the same question, however, this is referring to the js api and appears to be using a different syntax.

Here is my code thus far:

<!DOCTYPE html>
<html>
    <head>
<meta charset='utf-8' />
<title></title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.12.2/mapbox-gl.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.12.2/mapbox-gl.css' rel='stylesheet' />
<style>
    body { margin:0; padding:0; }
    #map { position:absolute; top:0; bottom:0; width:100%; }
</style>
</head>
<body>
    <script src='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v0.0.0/mapbox-gl-geocoder.js'></script>
<link rel='stylesheet' href='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v0.0.0/mapbox-gl-geocoder.css' type='text/css' />
<div id='map'></div>

<script>
mapboxgl.accessToken = <token>;
if (!mapboxgl.supported()) {
alert('Your browser does not support Mapbox GL');
} else {
var map = new mapboxgl.Map({
    container: 'map',
    style: 'mapbox://styles/<user.id>/<style.id>',
    center: [-122.654422, 45.5434085],
    zoom: 11
});
}
map.addControl(new mapboxgl.Geocoder('top-left'));
map.addControl(new mapboxgl.Navigation({position: 'top-right'}));
</script>

</body>
</html>

Here is the link to the API: https://www.mapbox.com/mapbox-gl-js/api/

1 Answer 1

3

The basic idea is to listen for the geocoder.input and to create a point based on the result.

geocoder.on('geocoder.input', function(ev) {
  map.getSource('single-point').setData(ev.result.geometry);
});

Here's an example demonstrating it: https://www.mapbox.com/mapbox-gl-js/example/point-from-geocoder-result/

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.