leaflet 2023/06/07

React Leaflet ズーム zoom する方法とカスタマイズ

React Leaflet は、React.js フレームワークと Leaflet ライブラリを組み合わせた地図コンポーネントの作成を容易にするためのライブラリです。この記事では、ズームするための設定と、ズームコントロールをカスタマイズする方法を確認します。

パッケージのインストールとフォルダ構成

アプリを作成します。

npx create-react-app

パッケージをインストールします、leaflet と react-leaflet を使用します。

npm install leaflet react-leaflet

ファイル構成

|-- public//
|    `-- zoomUp.svg
|-- src //
    |-- index.js
    |-- index.css
    |-- App.css
    `-- App.js

React Leaflet マップ表示とレイヤーコントロール

2023年06月06日

leaflet

ズーム設定

import {
  MapContainer,
  TileLayer
} from "react-leaflet";
import "leaflet/dist/leaflet.css";
import L from "leaflet";
import "./App.css";

const center = [35.3628, 138.7307];
function App() {
  return (
    <MapContainer
      center={center}
      zoom={10}
      zoomControl={true}
      boxZoom={true}
      doubleClickZoom={false}
      scrollWheelZoom={true}
      keyboad={false}
      id="map"
    >
      <TileLayer
        attribution='© <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
        url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
      />
    </MapContainer>
  );
}

export default App;

12 ~ 21: 様々なズームに関するオプションが存在します。Document

zoom={undefined}	ズームの初期値
zoomControl={true}	左上のズームコントロールを表示
boxZoom={true}	Shift キーを押しながらマウスをドラッグして指定した長方形の領域に地図をズームできるかどうか。
doubleClickZoom={true}	地図をダブルクリックするとズームインでき、Shift キーを押しながらダブルクリックするとズームアウトできるかどうか。
scrollWheelZoom={true}	マウスホイールを使用して地図をズームできるかどうか。「center」を渡すと、マウスがどこにあったかに関係なく、ビューの中心にズームします。
zoomSnap={1}	マウスホイールを使用した、マップのズームレベル。 1 より小さい値を使用すると、より細かい精度でズームします。
zoomDelta={1}	キーボードの + または – を押すか、ズームコントロールを使用した、マップのズームレベル。 1 より小さい値を使用すると、より細かい精度でズームします。
minZoom={*}	地図の最小ズームレベル。
maxZoom={*}	地図の最大ズームレベル。
touchZoom={*}	2 本の指でタッチドラッグして地図を拡大できるかどうか。

他にも zoomAnimation や zoomstart イベントなどあります。

ズームコントロールの表示位置と見た目を変更

ズームコントロールの位置を変更する方法と、見た目をカスタマイズする方法。

import {
  MapContainer,
  TileLayer,
  ZoomControl,
} from "react-leaflet";
import "leaflet/dist/leaflet.css";
import L from "leaflet";
import "./App.css";

const center = [35.3628, 138.7307];
function App() {
  return (
    <MapContainer center={center} zoom={10} zoomControl={false} id="map">
      <TileLayer
        attribution='© <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
        url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
      />
      <ZoomControl
        position="topright"
        zoomInText="<img src='/zoomUp.svg' class='zoomImg' />"
        zoomOutText="🔻"
        zoomInTitle="拡大"
        zoomOutTitle="縮小"
      />
    </MapContainer>
  );
}

export default App;

4: ZoomControl をインポート

13: 初期の zoomControl を false で非表示

18 ~ 24: ZoomControl を追加します。

zoomInText	ズームインボタンのテキストを変更。例では、svg アイコンを使用し、zoomImg クラスを追加しています。
zoomOutText	ズームアウトボタンのテキストを変更。
zoomInTitle	ズームインのツールチップの値の変更
zoomOutTitle	ズームアウトのツールチップの値を変更。

position に指定できる値

topleft	左上
topright	右上
bottomleft	左下
bottomright	右下

ズームコントロールの見た目を変更する場合は以下のクラスを使用します。

.zoomImg {
    width: 80%;
    height: 80%;
}

.leaflet-control-zoom.leaflet-bar.leaflet-control {
    border: none;
}

.leaflet-touch .leaflet-bar a {
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgb(211, 242, 254);
    border-color: transparent;
}

以上です。