オリジナル画像のマーカーを立てる【Leaflet導入記その3】

Leafletのオプションまとめ【Leaflet導入記その2】

地図閲覧プログラム「Leaflet」には、地図を表示するためのさまざまなオプションが用意されています。旅馬に地図を貼るときにで使いそうなオプションをまとめました。

waq3-travelog.com

2020.01.31

その3からの続きです。

Leafletで読み込んだ国土地理院の地図に、オリジナルの画像を指定したマーカーを立てます。

Leafletのデフォルトのマーカーは、これ　　ですね。

マーカーとして使う画像ファイルを用意します

まず、マーカーをデザインしましょう。

今回、旅馬の公式マスコット「照晴」くんに、マーカーになっていただきました。

エクセルで図形を組み合わせてデザインし、フォトショップで仕上げています。

地図のHTMLはこちら。

<div id="waq3map-wrapper">
<div id="mapid1" class="waq3map"></div>
<p class="waq3map-caption">
ポートタワーを中心に表示しています。
</p>
<script>
var waq3map = L.map('mapid1',{
	center:[34.682622,135.186738],
	zoom:13,
	dragging:true,
	touchZoom:true,
	scrollWheelZoom:true,
	doubleClickZoom:true,
	boxZoom:true,
	tap:true,
	keyboard:true,
	zoomControl:true,
	closePopupOnClick: false,
	});
L.tileLayer('https://cyberjapandata.gsi.go.jp/xyz/pale/{z}/{x}/{y}.png', {
	minZoom:5,
	maxZoom:18,
	attribution: '<a href="https://maps.gsi.go.jp/development/ichiran.html" target="_blank">地理院タイル</a>'
	}).addTo(waq3map);
waq3map.zoomControl.setPosition('bottomright');
var greenIcon= L.icon({
	iconUrl:'/wp-content/uploads/ico/telharu-Icon-green-75.png',
	iconSize:[75,75],
	iconAnchor:[37,75],
	popupAnchor:[0,-70]
	});
var waq3marker0=L.marker([34.682622,135.186738],{icon:greenIcon})
	.bindPopup('<strong>ポートタワーの位置にマーカーを立てました！</strong>',{autoClose:true});
waq3map.addLayer(waq3marker0);
L.control.scale().addTo(waq3map);
waq3map.panTo(new L.LatLng(34.682622,135.186738));
</script>
</div>

マーカーを定義する

まず、マーカーを定義します。変数「greenIcon」を宣言し、「L.icon」オブジェクトに対して設定したものを変数に放り込みます。

var greenIcon= L.icon({
	iconUrl:'/wp-content/uploads/ico/telharu-Icon-green-75.png',
	iconSize:[75,75],
	iconAnchor:[37,75],
	popupAnchor:[0,-70]
	});

iconUrl

画像ファイルへのアドレスを指定しています。

iconSize

画像のサイズを設定します。[横のサイズ,縦のサイズ]の順に設定し、単位はピクセルです。

iconAnchor

画像ファイルの左上を基準点とし、上下左右にどれぐらいずらすかを指定します。

[左右,上下]の順で指定し、単位はピクセルです。

左にずらすときは左右に正の値を、右にずらすときは負の値を指定します。

同様に、上にずらすときは上下に正の値を、下にずらすときは負の値を指定します。

popupAnchor

ポップアップの吹き出しの先っちょの位置を、上下左右にどれぐらいずらすかを指定します。

[左右,上下]の順で指定し、単位はピクセルです。

左にずらすときは左右に正の値を、右にずらすときは負の値を指定しますが、iconAnchorの指定とは異なり、上にずらすときは上下に負の値を、下にずらすときは正の値を指定します。

マーカーの位置を指定する

続いて、マーカーの位置を指定します。

変数「waq3marker0」を宣言し、「L.icon」オブジェクトに対して設定したものを変数に放り込みます。

var waq3marker0=L.marker([緯度を指定,経度を指定],{icon:アイコンの定義を指定})
	.bindPopup(' ポップアップ内のメッセージを指定 ',{autoClose:true});

var waq3marker0=L.marker([34.682622,135.186738],{icon:greenIcon})
	.bindPopup('<strong>ポートタワーの位置にマーカーを立てました！</strong>',{autoClose:true});

なお、和休の場合、後々マーカーをグループ化しやすいように、レイヤーにマーカーを追加しています。

レイヤーとは、フォトショップなどと同様、透明なシートと考えていただければ結構です。

地図の上に透明なシートをかぶせ、そこにマーカーを書き込んでいきます。

マーカーを書き込むコードはこちら。

waq3map.addLayer(waq3marker0);

マーカーの種類を増やしたいとき

マーカーの種類を追加するには、定義を増やしていけばOKです。

照晴くんの矢印を、赤色にしたものを作りました。

HTMLはこちら。

26行目から37行目がマーカーの定義、38行目から45行目がマーカー位置の指定です。

<div id="waq3map-wrapper">
<div id="mapid4" class="waq3map"></div>
<p class="waq3map-caption">
緑と赤のマーカーを立てました
</p>
<script>
var waq3map = L.map('mapid4',{
	center:[34.682622,135.186738],
	zoom:13,
	dragging:true,
	touchZoom:true,
	scrollWheelZoom:true,
	doubleClickZoom:true,
	boxZoom:true,
	tap:true,
	keyboard:true,
	zoomControl:true,
	closePopupOnClick: false,
	});
L.tileLayer('https://cyberjapandata.gsi.go.jp/xyz/pale/{z}/{x}/{y}.png', {
	minZoom:5,
	maxZoom:18,
	attribution: '<a href="https://maps.gsi.go.jp/development/ichiran.html" target="_blank">地理院タイル</a>'
	}).addTo(waq3map);
waq3map.zoomControl.setPosition('bottomright');
var redIcon= L.icon({
	iconUrl:'/wp-content/uploads/ico/telharu-Icon-red-75.png',
	iconSize:[75,75],
	iconAnchor:[37,75],
	popupAnchor:[0,-70]
	});
var greenIcon= L.icon({
	iconUrl:'/wp-content/uploads/ico/telharu-Icon-green-75.png',
	iconSize:[75,75],
	iconAnchor:[37,75],
	popupAnchor:[0,-70]
	});
var waq3marker0=L.marker([34.682622,135.186738],{icon:greenIcon})
	.bindPopup('<strong>ポートタワー</strong>',{autoClose:false});
waq3map.addLayer(waq3marker0);
waq3marker0.openPopup();
var waq3marker0=L.marker([34.676754,135.204352],{icon:redIcon})
	.bindPopup('<strong>ポートアイランド北公園</strong>',{autoClose:false});
waq3map.addLayer(waq3marker0);
waq3marker0.openPopup();
L.control.scale().addTo(waq3map);
waq3map.panTo(new L.LatLng(34.682622,135.186738));
</script>
</div>

ポップアップを最初から表示させるときは、こちらのコードを追加すればOKです。

同一レイヤー上にある、ポップアップが設定されているマーカーのポップアップを、すべて表示します。

レイヤーを定義した変数名.openPopup();