MapConductor React SDK Samples

Codebeispiel

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) Die Karte erzeugen


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


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


// (2) Daten und Interaktionszustand vorbereiten
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) Die Karte und ihre Overlays rendern


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

Wie der Code funktioniert

Eine große Markersammlung clustern und über die Erweiterungs-API ein eigenes Cluster-Icon und Klickverhalten mitgeben.

Dasselbe postOfficeMarkers-Array speist MarkerClusterGroup statt <Markers>, sodass nahe beieinanderliegende Filialen beim Herauszoomen automatisch gruppiert werden.

clusterIconProvider zeichnet das Cluster-Abzeichen, onClusterClick führt zoomToCluster aus, um eine Gruppe zu öffnen, und minClusterSize zusammen mit clusterRadiusPx regelt, wie stark Punkte zusammengefasst werden.