「ガラスディスク」効果：Studioでの関心のあるポイントの実験

私は、地図上の場所を、その下の対象領域を完全に覆い隠すことなく、グロー効果とシンボルを使用して強調表示する新しい方法を作成したかったので、「ガラスディスク」効果を作成しました。ネタバレ注意—これで光ります！

ポイントオブインタレスト（POI）は、地図製作において重要です。ポイントオブインタレストを他のものと区別して目立たせるにはどうすればよいでしょうか？あるいは、地図上であなたのビジネスや組織を強調するには？あるいは、この例のように、ニュージーランドのラキウラ島でどのような種が見られるかを示すには？

この「ガラスディスク」効果は、Studioで円とアイコンを使用する3つの簡単なステップで実現できます。(注：Studioを初めて使用する場合は、Studioでポイントを作成したり、独自のカスタムアイコンをロードしたりするのは簡単です。まずチュートリアルのパート1とパート2をご覧ください）。

まず、地図上に黒い円としてスタイル設定された3つの関心のあるポイントがあります。

次に、下のスクリーンショットのように円をスタイル設定します。半径55ピクセル、薄い青色、不透明度レベル0.1にしました。「ガラスディスク」効果を作成するために、円にわずかに濃い青色のストローク色、1.5ピクセルのストローク幅、0.37のストローク不透明度も与えます。

出来上がり！

次のヒントは、これらの円を地図の平面に合わせることです。これはボタンをクリックするだけです！

これにより、「ガラスの円盤」がより平坦に見え、地図のピッチに合わせて配置され、地図の上に浮かんでいるような錯覚を与えます。地図のピッチが変化すると、その効果は増幅されます。

次に、グローを追加します！

ここで、上記で使用したレイヤーを複製し、レイヤー階層で元のレイヤーの下に配置します。これは、グローを「ガラスディスク」の下に配置するため、重要な部分です。これを行うには、レイヤーパネルで元のレイヤーの下にドラッグするだけです。

光る効果は、次のようにスタイルを設定することで実現されます。円の半径を100ピクセルにし、非常に明るい、ほとんどネオンカラー（この状況では明るい緑色を使用しました）にし、ぼかしを1、不透明度を0.5にします。

そして今、それらは光ります！

アイコンの追加

上記のように、組み込みアイコンを使用したり、独自のカスタムアイコンをロードしたりするのは Mapbox Studio で簡単です。その方法については、このチュートリアルのパート 1とパート 2をご覧ください。

ここでは、上記で使用したレイヤーを再度複製し、レイヤー階層内の他の2つのレイヤーの上に配置します。今回は、アイコンを「ガラスディスク」の上に配置します。これを行うには、レイヤーパネルで元のレイヤーの上にドラッグするだけです。

今回は、以下の例のように、データポイントをシンボルタイプとしてスタイル設定します。

ここでは、お好みのアイコンを選択できます。この例では、鳥のシンボルを使用します。これらは、ズーム範囲全体、データ条件によるスタイル、またはデータ範囲全体でスタイルを設定できることに注意してください。データ条件によるスタイル設定を行うと、この場合、さまざまな種類のPOI（Point of Interest）に異なるシンボルを使用するオプションが提供されます。

このパネルでは、必要に応じてアイコンのサイズを変更したり、不透明度を設定したりすることもできます。

これで完了です！

ブログの冒頭の例では、いくつかの曲線テキストSVGも使用しています。これらは、アイコンの場合とまったく同じ方法で作成、アップロード、適用できます。または、Mapbox Studioで従来の方法でテキストラベルを使用することもできます。

興味のある場所のシンボルを試して楽しんで、何を作成し、ユースケースにどのように適用するかをお知らせください。