MapConductor React SDK Samples

कोड उदाहरण

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) मैप बनाएँ


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


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


// (2) डेटा और इंटरैक्शन स्टेट तैयार करें
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) मैप और उसके ओवरले रेंडर करें


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

कोड कैसे काम करता है

बहुत सारे मार्कर का क्लस्टर बनाएँ, और एक्सटेंशन API से अपना क्लस्टर आइकन तथा क्लिक व्यवहार दें।

वही postOfficeMarkers सरणी <Markers> की जगह MarkerClusterGroup को दी जाती है, इसलिए ज़ूम आउट करते ही पास-पास के डाकघर अपने आप समूह बन जाते हैं।

clusterIconProvider क्लस्टर का बैज खींचता है, onClusterClick zoomToCluster चलाकर समूह खोलता है, और minClusterSize तथा clusterRadiusPx तय करते हैं कि बिंदु कितनी सख़्ती से जुड़ें।