Help us understand the problem. What is going on with this article?

Mapbox GL JSでマーカーを色分けする方法の巻

More than 3 years have passed since last update.

結論から言いますとフィルタが使えます…!

image

という感じになります。

例によって、実際に動くデモは http://tottori.2574.jp で公開しています。またソースコードも https://github.com/mh61503891/2574 に公開しています:laughing:

ここから詳細です。

Mapbox GL JSでは無くて、Mapbox JSを使う場合はLeafletがJeoJSON内のpropertiesにあるmarker-colorを見てマーカーに色を自動的につけてくれる(Load GeoJSON | Mapbox)のですが、Mapbox GL JSの場合はそうはいかないみたいで、Mapbox GL JSのExamplesにもそれっぽいやり方が無かったので、どうしようかなと思っていたのですが、フィルタを使えばできるみたいです。

基本的には、GeoJSONSourceで大元のデータソースのインスタンスを作って、作ったデータソースを参照するレイヤにフィルタを付けてデータを拾い出したやつに色をつけると良いようです。複数の色に分けたい場合は複数のレイヤを作るみたいです。他に良い方法あるのかな…。

ソースコードの要所をピックアップします。

例えばdata.geojsonのようなGeoJSONのデータの場合、filter: ['==', '事故内容', '軽傷事故']とすれば、GeoJSONのfeatures.propertiesの中の事故内容軽傷事故のデータだけ選んで表示してくれます。他にも比較演算子がいろいろ使えるようです。詳しくはMapbox / Style Reference / Types / Filterを参照してください。

(※今回からCoffeeSriptに書き換えました:coffee:

map = new mapboxgl.Map {
  container: 'map'
  style: 'mapbox://styles/mapbox/streets-v8'
  center: [133.842941, 35.375086] # 鳥取県の中心らへん
  zoom: 8
}

# データソースのインスタンス
source = new mapboxgl.GeoJSONSource {data: 'data.geojson'}

map.on 'style.load', ->
  # ここからバッチ処理
  map.batch (batch) ->
    map.addSource('markers', source)
    map.addLayer {
      source: 'markers'
      id: 'markers-a'
      type: 'circle'
      paint: {
        'circle-radius': 8
        'circle-color': '#DBC300'
      }
      filter: ['==', '事故内容', '軽傷事故']
    }
    map.addLayer {
      source: 'markers'
      id: 'markers-b'
      type: 'circle'
      paint: {
        'circle-radius': 8
        'circle-color': '#FF9807'
      }
      filter: ['==', '事故内容', '重傷事故']
    }
    map.addLayer {
      source: 'markers'
      id: 'markers-c'
      type: 'circle'
      paint: {
        'circle-radius': 8
        'circle-color': '#FD3E00'
      }
      filter: ['==', '事故内容', '死亡事故']
    }

それで、このフィルタが使えるっぽいことが分かったきっかけは、Mapbox Studioを使ってみて、設計からしてそうなってそうだという推察ですね。雰囲気大事です。

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away