React-Leafletで2本指のあれをしてみた

2020/05/10

Web サイトに埋め込まれている Google Map 上で普通にスワイプすると、

「地図を移動させるには指 2 本で操作します」

って表示されますよね。これCooperative Gesture Handlingという機能なんだそうですが、これを React-Leaflet でもやってみました。

React-Leaflet とは

Leafletはオープンソースの地図ライブラリです。この Leaflet を React で扱いやすいようにコンポーネント化したものがReact-Leafletで、プラグインもいろいろ揃っています。

この React-Leaflet ですが公式から引用すれば、

It does not replace Leaflet, only leverages ⚛️ React's lifecycle methods to call the relevant Leaflet handlers.

とあるように、その実体は Leaflet そのもののようです。

Leaflet.GestureHandling

ところで Leaflet には、ありがたいことに Gesture Handling を実現するプラグインLeaflet.GestureHandlingが既に作成されています。

React-Leaflet からでもこのプラグインが利用できるはずです。

やってみる

環境

インストールは例えば、

yarn add leaflet leaflet-gesture-handling react react-dom react-leaflet

でいけます。今回は、

leaflet 1.6.0
leaflet-gesture-handling   1.1.8
react 16.13.1
react-dom 16.13.1
react-leaflet 2.6.3

で行いました。

コンポーネント

import Leaflet from "leaflet";
import React from "react";
import { Map, TileLayer, Marker, Popup } from "react-leaflet";
import { GestureHandling } from "leaflet-gesture-handling";
import "leaflet/dist/leaflet.css";
import "leaflet-gesture-handling/dist/leaflet-gesture-handling.css";

export default function Map(props) {
  const position = [38.31, 138.52];
  Leaflet.Map.addInitHook("addHandler", "gestureHandling", GestureHandling);
  return (
    <Map center={position} zoom={9} gestureHandling={true}>
      <TileLayer
        attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
        url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
      />
      <Marker position={position}>
        <Popup>佐渡</Popup>
      </Marker>
    </Map>
  );
}

Leaflet.Mapを React コンポーネントに置き換えたものが<Map />であることに注意すれば、特別なことは何もしていません。

結果

いけた!!!!

さいごに

Leaflet.GestureHandling 更新止まってる ❔❔

参考

logo

たまおさ

釣りとか登山とか好きです。(@tamaki_osamu)