MapConductor React SDK Samples

Agrupación de oficinas postales | MapLibre | MapConductor React SDK

Ejemplo de Agrupación de oficinas postales de MapConductor React SDK con MapLibre.

Este ejemplo interactivo muestra Agrupación de oficinas postales mediante la abstracción de MapConductor sobre MapLibre.

Ejemplo de código

import { useMemo, useState } from 'react';
import {
  MarkerTilingOptions,
  createGeoPoint,
  createMapCameraPosition,
  createMarkerState,
  type MarkerState,
} from '@mapconductor/js-sdk-core';
import { MapLibreDesign, MapLibreMapView2D, useMapLibreViewState } from '@mapconductor/react-for-maplibre';
import { MarkerClusterGroup } from '@mapconductor/react-marker-clustering';


// (1) Crear el mapa


const initialCamera = createMapCameraPosition({
  position: createGeoPoint({ latitude: 35.6812, longitude: 139.7671 }),
  zoom: 12,
});


const mapViewState = useMapLibreViewState({
  mapDesignType: MapLibreDesign.OsmBrightJa,
  cameraPosition: initialCamera,
});


// (2) Preparar los datos y el estado de interacción
const [selected, setSelected] = useState<MarkerState | null>(null);
const postOfficeMarkers = useMemo(() => postOffices.map(office => createMarkerState({
  id: office.id,
  position: createGeoPoint({ latitude: office.lat, longitude: office.lng }),
  extra: office,
  onClick: markerState => setSelected(markerState),
})), [postOffices]);
const markerTilingOptions = {
  ...MarkerTilingOptions.Default,
  iconScaleCallback: (_state: MarkerState, zoom: number) =>
    zoom > 10 ? 0.8 : zoom > 5 ? 0.5 : 0.2,
};


// (3) Renderizar el mapa y sus capas


<MapLibreMapView2D state={mapViewState}>
  <MarkerClusterGroup
    markers={postOfficeMarkers}
    clusterIconProvider={clusterIconProvider}
    onClusterClick={zoomToCluster}
    minClusterSize={3}
    clusterRadiusPx={80}
  />
</MapLibreMapView2D>

Cómo funciona el código

Agrupa una colección grande de marcadores y define un icono y una acción de clic personalizados mediante la API de extensiones.

El mismo arreglo postOfficeMarkers alimenta a MarkerClusterGroup en lugar de <Markers>, de modo que las oficinas cercanas se agrupan automáticamente al alejar el mapa.

clusterIconProvider dibuja la insignia del grupo, onClusterClick ejecuta zoomToCluster para expandirlo, y minClusterSize con clusterRadiusPx ajustan la intensidad con que se combinan los puntos.