Markers With Custom Icons
カスタムアイコンを使用するマーカ
In this tutorial, you’ll learn how to easily define your own icons for use by the markers you put on the map.
このチュートリアルでは、マップに置くマーカを使うために自分のアイコンを簡単に定義する方法を学びます。
Preparing the images
画像の準備
To make a custom icon, we usually need two images — the actual icon image and the image of its shadow. For this tutorial, we took the Leaflet logo and created four images out of it — 3 leaf images of different colors and one shadow image for the three:
カスタムアイコンを作成するために、通常、２個の画像 - 実像のアイコン画像とその影画像 - が必要です。このチュートリアルのために、Leaflet ロゴを持ってきて、それから４個の画像 - 違う色の３個の葉と３個のための影の画像 - を作成しました：
Note that the white area in the images is actually transparent.
画像の余白は実際には透明であるということが重要です。
Creating an icon
アイコンの作成
Marker icons in Leaflet are defined by L.Icon objects, which are passed as an option when creating markers. Let’s create a green leaf icon:
Leaflet では、マーカアイコンは L.Icon オブジェクトによって定義されていて、マーカを作成したときにオプションとして渡されます。緑色の葉のアイコンを作成しましょう：
Now putting a marker with this icon on a map is easy:
これで、マップ上にこのアイコンでマーカを配置することは簡単です：
Defining an icon class
アイコン（icon）クラスの定義
What if we need to create several icons that have lots in common? Let’s define our own icon class containing the shared options, inheriting from L.Icon! It’s really easy in Leaflet:
もし、たくさんの共通に持ついくつかのアイコンを作成する必要があるとしたら？L.Icon から継承される、共有オプションを含む自作アイコンクラスを定義しましょう。Leaflet では本当に簡単です：
Now we can create all three of our leaf icons from this class and use them:
これで、このクラスから３個の自作の leaf アイコン全てを作成し使用できます：
You may have noticed that we used the new keyword for creating LeafIcon instances. So why do all Leaflet classes get created without it? The answer is simple: the real Leaflet classes are named with a capital letter (e.g. L.Icon), and they also need to be created with new, but there are also shortcuts with lowercase names (L.icon), created for convenience like this:
LeafIcon インスタンスを作成するために、new キーワードを使用したということに注意します。全ての Leaflet クラスがそれなしに作成されるのはなぜでしょうか。答えは簡単です：実際の Leaflet クラスは、大文字（例えば L.Icon）で名付けます、そして、new を使用して作成される必要もあり、小文字の名前（L.icon）のショートカットもありますが、便宜上このように作成されます：
You can do the same with your classes too. OK, lets finally put some markers with these icons on the map:
自身のクラスで同じことができもできます。最後に、マップ上にこれらのアイコンでマーカを配置しましょう：
That’s it. Now take a look at the full example, the L.Icon docs, or browse other examples.
これで完成です。それでは、完全な例、または、L.Icon ドキュメント、他の例の閲覧をみてみましょう。
カスタムアイコンを使用するマーカ
In this tutorial, you’ll learn how to easily define your own icons for use by the markers you put on the map.
このチュートリアルでは、マップに置くマーカを使うために自分のアイコンを簡単に定義する方法を学びます。
Preparing the images
画像の準備
To make a custom icon, we usually need two images — the actual icon image and the image of its shadow. For this tutorial, we took the Leaflet logo and created four images out of it — 3 leaf images of different colors and one shadow image for the three:
カスタムアイコンを作成するために、通常、２個の画像 - 実像のアイコン画像とその影画像 - が必要です。このチュートリアルのために、Leaflet ロゴを持ってきて、それから４個の画像 - 違う色の３個の葉と３個のための影の画像 - を作成しました：
Note that the white area in the images is actually transparent.
画像の余白は実際には透明であるということが重要です。
Creating an icon
アイコンの作成
Marker icons in Leaflet are defined by L.Icon objects, which are passed as an option when creating markers. Let’s create a green leaf icon:
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
// iconAnchor 基準にしたポップアップを開く点
});
Now putting a marker with this icon on a map is easy:
これで、マップ上にこのアイコンでマーカを配置することは簡単です：
L.marker([51.5, -0.09], {icon: greenIcon}).addTo(map);
Defining an icon class
アイコン（icon）クラスの定義
What if we need to create several icons that have lots in common? Let’s define our own icon class containing the shared options, inheriting from L.Icon! It’s really easy in Leaflet:
もし、たくさんの共通に持ついくつかのアイコンを作成する必要があるとしたら？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]
}
});
Now we can create all three of our leaf icons from this class and use them:
これで、このクラスから３個の自作の leaf アイコン全てを作成し使用できます：
var greenIcon = new LeafIcon({iconUrl: 'leaf-green.png'}),
redIcon = new LeafIcon({iconUrl: 'leaf-red.png'}),
orangeIcon = new LeafIcon({iconUrl: 'leaf-orange.png'});
You may have noticed that we used the new keyword for creating LeafIcon instances. So why do all Leaflet classes get created without it? The answer is simple: the real Leaflet classes are named with a capital letter (e.g. L.Icon), and they also need to be created with new, but there are also shortcuts with lowercase names (L.icon), created for convenience like this:
LeafIcon インスタンスを作成するために、new キーワードを使用したということに注意します。全ての Leaflet クラスがそれなしに作成されるのはなぜでしょうか。答えは簡単です：実際の Leaflet クラスは、大文字（例えば L.Icon）で名付けます、そして、new を使用して作成される必要もあり、小文字の名前（L.icon）のショートカットもありますが、便宜上このように作成されます：
L.icon = function (options) {
return new L.Icon(options);
};
You can do the same with your classes too. OK, lets finally put some markers with these icons on the map:
自身のクラスで同じことができもできます。最後に、マップ上にこれらのアイコンでマーカを配置しましょう：
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.");
That’s it. Now take a look at the full example, the L.Icon docs, or browse other examples.
これで完成です。それでは、完全な例、または、L.Icon ドキュメント、他の例の閲覧をみてみましょう。
全コード
<!DOCTYPE html> <html> <head> <meta charset="UTF-8">
<link rel="stylesheet" href="./leaflet13/leaflet.css" /> <script src="./leaflet13/leaflet.js"></script> <title>Markers With Custom Icons</title>
</head> <body> <div id="map" style="width: 600px; height: 400px;"></div> <script>
// Setting up the map
var map = L.map('map').setView([51.505, -0.09], 13);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: 'Map data © <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);
// Creating an 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);
*/
// Defining an icon class
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]
}
});
var greenIcon = new LeafIcon({iconUrl: 'leaf-green.png'}),
redIcon = new LeafIcon({iconUrl: 'leaf-red.png'}),
orangeIcon = new LeafIcon({iconUrl: 'leaf-orange.png'});
L.icon = function (options) {
return new L.Icon(options);
};
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.");
</script> </body> </html>
0 件のコメント:
コメントを投稿