MapConductor React SDK Samples

कोड उदाहरण

import { useMemo, useState } from 'react';
import {
  createGeoPoint,
  createMapCameraPosition,
  createMarkerState,
  type MarkerState,
} from '@mapconductor/js-sdk-core';
import { InfoBubble, Markers } from '@mapconductor/js-sdk-react';
import { MapBoxMapView2D, MapboxDesign, useMapboxViewState } from '@mapconductor/react-for-mapbox';


// (1) मैप बनाएँ


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


const mapViewState = useMapboxViewState({
  accessToken: import.meta.env.VITE_MAPBOX_ACCESS_TOKEN,
  mapDesignType: MapboxDesign.Streets,
  cameraPosition: initialCamera,
});


// (2) डेटा और इंटरैक्शन स्टेट तैयार करें
const [selectedMarker, setSelectedMarker] = useState<MarkerState | null>(null);
const storeMarkers = useMemo(() => stores.map(store => createMarkerState({
  id: store.id,
  position: createGeoPoint({ latitude: store.lat, longitude: store.lng }),
  extra: store,
  onClick: markerState => setSelectedMarker(markerState),
})), [stores]);
const clearSelection = () => setSelectedMarker(null);


// (3) मैप और उसके ओवरले रेंडर करें


<MapBoxMapView2D state={mapViewState} onMapClick={clearSelection}>
  <Markers states={storeMarkers} />
  {selectedMarker && (
    <InfoBubble marker={selectedMarker}>
      <StoreInfoView store={selectedMarker.extra} />
    </InfoBubble>
  )}
</MapBoxMapView2D>

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

स्टोर मार्कर का पूरा संग्रह एक ही रचना में रेंडर करें, और चुने हुए स्टोर के लिए इन्फ़ो बबल दिखाएँ।

storeMarkers सरणी useMemo से एक बार बनती है: हर createMarkerState अपने स्टोर का रिकॉर्ड extra फ़ील्ड में रखता है और एक onClick हैंडलर, जो टैप किए गए MarkerState को सहेजता है; onMapClick चयन हटा देता है।

बंडल किया हुआ <Markers> कंपोनेंट हर स्टोर को एक ही चक्कर में खींचता है, और InfoBubble चुने हुए मार्कर से बँधा रहता है, इसलिए StoreInfoView तभी दिखता है जब कोई स्टोर चुना हो।