その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();
コメントをどうぞ！