MapConductor React SDK Samples

Codebeispiel

import { createGeoPoint, createMapCameraPosition, createMarkerState } from '@mapconductor/js-sdk-core';
import { 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 destination = createMapCameraPosition({
  position: createGeoPoint({ latitude: 35.6812, longitude: 139.7671 }),
  zoom: 13,
});
const destinations = [createMarkerState({ id: 'tokyo', position: destination.position })];


// (3) Die Karte und ihre Overlays rendern


<button onClick={() => mapViewState.moveCameraTo(destination, 1000)}>
  Fly to destination
</button>


<MapLibreMapView2D state={mapViewState}>
  <Markers states={destinations} />
</MapLibreMapView2D>

Wie der Code funktioniert

Die Kamera mit einer Sekunde Animation an ein Ziel bewegen — mit derselben API für jeden Anbieter.

Das Ziel ist eine MapCameraPosition, die Koordinate und Zoomstufe zugleich festlegt, und das destinations-Array setzt dort einen Marker, damit das Ziel sichtbar ist.

Die Schaltfläche ruft mapViewState.moveCameraTo(destination, 1000) auf; die 1000-ms-Animation läuft gleich ab, egal welcher Anbieter die Karte rendert.