前回の「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のhot
をtile
に、(これは必須ではないが)今回データを登録した日本の関東地方をズームレベル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: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors' }).addTo(map);
sample_leaflet.html
をブラウザで開き地図タイルが表示されれば成功2。
Dockerコンテナ内のHTMLファイルで地図タイルを表示する
地図タイルを表示するための別のアプローチとして、overv/openstreetmap-tile-server
コンテナイメージのGithubのREADME.mdにのっている手順を試す。
手順では、Dockerのタイルサーバコンテナを実行後に、http://localhost:8080
にアクセスすればよいと書かれている。
タイルサーバコンテナの準備のところにも書いたが、今回はポートの割り当てオプション-p 80:80
としているため、アクセス先はhttp://localhost:80
(http://localhost
)となる。
ブラウザでhttp://localhost:80
を開き、地図タイルが表示されることを確認する。
このアプローチでは、コンテナ内の/var/www/html
におかれたindex.html
にブラウザはアクセスしている。
index.html
でLeafletから地図タイル配信のURLを参照することにより、ブラウザで地図タイルが表示されている。
コンテナの中に入ってindex.html
の中身を確認する場合は、以下を実行すればよい。
> docker ps # タイルサーバコンテナの名前を確認 > docker exec -it <コンテナ名> /bin/bash # cat /var/www/html/index.html
-
タイルサーバコンテナの中では、Apache, PostgreSQL, 地図タイルを作成するrenderdといったプロセスが動く。↩
-
初めて表示する地域・ズームレベルは、地図画像の生成に時間がかかる。↩