Googleマップに変わる地図サービスを立ち上げてみた

はじめに

地図サービスで有名なものとしてGoogleマップがありますが、他にも様々なサービスがあります。
その中でも自由度が高いOpenStreetMapのデータを使いGoogleマップ風にしてみましたので、その方法について解説します。

やったこと

必要なソフトウェア

• QGIS
  地図データを編集するために利用します。
  QGISダウンロード
• tippecanoe
  複数の地図データを結合させるために利用します。

必要なデータ

地図のもととなるデータをダウンロードします。

1. OpenMapTilesから地図のベクターデータをダウンロード
   https://openmaptiles.com/downloads/tileset/osm/asia/japan/

2. OSMデータダウンロード
   以下のURLでSub Regionの.shp.zipデータを8ファイルダウンロード
   https://download.geofabrik.de/asia/japan.html
   
   ※路線名がOpenMapTilesに入っていないため。

マップデータ作成

OpenMapTilesデータから作成する方法

asia_japan.mbtilesをベースに地図データを作成します。

1. OSMデータから路線情報取得

ダウンロードしたファイルはzipのままQGISで読み込みます。

「gis.osm_railways_free_1.shp」を選択してレイヤーに追加し、「Filter」メニューを選択して以下の式を入力します。

"fclass" IN ('light_rail','monorail','rail','subway','tram')

2. Geojson形式で保存

レイヤーを選択し、「エクスポート」「地物の保存」でGeoJSON形式で保存します。

ファイル名：workspace/geojson/railway/xxx.geojson（任意のパス）
CRS:EPSG:4326 - WGS 84
保存されたファイルを地図に追加する：OFF

※8ファイル分実施します。

3. geojson（路線データ）をmbtilesに変換

./geojson/railway配下に路線データのみを保存している前提で以下のコマンドを実行すると、
路線データがrailsway.mbtilesにまとめられます。

今回はDockerでtippecanoeを実行します。

docker pull klokantech/tippecanoe
docker run -it --rm -v $PWD:/data klokantech/tippecanoe /bin/bash -c "tippecanoe --force --minimum-zoom=10 -L railway:<(cat /data/json/*.geojson) -o /data/railway.mbtiles"

※ --minimum-zoomを設定しないとタイル容量が500KBを超えて処理できなくなるため10に設定する。

4. asia_japan.mbtilesとrailway.mbtilesを結合

asia_japan.mbtilesとrailway.mbtilesを結合してjapan.mbtilesを作成します。

docker run -it --rm -v $PWD:/data klokantech/tippecanoe /bin/bash -c "tile-join --force -o /data/japan.mbtiles /data/asia_japan.mbtiles /data/railway.mbtiles"

マップサーバー起動

1. 日本語フォント生成

ttfからpbfに変換する。
https://github.com/openmaptiles/fonts

利用するフォント
http://mix-mplus-ipa.osdn.jp/migmix/

2. Tileserver起動

version: '2'
services:
  tileserver:
    image: klokantech/tileserver-gl:v2.3.1
    ports:
      - "80:80"
    volumes:
      - ".:/data"
    restart: always

一旦Tileserverを起動します。

docker-compose up

アクセスすると地図が表示されますが、まだ先程作ったデータは使われておらず、
見た目も修正されていません。
http://localhost:8080

3. ローカルのデータを使用するように変更

style_edit.jsonがTileserverのフォルダにあり、それをベースに編集します。

編集後はstyle.jsonとして保存します。

「"source": "openmaptiles"」→「"source": "mapbox"」
「"Noto Sans Regular"」→「"migmix1m-regular"」
以下の行を置換

"sources": {
  "openmaptiles": {
    "type": "vector",
    "url": "https://free.tilehosting.com/data/v3.json?key={key}"
  }
},
"sprite": "https://rawgit.com/lukasmartinelli/osm-liberty/gh-pages/sprites/osm-liberty",
"glyphs": "https://free.tilehosting.com/fonts/{fontstack}/{range}.pbf?key={key}",

　変換後　↓

"sources": {
   "mapbox": {
       "url": "mbtiles://asia_japan.mbtiles",
       "type": "vector"
   }
},
"sprite": "osm-liberty",
"glyphs": "{fontstack}/{range}.pbf",

4. 見た目をGoogle風に

style.jsonを以下のサイトで編集します。
https://maputnik.github.io/editor

5. Tileserverを再起動

準備ができたらTileserverを再起動して終了です。