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 { MapLibreDesign, MapLibreMapView2D, useMapLibreViewState } from '@mapconductor/react-for-maplibre';


// (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 markers = useMemo(() => markerData.map(item => createMarkerState({
  id: item.id,
  position: createGeoPoint(item.position),
  icon: item.icon,
  onClick: markerState => setSelected(markerState),
})), [markerData]);


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


<MapLibreMapView2D state={mapViewState}>
  <Markers states={markers} />
  {selected && <InfoBubble marker={selected}>{selected.extra}</InfoBubble>}
</MapLibreMapView2D>

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

कई आइकन स्रोतों से मार्कर बनाएँ, और मार्कर चुने जाने पर बबल खोलें।

markers सरणी markerData से memo होती है, और हर createMarkerState अपना आइकन तथा एक onClick रखता है, जो चुने गए MarkerState को दर्ज करता है।

बंडल किया हुआ <Markers> हर आइकन रूप को एक साथ रेंडर करता है, और InfoBubble selected.extra तभी दिखाता है जब कोई मार्कर सक्रिय रहे।