MapConductor React SDK Samples

Code example

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) Create the map


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


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


// (2) Prepare the data and interaction state
const destination = createMapCameraPosition({
  position: createGeoPoint({ latitude: 35.6812, longitude: 139.7671 }),
  zoom: 13,
});
const destinations = [createMarkerState({ id: 'tokyo', position: destination.position })];


// (3) Render the map and its overlays


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


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

How the code works

Move the camera to a destination with a one-second animation while using the same API for every provider.

The destination is a MapCameraPosition that fixes both a coordinate and a zoom level, and the destinations array drops one marker there so the target is visible.

The button calls mapViewState.moveCameraTo(destination, 1000), and the 1000 ms animation runs identically no matter which provider renders the map.