MapConductor React SDK Samples

Codebeispiel

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) Die Karte erzeugen


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


// (2) Daten und Interaktionszustand vorbereiten
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) Die Karte und ihre Overlays rendern


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>

Wie der Code funktioniert

Kameraänderungen zwischen zwei unabhängig gerenderten Anbietern weiterreichen und dabei Rückkopplungsschleifen unterdrücken.

Diese Seite betreibt bewusst zwei Anbieter gleichzeitig: useMapLibreViewState und useLeafletMapViewState bauen je einen eigenen View-State auf, der von derselben initialCamera ausgeht.

syncCamera überträgt die Kamera der einen Karte mit moveCameraTo(camera, 0) auf die andere, und eine useRef-Sperre, die erst im nächsten requestAnimationFrame gelöst wird, verhindert, dass die gespiegelte Aktualisierung zurückhallt.