MapConductor React SDK Samples

कोड उदाहरण

import { useMemo, useState } from 'react';
import {
  createGeoPoint,
  createMapCameraPosition,
  createMarkerState,
  createPolylineState,
  type GeoPoint,
} from '@mapconductor/js-sdk-core';
import { Markers, Polyline } 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 [points, setPoints] = useState<GeoPoint[]>(initialPoints);
const polylineState = useMemo(() => createPolylineState({
  id: 'route', points, strokeColor: '#ef4444', strokeWidth: 4,
}), [points]);
const waypointMarkers = points.map((position, index) => createMarkerState({
  id: `waypoint-${index}`, position, draggable: true,
}));


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


<MapLibreMapView2D state={mapViewState}>
  <Polyline state={polylineState} />
  <Markers states={waypointMarkers} />
</MapLibreMapView2D>

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

भौगोलिक बिंदुओं से एक रास्ता खींचें, और उसके शीर्षों को खींचे जा सकने वाले वेपॉइंट मार्कर के रूप में दें।

points सरणी React स्टेट है, और वे बिंदु बदलते ही useMemo PolylineState दोबारा बनाता है — 4 पिक्सेल की लाल रेखा।

हर बिंदु खींचे जा सकने वाला वेपॉइंट मार्कर भी बन जाता है, इसलिए रास्ता सीधे मैप पर ही बदला जा सकता है।