簡単4ステップ!Mapbox Studioでグロー(発光)エフェクトを適用する | マップデザインの基礎
見出し画像

簡単4ステップ!Mapbox Studioでグロー(発光)エフェクトを適用する | マップデザインの基礎

「グロー(発光)エフェクト」とは、John M. Nelson氏が開発したカートグラフィー(地図製作)の手法のひとつで、マッピングしたデータを発光しているかのように表現するテクニックです。データをより効果的に表現できるグローエフェクトですが、Mapbox Studioではこのテクニックを簡単に適用することができます。本記事では、マップ上に可視化するデータにグローエフェクトを適用するためのMapbox Studioを使った方法やコツを紹介していきます。

画像1


画像7

▲ アメリカ南海岸に生息するカッショクペリカンの飛行経路を可視化したマップにグローエフェクトを適用したもの

画像8

▲ 主要な海底通信ケーブルを可視化したマップにグローエフェクトを適用したもの。データの値に応じてスタイルを調整することでより効果的なグローエフェクトに。


Mapbox Studioを使ったグローエフェクトの適用方法

このテクニックの背後にある原理はとてもシンプルなものですが、適切な文脈で適用することで、とても効果的な表現方法となります。今回の例では、3つのCircle(円)レイヤーを使用し、スタイルのプロパティであるRadius(半径)、Blur(ぼかし)、Color(色)、Opacity(不透明度)をそれぞれ調整して重ねることでグローエフェクトを表現しています。以下、Mapbox Studioでの手順です。

ステップ1
Mapbox Studioの新規レイヤーに適当なデータをアップロードし、データタイプをCircle(円)に設定します。以下の画像は、オーストラリアの南東部に白い円をマッピングしたものです。

画像2

ステップ2
ステップ1で作成したレイヤーを「Glowy things 1」と名付けました。このレイヤーのスタイルでは、Radiusを10px、Colorを鮮やかなネオングリーン、Blurを3、Opacityを0.4とします。

画像3

ステップ3
次に、このレイヤーを複製して「Glowy things 2」と名付けます。今度は、Radiusを5pxに、Colorをより明るいネオングリーンに、Blurを3に、Opacityを0.4に変更します。

画像4

ステップ4
このステップがこのテクニックのポイントです。再度レイヤーを複製し、名前を「Glowy things 3」とします。このレイヤーではRadiusを1、Colorを白、Blurを0、Opacityを1にします。これにより、円の中心点がとても明るく、鮮やかな白になりました。

画像5

好みに応じて、さらにレイヤーを重ねてRadiusを変えたり、Blurを大きくしたり、Opacityを下げたりして、輝きを強調することも可能です。実際に試した上で、より光り輝いて見えるように調整してみてください。

画像6


Line(線)レイヤーのスタイルにも適用可能

このテクニックは、データタイプがLine(線)であっても適用可能です。同じく複数のレイヤーを、WidthやOpacityを調整した上で重ねます。このとき、レイヤー階層の一番上に細くて白い線を持ってくることを忘れずに!


・・・


本記事で紹介したテクニックを使って作成したマップを、ぜひSNSで#BuiltWithMapboxと一緒にシェアしてみてください!


【関連記事】

お問い合わせは下記までご連絡ください
https://www.mapbox.jp/contact

Twitterでは毎日情報を発信しています!ぜひフォローしてください!

嬉しい!ありがとうございます!
Mapbox Japanの公式noteです。地図づくりをスマートにする地図開発プラットフォームを提供しています。主にサービスの最新情報や導入事例などを発信します。 お問い合わせはこちら:https://www.mapbox.jp/contact