パーソナライズされたアイコンを使用したマーカー
このチュートリアルでは、マップ上に配置するマーカーに使用する独自のアイコンを簡単に定義する方法について学習します。
| この例をスタンドアロン形式で確認できます。 |
イメージの準備
カスタムアイコンを作成するには、通常、2 つの画像が必要です。アイコン画像自体と影の画像です。このチュートリアルでは、Leaflet のロゴを使用し、そこから 3 種類の色の異なる葉の画像と、それら 3 つ用の 1 つの影の画像の、合計 4 つの画像を作成しました。
画像内の白色部分は実際には透明であることに注意してください。
アイコンの作成
Leaflet のマーカーアイコンは、マーカーを作成するときにオプションとして渡される L.Icon オブジェクトによって定義されます。緑のリーフアイコンを作成してみましょう。
var greenIcon = L.icon({
iconUrl: 'leaf-green.png',
shadowUrl: 'leaf-shadow.png',
iconSize: [38, 95], // size of the icon
shadowSize: [50, 64], // size of the shadow
iconAnchor: [22, 94], // point of the icon which will correspond to marker's location
shadowAnchor: [4, 62], // the same for the shadow
popupAnchor: [-3, -76] // point from which the popup should open relative to the iconAnchor
});
これで、このアイコンを使用してマーカーをマップ上に配置するのは簡単です。
L.marker([51.5, -0.09], {icon: greenIcon}).addTo(map);
| この例をスタンドアロン形式で確認できます。 |
アイコンクラスの定義
共通点の多いアイコンを複数作成する必要がある場合はどうでしょうか？L.Icon から継承し、共有オプションを含む独自のアイコンクラスを定義しましょう！Leaflet ではとても簡単です。
var LeafIcon = L.Icon.extend({
options: {
shadowUrl: 'leaf-shadow.png',
iconSize: [38, 95],
shadowSize: [50, 64],
iconAnchor: [22, 94],
shadowAnchor: [4, 62],
popupAnchor: [-3, -76]
}
});
これで、このクラスから 3 つすべてのリーフアイコンを作成して使用できます。
var greenIcon = new LeafIcon({iconUrl: 'leaf-green.png'}),
redIcon = new LeafIcon({iconUrl: 'leaf-red.png'}),
orangeIcon = new LeafIcon({iconUrl: 'leaf-orange.png'});
LeafIcon インスタンスを作成するために new キーワードを使用したことに気付いたかもしれません。では、なぜすべての Leaflet クラスがそれなしで作成されるのでしょうか？答えは簡単です。実際の Leaflet クラスには大文字の名前が付けられ（例: L.Icon）、new を使用して作成する必要もありますが、便宜上、次のように小文字の名前（L.icon）を持つショートカットもあります。
L.icon = function (options) {
return new L.Icon(options);
};
ご自身のクラスでも同じことができます。OK、それでは最後に、これらのアイコンを使用してマーカーをマップ上に配置しましょう。
L.marker([51.5, -0.09], {icon: greenIcon}).addTo(map).bindPopup("I am a green leaf.");
L.marker([51.495, -0.083], {icon: redIcon}).addTo(map).bindPopup("I am a red leaf.");
L.marker([51.49, -0.1], {icon: orangeIcon}).addTo(map).bindPopup("I am an orange leaf.");
以上です。では、完全な例、L.Icon のドキュメントを確認するか、他の例を参照してください。