mapboxFocusFeatures
A utility function for focusing the Mapbox GL map view on one or more GeoJSON features.
Added since: v0.1.0
Last changed:
Usage
mapboxFocusFeatures() is a utility that helps focus the map view on one or more GeoJSON features.
Behavior for a single feature:
This is a fallback behavior. For a better zoom level, use mapboxFocusSingleFeature.
- Uses
map.flyTo()to center the map on the feature's coordinates
Behavior for multiple features:
This is the intended behavior.
- Recursively adds the coordinates of all features to the map's bounds
- Fits the map bounds to contain all features using
map.fitBounds()
Basic example
MapComponent.vue
<script setup lang="ts">
import { mapboxFocusFeatures } from '@nobears-front-end/nuxt-mapbox';
// Focus on a single feature
mapboxFocusFeatures(map, [singleFeature], { duration: 1000 });
// Focus on multiple features
mapboxFocusFeatures(map, [feature1, feature2], { duration: 1000 });
</script>
Type Definition
declare function mapboxFocusFeatures(
map: Map | null,
features: MapboxFeatures,
options?: EasingOptions,
): void;
API Reference
Params
map
Map | null required
The Mapbox GL map instance.
features
MapboxFeatures required
Array of GeoJSON features to focus on.
options
EasingOptions
Optional easing options for the map animation.