LeafletでOpenStreetMapのラスタ地図タイルを表示する

bannyaaa.hatenablog.jp

前回の「OpenStreetMapのタイルサーバをDockerで構築する」では、タイルサーバにアクセスして地図画像が1点取得できるところまで確認した。

地図画像を配信するサーバ側の仕組みはできたので、次は地図画像を並べてズームやスクロールして見るためのクライアント側の仕組みをつくる。 地図画像を並べて地図タイルとして表示するためのJavaScriptライブラリには、Leaflet, OpenLayers, MapLibre GL JSなどがあり、今回はLeafletを使う。

環境

  • Windows 10 Home: 20H2
  • Docker Desktop: 4.0.0
  • Docker Engine: 20.10.8
  • Google Chrome: 93.0.4577.82 (64 bit)

準備

ローカルPCで地図タイルを提供するための、Dockerのタイルサーバコンテナを立ち上げておく1

> docker run -p 80:80 -v openstreetmap-data:/var/lib/postgresql/12/main -d overv/openstreetmap-tile-server run

地図タイルの配信元のURLは、overv/openstreetmap-tile-serverコンテナイメージのGithubページにかかれている。 Githubにかかれた手順では8080ポートを公開しているが、今回のコンテナ実行時には80ポートを公開しているため、地図タイルのURLはhttp://localhost/tile/{z}/{x}/{y}.pngとなる。

ローカルPC上にHTMLファイルで地図タイルを表示する

地図タイルを表示する1つ目のアプローチとして、Switch2OSMのUsing a Docker containerページ内のViewing tilesに書かれた手順を試す。

こちらのGithubにおかれたsample_leaflet.htmlをローカルPC (Windows 10)に保存する。

> wget https://raw.githubusercontent.com/SomeoneElseOSM/mod_tile/switch2osm/extra/sample_leaflet.html
 -O sample_leaflet.html

次にsample_leaflet.htmlを編集する。 以下のように、地図タイル配信元のURLのhottileに、(これは必須ではないが)今回データを登録した日本の関東地方をズームレベル10で初期表示するようにする。

var map = L.map('map').setView([35.68, 139.69], 10);

L.tileLayer('http://127.0.0.1/tile/{z}/{x}/{y}.png', {
    attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);

sample_leaflet.htmlをブラウザで開き地図タイルが表示されれば成功2

© OpenStreetMap contributors

Dockerコンテナ内のHTMLファイルで地図タイルを表示する

地図タイルを表示するための別のアプローチとして、overv/openstreetmap-tile-serverコンテナイメージのGithubのREADME.mdにのっている手順を試す。

手順では、Dockerのタイルサーバコンテナを実行後に、http://localhost:8080にアクセスすればよいと書かれている。 タイルサーバコンテナの準備のところにも書いたが、今回はポートの割り当てオプション-p 80:80としているため、アクセス先はhttp://localhost:80 (http://localhost)となる。

ブラウザでhttp://localhost:80を開き、地図タイルが表示されることを確認する。

© OpenStreetMap contributors

このアプローチでは、コンテナ内の/var/www/htmlにおかれたindex.htmlにブラウザはアクセスしている。 index.htmlでLeafletから地図タイル配信のURLを参照することにより、ブラウザで地図タイルが表示されている。

コンテナの中に入ってindex.htmlの中身を確認する場合は、以下を実行すればよい。

> docker ps  # タイルサーバコンテナの名前を確認
> docker exec -it <コンテナ名> /bin/bash
# cat /var/www/html/index.html

  1. タイルサーバコンテナの中では、Apache, PostgreSQL, 地図タイルを作成するrenderdといったプロセスが動く。

  2. 初めて表示する地域・ズームレベルは、地図画像の生成に時間がかかる。