MapConductor React SDK Samples

कोड उदाहरण

import { useMemo, useState } from 'react';
import {
  Spherical,
  createCircleState,
  createGeoPoint,
  createMapCameraPosition,
  type MarkerState,
} from '@mapconductor/js-sdk-core';
import { Circle, Marker, 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 center = createGeoPoint({ latitude: 21.382314, longitude: -157.933097 });
const [edge, setEdge] = useState(() => Spherical.computeOffset({
  origin: center, distance: 1000, heading: 90,
}));
const radiusMeters = useMemo(
  () => Spherical.computeDistanceBetween(center, edge),
  [edge],
);
const circleState = useMemo(() => createCircleState({
  id: 'circle', center, radiusMeters,
  fillColor: 'rgba(37, 99, 235, 0.3)',
}), [radiusMeters]);
const resizeCircle = (markerState: MarkerState) => setEdge(markerState.position);


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


<MapLibreMapView2D state={mapViewState}>
  <Circle state={circleState} />
  <Polyline points={[center, edge]} zIndex={1} />
  <Marker position={center} />
  <Marker position={edge} draggable onDrag={resizeCircle} />
</MapLibreMapView2D>

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

एक वृत्त खींचें और किनारे का मार्कर खींचकर उसकी त्रिज्या बदलें; त्रिज्या की रेखा वृत्त के ऊपर रखी जाती है।

किनारे का बिंदु React स्टेट है, जिसे Spherical.computeOffset से भरा जाता है; Spherical.computeDistanceBetween(center, edge) से radiusMeters निकलता है, और वह त्रिज्या बदलते ही useMemo CircleState दोबारा बना देता है।

किनारे का मार्कर खींचने पर resizeCircle edge को हिलाता है, जबकि zIndex 1 पर खींची गई Polyline त्रिज्या की रेखा को भराव के ऊपर रखती है और वृत्त उसी के साथ बढ़ता है।