ドキュメント / セットアップ / React / Leaflet

Leaflet セットアップ

Web で Leaflet を MapConductor から使う手順です。キーは不要で、ラスタータイルを軽く表示したいときに向きます。

PACKAGE

react-for-leaflet

API KEY

不要

CSS

必要

3D CAMERA

擬似

デモを見る店舗マップ · React ↗

前提

Node.js 18 以上

React 18 または 19

STEP 01

インストールする

leaflet はパッケージに同梱されています。

terminalnpm

npm install @mapconductor/js-sdk-core @mapconductor/js-sdk-react \
            @mapconductor/react-for-leaflet

STEP 02

スタイルシートを読み込む

アプリのエントリーポイントで一度だけ読み込みます。忘れると地図の位置やコントロールの見た目が崩れます。

main.tsxTypeScript

import '@mapconductor/react-for-leaflet/style.css';

STEP 03

タイルの出どころを決める

既定の LeafletDesign.OpenStreetMap は OpenStreetMap の公開タイルを使い、帰属表示も一緒に持ちます。

注意

OpenStreetMap の公開タイルサーバーには利用ポリシーがあります。本番トラフィックを流す場合は、自前のタイル配信か商用サービスを使ってください。

動作確認

ここまで動けば完了

地図が出れば完了です。

LeafletMap.tsxTypeScript · React

import { useState } from 'react';
import { createGeoPoint, createMapCameraPosition, createMarkerState } from '@mapconductor/js-sdk-core';
import { Marker } from '@mapconductor/js-sdk-react';
import { LeafletDesign, LeafletMapView, useLeafletMapViewState } from '@mapconductor/react-for-leaflet';
import '@mapconductor/react-for-leaflet/style.css';

const TOKYO = createGeoPoint({ latitude: 35.6812, longitude: 139.7671 });

export function LeafletMap() {
  const state = useLeafletMapViewState({
    mapDesignType: LeafletDesign.OpenStreetMap,
    cameraPosition: createMapCameraPosition({ position: TOKYO, zoom: 12 }),
  });
  const [markerState] = useState(() => createMarkerState({ id: 'tokyo', position: TOKYO }));

  return (
    <LeafletMapView state={state} style={{ height: 480 }}>
      <Marker state={markerState} />
    </LeafletMapView>
  );
}

地図デザイン

LeafletDesign はタイル URL テンプレートを包んだ定数です。自前のタイルを使う場合は同じ型を組み立てます。

LeafletDesign

Notes

OpenStreetMap

OSM の標準タイル。帰属表示付き、最大ズーム 19

None

ベースタイルなし。オーバーレイだけ描きたいとき

うまくいかないとき

傾きや回転が効かない

Leaflet にはネイティブの 3D カメラがありません。MapConductor は tilt と bearing を CSS の 3D 変換で近似しています。見た目だけの効果で、本物の 3D カメラではありません。

地図の位置が崩れる

style.css を読み込んでいるか確認します。

開発時だけ地図が二重に初期化される

React StrictMode は effect を 2 回実行します。各プロバイダはこれを検知して片方を破棄するようになっているので、StrictMode を外す必要はありません。

次に

3D 表示が必要なら MapLibre や Cesium を、投影法を厳密に扱いたいなら OpenLayers を検討してください。