MapConductor React SDK Samples

Codebeispiel

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


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


const mapViewState = useMapLibreViewState({
  mapDesignType: MapLibreDesign.OsmBrightJa,
  cameraPosition: initialCamera,
});


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


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

Wie der Code funktioniert

Eine einzige GroundImageState-Instanz behalten und ihre bounds aus den ziehbaren Eck-Markern aktualisieren.

Ein einziger GroundImageState wird mit useState erzeugt und nie ersetzt; das Ziehen einer Ecke ruft moveSouthWest auf, das groundImageState.bounds ein frisches createGeoRectBounds zuweist.

Weil der State beobachtbar ist, wird jede bounds-Zuweisung an den Kartenanbieter durchgereicht, sodass sich das eingeblendete Bild den Eck-Markern anpasst.