mapboxFocusSingleFeature

Usage

mapboxFocusSingleFeature() is a utility function that helps focus the map view on a specific GeoJSON feature. It intelligently handles both clustered and non-clustered features, automatically calculating the appropriate zoom level needed to break clustered features out of their clusters.

Behavior for unclustered features:
When the feature isn't clustered, simply fly to it.

1. Uses map.flyTo() to center the map on the feature's coordinates

Behavior for clustered features:
When the feature is clustered, zoom to the minimum expansion zoom needed to break this feature out of the cluster.

1. Gets all current clusters in the visible map area (using -180 to 180 longitude, -85 to 85 latitude)
2. Filters to only keep clustered features
3. Calculates the minimum zoom level needed to break this feature out of its cluster
4. Sets a minimum zoom level of 10 (won't zoom out further than this)
5. Flies to the feature's location at the calculated zoom level

Basic example

<script setup lang="ts">
import { mapboxFocusSingleFeature } from '@nobears-front-end/nuxt-mapbox';

// Focus on a non-clustered feature
mapboxFocusSingleFeature(map, supercluster, feature);

// Focus on a clustered feature with custom animation options
mapboxFocusSingleFeature(map, supercluster, feature, {
    duration: 1000,
    easing: (t) => t * (2 - t)
});
</script>

Type Definition

declare function 
mapboxFocusSingleFeature
(
    
map
: 
Map
 | null,
    
supercluster
: 
Supercluster
,
    
feature
: 
Feature
<
Point
, { 
cluster
?: boolean }>,
    
options
?: 
EasingOptions
,
): void;

API Reference

Params

Changelog