MapConductor React SDK Samples

コード例

import { useEffect, useState } from 'react';
import { createGeoPoint, createMapCameraPosition } from '@mapconductor/js-sdk-core';
import { MapLibreDesign, MapLibreMapView2D, useMapLibreViewState } from '@mapconductor/react-for-maplibre';
import { HeatmapOverlay, HeatmapPointState, HeatmapPoints } from '@mapconductor/react-heatmap';


// (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 [heatmapPoints, setHeatmapPoints] = useState<HeatmapPointState[]>([]);
useEffect(() => {
  fetch('/postoffice/postoffices.json')
    .then(response => response.json() as Promise<[number, number][]>)
    .then(data => setHeatmapPoints(data.map(([latitude, longitude], index) =>
      new HeatmapPointState({
        id: `post-office-${index}`,
        position: createGeoPoint({ latitude, longitude }),
      }),
    )));
}, []);


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


<MapLibreMapView2D state={mapViewState}>
  <HeatmapOverlay>
    <HeatmapPoints states={heatmapPoints} />
  </HeatmapOverlay>
</MapLibreMapView2D>

コードの読み方

重みを持つ地理座標の点群を、ヒートマップ拡張オーバーレイ内で一括構成します。

useEffect が postoffices.json を取得し、各座標を HeatmapPointState へ変換して React の state に保持します。

<HeatmapOverlay> 内の <HeatmapPoints> が点群をまとめて構成し、拡張がどのプロバイダーでも密度マップを描画します。