Mapbox gl geocoder flyTo
HTML
<script src=" https://npmcdn.com/@turf/turf/turf.min.js"></script>
<script src="https://api.tiles.mapbox.com/mapbox-gl-js/v0.38.0/mapbox-gl.js"></script>
<link rel="stylesheet" href="https://api.tiles.mapbox.com/mapbox-gl-js/v0.38.0/mapbox-gl.css">
<link rel="stylesheet" href="https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v2.1.0/mapbox-gl-geocoder.css">
<script src="https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v2.1.0/mapbox-gl-geocoder.min.js"></script>
<div id="map"></div>
CSS
#map {
height: 500px;
display: none;
}
JavaScript
var token = 'pk.eyJ1IjoiZmFyYWRheTIiLCJhIjoiTUVHbDl5OCJ9.buFaqIdaIM3iXr1BOYKpsQ';
mapboxgl.accessToken = token;
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
});
var geocoderIsFlying;
var geocoder = new MapboxGeocoder({accessToken: token});
geocoder.on('result', function(ev) {
console.log("CENTER:", ev.result.center);
console.log("BOUNDS:", map.getBounds());
geocoderIsFlying = true;
map.once('moveend', moveHandler);
});
map.addControl(geocoder);
function moveHandler(e) {
if(geocoderIsFlying === true) {
geocoderIsFlying = false;
console.log(geocoderIsFlying);
}
}