はじめに
Mapbox Newsletter WEEKLY TIPSでは2週にわたり「ドラッグ可能なポイントを作成」「ドラッグ可能マーカーを作成」というドラッグで移動可能なPin（この記事では一つのポイントを指すアイコン等をPinと呼ぶことにします）の実装方法に関する非常に似たサンプルが紹介されていました。
こちらの記事にも書いた通り、レイヤーとMarkerはその実装方法が異なります。ではいつレイヤーを使用し、いつマーカーを使ったらいいのかという点について解説します。
Markerクラスの長所・短所
MarkerクラスはPinに任意のHTMLエレメントを使用することができるため、高い表現力を持つという長所があります。一方で、Pinの数だけHTMLエレメントが作成され、さらに地図をパン（スクロール）する際にはすべてのPinに対して座標変換および移動処理をCPUで行う必要があります。レイヤーでPinを描画する場合にはWebGLで並列処理が行えることを考えると、Markerクラスはパフォーマンスが良くないという欠点があります。
実験
それではどのぐらいパフォーマンスに差があるか実験してみましょう。ここでは東京周辺の領域にランダムにPointデータを配置したGeoJSONを準備し、そのデータを元にサークルレイヤーおよびMarkerクラスでPinを作成します。
サークルレイヤー
Markerクラス
地図をパンしてみるとMarkerクラスでは少しカクカクしています。開発者ツールの「Performance」で見てみると以下の通りMarkerの更新処理でCPUが消費されていることがわかります。
まとめ
使い分け方法についてざっくりまとめると以下のようなフローチャートになります。
Popupは吹き出しのようなUIで、「Pinをクリックした際に詳細情報を表示する」といった用途で使用できます。Markerと連携して動作するように作られており、相性は良いです。
Discussion