MapConductor React SDK Samples

कोड उदाहरण

import { useRef } from 'react';
import { createGeoPoint, createMapCameraPosition, type MapCameraPosition } from '@mapconductor/js-sdk-core';
import { MapLibreDesign, MapLibreMapView, useMapLibreViewState } from '@mapconductor/react-for-maplibre';
import { LeafletDesign, LeafletMapView, useLeafletMapViewState } from '@mapconductor/react-for-leaflet';


// (1) मैप बनाएँ


const initialCamera = createMapCameraPosition({
  position: createGeoPoint({ latitude: 35.6812, longitude: 139.7671 }),
  zoom: 12,
});


// (2) डेटा और इंटरैक्शन स्टेट तैयार करें
const leftMapState = useMapLibreViewState({
  mapDesignType: MapLibreDesign.OsmBrightJa,
  cameraPosition: initialCamera,
});
const rightMapState = useLeafletMapViewState({
  mapDesignType: LeafletDesign.OpenStreetMap,
  cameraPosition: initialCamera,
});
const leftProgrammatic = useRef(false);
const rightProgrammatic = useRef(false);


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


const syncCamera = (
  source: 'left' | 'right',
  camera: MapCameraPosition,
) => {
  const targetState = source === 'left' ? rightMapState : leftMapState;
  const targetGuard = source === 'left' ? rightProgrammatic : leftProgrammatic;
  if (targetGuard.current) return;


  targetGuard.current = true;
  targetState.moveCameraTo(camera, 0);
  requestAnimationFrame(() => { targetGuard.current = false; });
};


<div className="camera-grid">
  <MapLibreMapView
    state={leftMapState}
    onCameraMove={camera => syncCamera('left', camera)}
  />
  <LeafletMapView
    state={rightMapState}
    onCameraMove={camera => syncCamera('right', camera)}
  />
</div>

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

अलग-अलग रेंडर होने वाले दो प्रोवाइडर के बीच कैमरे के बदलाव आगे भेजें, और फ़ीडबैक लूप को रोकें।

यह पेज जानबूझकर दो प्रोवाइडर एक साथ चलाता है: useMapLibreViewState और useLeafletMapViewState दोनों अपना-अपना व्यू स्टेट बनाते हैं, जो एक ही initialCamera से शुरू होता है।

syncCamera एक मैप का कैमरा moveCameraTo(camera, 0) से दूसरे पर उतार देता है, और अगले requestAnimationFrame पर छूटने वाला useRef का पहरा उस नकल हुए अपडेट को वापस गूँजने नहीं देता।