概要

ReactLeafletで画像を地図の代わりとして扱う方法について紹介します。

セットアップ

npm install react-leaflet leaflet

CRS.Simple

画像を地図として使うにはCRS.Simpleを使います。
MapContainerにcrsプロパティがあるのでここに値として渡します。

<MapContainer crs={CRS.Simple}>
</MapContainer>

次に、ImageOverlayコンポーネントで読み込む画像を指定します。

<MapContainer crs={CRS.Simple}>
  <ImageOverlay url={'uqm_map_full.png'} bounds={new LatLngBounds([[0, 0], [1000, 1000]])} />
</MapContainer>

最後に、マップの中心位置とズームレベル、スタイルを指定すれば完了です。

<MapContainer
  crs={CRS.Simple}
  center={new LatLng(0, 0)}
  zoom={0}
  style={{ height: 300 }}
>
  <ImageOverlay url={'uqm_map_full.png'} bounds={new LatLngBounds([[0, 0], [1000, 1000]])} />
</MapContainer>

サンプルコード

完全なコードは以下になります。

import React from "react";
import { CRS, LatLng, LatLngBounds } from 'leaflet'
import { MapContainer, ImageOverlay } from 'react-leaflet'
import 'leaflet/dist/leaflet.css'

export default function App() {
  return (
    <div>
      <MapContainer
        center={new LatLng(0, 0)}
        zoom={0}
        crs={CRS.Simple}
        style={{ height: 300 }}
      >
        <ImageOverlay
          url={'uqm_map_400px.png'}
          bounds={new LatLngBounds([[0, 0], [1000, 1000]])}
        />
      </MapContainer>
    </div>
  );
}