Mapbox GL JS で グローエフェクトを実現

グローエフェクト描いてみた

Mapbox ブログで紹介されている、グローエフェクト。
とても表現がかっこいいので、ブログにあるMapboxスタジオでの実現方法を真似して、Mapbox GL JSで描いてみた。

グローエフェクトとは

「グロー(発光)エフェクト」とは、John M. Nelson氏が開発したカートグラフィー(地図製作)の手法のひとつで、マッピングしたデータを発光しているかのように表現するテクニックです。 （# Mapboxブログより引用）

ぼかした円をいくつか重ねた上で、中央に白いポイントを置いてあげることで（これがポイント）、光り輝くような表現を実現します（しているようです）。

結果

かっこいい。

コード（グローエフェクト部分）

コード全文はこちら

// データは手抜きで、turf.jsによる、randomPoint
const points = turf.randomPoint(10000, {bbox: [138.5, 35.6, 140.5, 37]}) 

// データを addSource
map.addSource('points', {type: 'geojson', data: points})

// 大きめの円をぼかして描画
map.addLayer({
  id: 'Glowy things 1',
  source: 'points',
  type: 'circle',
  paint: {
    'circle-color': '#6ff77c',
    'circle-radius': 10,
    'circle-blur': 3,
    'circle-opacity': 0.4
  }
})

// 少し小さめの円をより鮮やかな色で描画
map.addLayer({
  id: 'Glowy things 2',
  source: 'points',
  type: 'circle',
  paint: {
    'circle-color': '#00ff37',
    'circle-radius': 5,
    'circle-blur': 3,
    'circle-opacity': 0.4
  }
})

// 最後に、真っ白な円を1pxで描画 （ここがポイント）
map.addLayer({
  id: 'Glowy things 3',
  source: 'points',
  type: 'circle',
  paint: {
    'circle-color': '#ffffff',
    'circle-radius': 1,
    'circle-blur': 0,
    'circle-opacity': 1
  }
})

参考