Use a custom camera animation with a geocoder

Use camera animation options with the mapbox-gl-geocoder to create a custom animation when a result is selected. See the example: https://docs.mapbox.com//mapbox-gl-js/example/mapbox-gl-geocoder-with-flyto/

by Paul Davis

HTML

<script src="https://api.mapbox.com/mapbox-gl-js/v1.10.0/mapbox-gl.js"></script>
<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/v1.10.0/mapbox-gl.css">
<link rel="stylesheet" href="https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v4.5.1/mapbox-gl-geocoder.css">



<!-- Promise polyfill script required to use Mapbox GL Geocoder in IE 11 -->


<div id="map"></div>

CSS

body { margin: 0; padding: 0; }
	#map { position: absolute; top: 0; bottom: 0; width: 100%; }

JavaScript

mapboxgl.accessToken = 'pk.eyJ1IjoicmR4c29sdXRpb25zIiwiYSI6ImNqeTV5M2ZxcDBjbDgzY29ibHljZ3J5cmwifQ.OzMkYZIPtRPaTNEs-MgShQ';
    var map = new mapboxgl.Map({
        container: 'map',
        style: 'mapbox://styles/mapbox/streets-v9',
        center: [-79.4512, 43.6568],
        zoom: 13
    });

    var geocoder = new MapboxGeocoder({
        accessToken: mapboxgl.accessToken,
        localGeocoder: localGeocoder,
        localGeocoderOnly: true,
        flyTo: {
            bearing: 0,
            // These options control the flight curve, making it move
            // slowly and zoom out almost completely before starting
            // to pan.
            speed: 0.2, // make the flying slow
            curve: 1, // change the speed at which it zooms out
            // This can be any easing function: it takes a number between
            // 0 and 1 and returns another number between 0 and 1.
            easing: function(t) {
                return t;
            }
        },
        mapboxgl: mapboxgl
    });
    map.addControl(geocoder);
    
    function localGeocoder(query) {
    	console.log(query);
    }