0

I'm using MapBox GL JS and the mapbox-gl-draw plugin in a simple MapBox map .... here you're the code ... 

<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.38.0/mapbox-gl.js'></script>
    <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.38.0/mapbox-gl.css' rel='stylesheet' />

    <!-- *** References for MapBox GL Draw ... -->
    <script src='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-draw/v0.18.0/mapbox-gl-draw.js'></script>
    <link rel='stylesheet' href='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-draw/v0.18.0/mapbox-gl-draw.css' type='text/css'/>

    <style>
        body { margin:0; padding:0; }
        #map { position:absolute; top:0; bottom:0; width:100%; }
    </style>
</head>
<body>

<div id='map'></div>
<script>
mapboxgl.accessToken = '<PUT_YOUR_KEY_HERE>';
var map = new mapboxgl.Map({
    container: 'map', // container id
    style: 'mapbox://styles/mapbox/streets-v9', //stylesheet location
    center: [-74.50, 40], // starting position
    zoom: 9 // starting zoom
});

// *** Add zoom and rotation controls to the map ...
//      osm_map.addControl(new mapboxgl.Navigation({position: 'bottom-left'}));
map.addControl(new mapboxgl.NavigationControl());

// *** Add the draw control to the map ...
var draw = new MapboxDraw({
    displayControlsDefault: false,
    controls: {
        point: true,
        trash: true
    }
});
map.addControl(draw, 'top-left');

</script>

</body>
</html>

When the user click / edit a point on the map I'd like to set the map center at the lat / lon coordinates of the edited point.

Suggestions / examples?

Improve this question
1

Check out the Events for Mapbox GL Draw at https://github.com/mapbox/mapbox-gl-draw/blob/master/API.md#events

You can use it like this:

map.on('draw.create', function (e) {
  if (e.features.length && e.features[0].geometry.type == 'Point') {
    var center = e.features[0].geometry.coordinates;
    //map.setCenter(center);
    map.easeTo({center: center});
  }
})

https://jsbin.com/recuyufixu/edit?html,output

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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