MapConductor React SDK Samples

コード例

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) 地図の作成


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


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


// (2) データと操作用Stateの準備
const destination = createMapCameraPosition({
  position: createGeoPoint({ latitude: 35.6812, longitude: 139.7671 }),
  zoom: 13,
});
const destinations = [createMarkerState({ id: 'tokyo', position: destination.position })];


// (3) 地図とオーバーレイの描画


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


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

コードの読み方

すべてのプロバイダーで共通の API を使い、目的地まで1秒間のアニメーションでカメラを移動します。

destination は座標とズームをまとめて指定する MapCameraPosition で、destinations 配列は目的地にマーカーを1つ置いて位置を示します。

ボタンは mapViewState.moveCameraTo(destination, 1000) を呼び出し、どのプロバイダーが描画していても 1000ms のアニメーションが同じように再生されます。