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

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

## やったこと
![googlemap_vs_osm.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/158070/4b73c7d4-d7a5-a697-b927-45de12f4551a.png)

### 必要なソフトウェア
* QGIS  
地図データを編集するために利用します。  
[QGISダウンロード](https://www.qgis.org/ja/site/forusers/download.html)
* 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')
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/158070/9205d522-bf8a-b29b-2c6f-2dfe6be3c9f7.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/158070/ed397c4a-7e97-156d-9cb3-abfcf4420f78.png)


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

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/158070/4f84c054-acb1-509f-f11a-78c4523ef3d9.png)


#### 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を再起動して終了です。