MapConductor React SDK Samples

Code example

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) 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 [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) Render the map and its overlays


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

How the code works

Keep one GroundImageState instance and update its bounds from the draggable corner markers.

A single GroundImageState is created with useState and never replaced; dragging a corner calls moveSouthWest, which assigns a fresh createGeoRectBounds to groundImageState.bounds.

Because the state is observable, every bounds assignment is pushed to the map provider, so the overlaid image stretches to follow the corner markers.