動的なシンボルのスタイリング：アイコンの状態を構成する新しい方法

Mapboxの地図に動的なアイコンを簡単に追加できるようになりました。Mapbox SDKの新しい「アイコンの外観」スタイル定義により、プラットフォーム固有のコードや無数のグラフィックファイルを操作することなく、アイコンの色、サイズ、回転、または位置を整合性のある直感的な方法で変更できます。開発者は、Web、iOS、またはAndroidのいずれを構築する場合でも、カスタムシンボルの外観と変更方法をマップスタイルで直接定義できるようになりました。可用性ステータスやズームレベルに基づいてスケーリングされたシンボルなど、動的なデータ駆動型ビジュアルを管理する場合、外観により、マップアイコンのパフォーマンスが向上し、プラットフォーム間で一貫性が保たれ、構築が容易になります。

動的なアイコンを非常にシンプルに

「アイコンの外観」は、Mapboxマップ上のシンボルの定義された視覚状態です。外観構成を使用すると、シンボルは複数の視覚状態を持つことができます。たとえば、電気自動車の充電ステーションのアイコンは、利用可能であることを示すために、デフォルトの外観として緑色のデザインを使用する場合があります。同じアイコンは、使用中であることを示すためにオレンジ色に変わり、現在利用できないことを示すために赤色に変わる可能性があります。 

以前は、各アイコンシンボルは単一の静的な外観に制限されていました。開発者がリアルタイムのシンボルの変更を視覚的に反映させたい場合は、プラットフォーム固有のコードを記述し、設計バリアントごとに個別のシンボル定義を管理する必要がありました。 

開発者は、スタイルで単一のベクターアイコンとデフォルトの外観（色、サイズなど）を定義し、他の外観オプションの定義と変更をトリガーするものを定義できるようになりました。変更は、スタイルで直接一度構成するか、ランタイムAPIで追加および更新できます。開発者は、カスタムレンダリングロジックを作成したり、クライアント側でアイコンを手動で交換したりする必要がなくなり、アイコンはWebとモバイルで一貫して動作します。

アイコンの外観の構成は、ベクターアイコンの基盤となるサポートによって有効になります。以前は、Mapbox StudioとWebおよびMobile SDKsは、すべてのアイコンファイルをラスタライズしていたため、アイコンのカスタマイズを拡大することが困難でした。デザイナーは、外部のグラフィックエディタを使用して、異なる色または構成で各アイコンの複数のバリアントを作成する必要がありました。アイコンファイルは、プラットフォーム間でスタイルで手動でアップロードおよび管理する必要がありました。カスタムベクターアイコンを追加する方法の例はこちらをご覧ください。ベクターアイコンのサポートにより、開発者が管理する必要のあるアイコンファイルの数を減らし、開発時間とリソースを節約できます。 

応答、回転、サイズ変更が可能なアイコンを使用して、適切な情報を配信 

アイコンの外観の最初のリリースには、いくつかの主要なシンボルレイアウトプロパティのサポートが含まれています。アイコンイメージデザインの変更、アイコンサイズの変更、アイコンの回転、アイコンの位置の調整です。これらのパラメータにより、さまざまなシナリオでシンボルがどのように見えるかを正確に制御できます。

たとえば、アプリケーションは外観を使用して、ズームレベル全体でのPOIの視覚的な階層を管理できます。開発者は、最初にロードするときにシンボルのサイズと詳細を定義して、すぐに確認することが重要な特定のPOI（Point of Interest）またはPOIカテゴリを強調表示できます。ユーザーがズームインすると、最小化されたPOIがより大きく、より詳細に表示されます。これは、クラスタリングせずに大量のPOIを表示し、適切なレベルのPOIの詳細と密度を維持しながら、マップを非常に読みやすく使いやすくする方法です。 

アイコンの外観は、特定の変数の変化やステータスの更新を表示することもできます。たとえば、風の速度と方向の変化や、現在開店している店舗を視覚的に表示するなどです。

アイコンの外観は、よりインタラクティブで理解しやすい地図デザインも実現します。たとえば、開発者は、アイコンにマウスオーバーまたはクリックすると、画像、サイズ、または向きが変化するスタイルを作成できます。 

アイコンの外観設定の始め方

アイコンの外観は、すべてのお客様がパブリックプレビューで利用できるようになりました。外観は、任意のMapboxスタイルでアイコンに対して構成できます。アイコンの外観のドキュメントページ、およびweb、iOS、Androidで、外観の構成を開始する方法を確認してください。