MapConductor React SDK Samples

कोड उदाहरण

import { useMemo, useState } from 'react';
import {
  createGeoPoint,
  createMapCameraPosition,
  createMarkerState,
  createPolygonState,
  type GeoPoint,
} from '@mapconductor/js-sdk-core';
import { Markers, Polygon } 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 [vertices, setVertices] = useState<GeoPoint[]>(initialVertices);
const polygonState = useMemo(() => createPolygonState({
  id: 'area',
  points: vertices,
  fillColor: 'rgba(37, 99, 235, 0.3)',
  strokeColor: '#2563eb',
}), [vertices]);
const vertexMarkers = vertices.map((position, index) => createMarkerState({
  id: `vertex-${index}`, position, draggable: true,
}));


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


<MapLibreMapView2D state={mapViewState}>
  <Polygon state={polygonState} />
  <Markers states={vertexMarkers} />
</MapLibreMapView2D>

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

भरा हुआ पॉलीगॉन खींचें, और मार्कर से हर शीर्ष को दिखने और छूने लायक बनाएँ।

vertices सरणी React स्टेट है, और कोई शीर्ष हिलते ही useMemo PolygonState दोबारा बनाता है — हल्का नीला भराव और ठोस रेखा।

हर शीर्ष खींचे जा सकने वाले मार्कर के रूप में बनता है, इसलिए पॉलीगॉन की रूपरेखा एक-एक बिंदु करके बदली जा सकती है।