【React】OpenStreetMapのベクトルタイルを表示する

はじめに

deck.gl×React×TypeScript 環境構築の続きです。
react-map-gl を使ってOpenStreetMapのベクトルタイルを表示してみます。

react-map-glとは

react-map-glは、Mapbox GL JS対応ライブラリのためのReactコンポーネント群です。
Mapbox GL JSのオープンソースフォーク版のMapLibre GL JSにも対応しています。

手順

インストール

react-map-gl と、maplibre-gl をインストールします。

npm install --save react-map-gl maplibre-gl

地図表示

Using with a mapbox-gl Fork を参考に実装します。

App.tsx

import Map from 'react-map-gl';
import maplibregl from 'maplibre-gl';
import 'maplibre-gl/dist/maplibre-gl.css';
import './style.css';

const App = () => {
    return (
        <div className="App">
            <Map
                initialViewState={{
                    longitude: 139.68786,
                    latitude: 35.68355,
                    zoom: 16,
                }}
                mapLib={maplibregl}
                style={{ width: '100vw', height: '100vh' }}
                mapStyle="https://tile.openstreetmap.jp/styles/osm-bright-ja/style.json"
            />
        </div>
    );
};

export default App;

initialViewStateで地図の初期表示を設定します。
styleで地図の大きさを設定できます。単位が指定できないのが残念... 'で囲むことで指定できました。
mapStyleでOpenStreetMapのベクトルタイルのスタイルを指定しています。

style.css

html,
body {
    margin: 0px;
    padding: 0px;
}
.App {
    width: 100%;
    height: 100%;
}

動作確認

OpenStreetMapのベクトルタイルを表示できました！
自由に地図を移動したり、ズームイン・ズームアウトも可能です。

参考文献