Skip to main content

Mapbox Studio

用語と役割の整理（Tileset / Style / Layer）​

下の方は、触ってみながら書いたメモだが、コードからの使い方も見た上でのまとめはこんな感じ

info
  • Tileset は いわゆる地図のピン情報 (座標＋メモ等の GeoJSON 形式の property)
  • Style には 複数 Layer が定義でき、それぞれデータソースとして Tileset を登録
  • Style を使用する利点は、管理画面で表示設定まで行えるので、アプリからは style を読み込む以外のコードが不要となる
  • ピンの表示条件などをアプリから制御したい場合は、Tileset 単位で読み込んだほうがやりやすい

Mapbox Studio： これは何？​

出来ること​

  • 管理画面で登録したマップ（Style）または Geojson 相当データ（Tileset）をアプリ側で読み込めるようにしたもの

それによって、何が嬉しいか​

  • 管理者側でマップのピンを更新できる
  • アプリ側で以下のような明示的な実装をすることなくユーザの画面に反映できる
    • 更新版マップの fetch
    • ピンの描画

次の段階で利点と感じられそうなこと​

表示についての詳細もカスタマイズ出来る​

  • ズームレベル（拡大率）に応じたピンの大きさや、表示/非表示の切り替えができる
    • これは自分にとっては大きな利点
      • Google Map ではズームアウトしたときにピンで日本地図が埋もれてしまっていた
      • これを回避できる

パフォーマンス観点​

  • ピンのアノテーションをコードで実装するより速いかも
    • 実装によるとは思うが
    • いずれにしても、MapKit での実装と比べると異常な軽さ

このような運用にしてみようと思う​

  • ピンの登録
    • MyMap 操作は手動 (もともと)
  • データ取り込み
    • 2 は、無くても良いが、レイヤを1つにまとめる、コメントのパース/整形/整合性チェック等をする
    • 1 〜 3 のデータ操作は スクリプト化してもよさそう
  • アプリ
    • MapBoxStudio の Style 設定とアプリについては、1回設定してしまえばメンテなし

画面上のメニュー​

管理画面のURL​

管理画面内のメニュー​

#メニュー出来ること
1Tools > Style Editorマップに読み込む「スタイル」の定義
2Tools > Data Manager > TilesetsGeojson, KML などのインポート
3Tools > Data Manager > Datasetsまだ使ってないので不明
  • 2: DataManager で登録した Tilesets を
  • 1: Style にレイヤとして読み込んで表示する

→ あとから分かったが、Tilesets 単位でもアプリから読めるので、そのほうがアプリ側でカスタマイズしやすいように思う

管理画面側で試したこと​

所感​

  • なんとなく触っていると出来ることが無限にあってキリがないように思われたが
  • こうやってまとめていると、設定すべき箇所と制限はシンプル

1. TileSets 登録： ピン情報(Geojson, 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(枠線の色を選択)たとえば 白
RadiusStyle across zoom range固定値で良いなら選ぶ必要なし。戻す場合は [Clear value]
Radius > Rate of changeLinearstep 間の補完方法。いったんデフォルトの Linear のまま
Radius > Data Field > Step 16 z : 1 pxズームレベル 6 のとき 半径 1 px。つまりズームアウトすると小さく
Radius > Data Field > Step 222 z : 15 pxズームレベル 22 のとき 半径 15 px
Stroke WidthStyle across zoom range固定値で良いなら選ぶ必要なし。戻す場合は [Clear value]
Stroke Width > Rate of changeLinearstep 間の補完方法。いったんデフォルトの Linear のまま
Stroke Width > Data Field > Step 111 z : 0 pxズームレベル 11 のとき 幅 0 px (つまり ズームアウトすると非表示)
Stroke Width > Data Field > Step 222 z : 3 pxズームレベル 22 のとき 幅 3 px

3. 線情報の設定 (鉄道路線データの描画)​

4. 文字情報の設定 (公園名の表示)​

続きで確認したいこと​

  • アイコン設定
    • 素材についてチュートリアルに CC ライセンスのアイコン集が載っていたような
  • 写真あり/なし、などの色分けをコードから変更が可能か
    • それとも、それもレイヤ分けて properties の設定値で
  • ピン選択時に吹き出しを出すといったことは、さすがに実装必要？
Last updated on