MapConductor React SDK Samples

कोड उदाहरण

import { useState } from 'react';
import {
  createGeoPoint,
  createGeoRectBounds,
  createGroundImageState,
  createMapCameraPosition,
  createMarkerState,
  type MarkerState,
} from '@mapconductor/js-sdk-core';
import { GroundImage, 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 [groundImageState] = useState(() => createGroundImageState({
  id: 'historic-map', imageUrl, bounds: initialBounds, opacity: 0.7,
}));


const moveSouthWest = (markerState: MarkerState) => {
  groundImageState.bounds = createGeoRectBounds({
    southWest: markerState.position,
    northEast: groundImageState.bounds.northEast,
  });
};


const southWestMarker = createMarkerState({
  id: 'south-west', position: groundImageState.bounds.southWest!,
  draggable: true, onDrag: moveSouthWest, onDragEnd: moveSouthWest,
});
const cornerMarkers = [southWestMarker, northEastMarker];


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


<MapLibreMapView2D state={mapViewState}>
  <GroundImage state={groundImageState} />
  <Markers states={cornerMarkers} />
</MapLibreMapView2D>

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

GroundImageState का एक ही इंस्टेंस बनाए रखें और खींचे जा सकने वाले कोने के मार्कर से उसके bounds अपडेट करें।

useState से एक ही GroundImageState बनता है और कभी बदला नहीं जाता; कोई कोना खींचने पर moveSouthWest चलता है, जो groundImageState.bounds में नया createGeoRectBounds डाल देता है।

स्टेट अवलोकनीय है, इसलिए bounds की हर नियुक्ति मैप प्रोवाइडर तक पहुँच जाती है और ऊपर रखी इमेज कोने के मार्कर के साथ खिंच जाती है।