Mapbox Studio
Mapbox Studio： これは何？
出来ること
- 管理画面で登録したマップ（スタイル）をアプリ側で読み込める
それによって、何が嬉しいか
- 管理者側でマップのピンを更新できる
- アプリ側で以下のような明示的な実装をすることなくユーザの画面に反映できる
- 更新版マップの fetch
- ピンの描画
次の段階で利点と感じられそうなこと
表示についての詳細もカスタマイズ出来る
- ズームレベル（拡大率）に応じたピンの大きさや、表示/非表示の切り替えができる
- これは自分にとっては大きな利点
- Google Map ではズームアウトしたときにピンで日本地図が埋もれてしまっていた
- これを回避できる
- これは自分にとっては大きな利点
パフォーマンス観点
- ピンのアノテーションをコードで実装するより速いかも
- 実装によるとは思うが
- いずれにしても、MapKit での実装と比べると異常な軽さ
このような運用にしてみようと思う
- ピンの登録
- MyMap 操作は手動 (もともと)
- データ取り込み
- 2 は、無くても良いが、レイヤを1つにまとめる、コメントのパース/整形/整合性チェック等をする
- 1 〜 3 のデータ操作は スクリプト化してもよさそう
- アプリ
- MapBoxStudio の Style 設定とアプリについては、1回設定してしまえばメンテなし
画面上のメニュー
管理画面のURL
管理画面内のメニュー
| # | メニュー | 出来ること |
|---|---|---|
| 1 | Tools > Style Editor | マップに読み込む「スタイル」の定義 |
| 2 | Tools > Data Manager > Tilesets | Geojson, KML などのインポート |
| 3 | Tools > Data Manager > Datasets | まだ使ってないので不明 |
- 2: DataManager で登録した Tilesets を
- 1: Style にレイヤとして読み込んで表示する
管理画面側で試したこと
所感
- なんとなく触っていると出来ることが無限にあってキリがないように思われたが
- こうやってまとめていると、設定すべき箇所と制限はシンプル
1. TileSets 登録： ピン情報(Geojson, KML) をロード
- Geojson 例
- 国交省から得られる 鉄道路線データ ( N02-20_RailroadSection ) を読み込む
- https://nlftp.mlit.go.jp/ksj/gml/datalist/KsjTmplt-N02-2020.html
- KML 例
- Google マイマップからダウンロードした KML ファイルを読み込む。例では 公園の座標情報とする
2. レイヤ追加： TileSets 選択
メニューからのたどり方
- Layers の下の
+ボタンで出てくる - 後から選択する場合は、該当のレイヤを選んだあと、右上の [Select Data] タブ選択
データソース＋表示モード設定
| 項目 | 操作 | メモ |
|---|---|---|
| Source | 上の方の手順で あらかじめ登録した TileSets を選択 | KML ならレイヤ 1 個分が選択可 |
| Type | ピンの種類を選択 (circle, symbol, line) |
Type の選択肢
| 選択肢 | 特徴 | カスタマイズポイント |
|---|---|---|
| Type > Line | 鉄道の路線図情報はこれ | 色、太さ etc |
| Type > Circle | ピンを円で表示したいときはこれ | 色、太さ、枠線 etc |
| Type > Symbol | ピンの文字情報とアイコンを出したい場合はこれ | どの項目を表示するか、フォント etc |
- → たとえば 文字情報と円を両方出したい場合は、レイヤ 2 つに分ける必要がありそう
- Symbol と アイコンで済む場合はそれで良い
4. 点情報の設定 (公園の位置の描画)
前提
- Type=circle のレイヤを作成済であること
- 該当のレイヤを選んだあと、右上の [Style] タブ選択
ここでやりたいこと
- Google Map などのピンはよく見ると、円の外枠が白く縁取られている。これを真似たい
- 影もつけたいが、それは不可のように見える
- 地図をズームアウトすると、ピン同士が重なるし、裏の地図が隠れてしまう。これを避けたい
設定箇所
| 項目 | 設定値 | 補足 |
|---|---|---|
| Color | (塗りつぶし色を選択) | たとえば magenta |
| Stroke Color | (枠線の色を選択) | たとえば 白 |
| Radius | Style across zoom range | 固定値で良いなら選ぶ必要なし。戻す場合は [Clear value] |
| Radius > Rate of change | Linear | step 間の補完方法。いったんデフォルトの Linear のまま |
| Radius > Data Field > Step 1 | 6 z : 1 px | ズームレベル 6 のとき 半径 1 px。つまりズームアウトすると小さく |
| Radius > Data Field > Step 2 | 22 z : 15 px | ズームレベル 22 のとき 半径 15 px |
| Stroke Width | Style across zoom range | 固定値で良いなら選ぶ必要なし。戻す場合は [Clear value] |
| Stroke Width > Rate of change | Linear | step 間の補完方法。いったんデフォルトの Linear のまま |
| Stroke Width > Data Field > Step 1 | 11 z : 0 px | ズームレベル 11 のとき 幅 0 px (つまり ズームアウトすると非表示) |
| Stroke Width > Data Field > Step 2 | 22 z : 3 px | ズームレベル 22 のとき 幅 3 px |
3. 線情報の設定 (鉄道路線データの描画)
4. 文字情報の設定 (公園名の表示)
続きで確認したいこと
- アイコン設定
- 素材についてチュートリアルに CC ライセンスのアイコン集が載っていたような
- 写真あり/なし、などの色分けをコードから変更が可能か
- それとも、それもレイヤ分けて properties の設定値で
- ピン選択時に吹き出しを出すといったことは、さすがに実装必要？