CODEWITHSUNDEEP
mapboxmapbox-gl-js
Alexander Albrecht
Alexander Albrecht

Reputation: 23

Setting zoom level after selecting Geocoder result

Is it possible in Mapbox GL to set a zoom level after the user selects one search result? My goal is to show at least a few markers on the map around the user. Or is there another way to achieve the same result, like zoom to geocoder marker + nearest marker?

Upvotes: 1

Views: 1649

Answers (3)

Nathanael Peter Sheehan
Nathanael Peter Sheehan

Reputation: 1

You want to use the zoom variable from flyTo

    map.addControl(
      new MapboxGeocoder({
        accessToken: mapboxgl.accessToken,
        flyTo: {
          bearing: 0,
          speed: 0.8, 
          curve: 1, 
          zoom: 6,
          easing: function (t) {
          return t;
          }
          },
        mapboxgl: mapboxgl,
      })
    );

Upvotes: 0

p_duthoit
p_duthoit

Reputation: 328

After the user selects a geocoder result, its possible to give him some options to fit specific zoom level, by using the flyTo options

var geocoder = new MapboxGeocoder({
  accessToken: mapboxgl.accessToken,
  mapboxgl: mapboxgl,
  flyTo: {
    padding: 15, // If you want some minimum space around your result
    easing: function(t) {
      return t;
    },
    maxZoom: 6, // If you want your result not to go further than a specific zoom
  }
})

More options for the flyTo property here : https://docs.mapbox.com/mapbox-gl-js/api/map/#map#flyto

Upvotes: 0

Steve Bennett
Steve Bennett

Reputation: 126907

You can set the zoom level that the Mapbox geocoder goes to when there's a result like this:

new MapboxGeocoder({
  accessToken: mapboxgl.accessToken,
  mapboxgl: mapboxgl,
  zoom: 12
})

Upvotes: 1

Related Questions