パイセンが出てきます。
突然ですが、
iconAnchorってなんぞやねん！
とみなさん思ったことはありますか？（ないです。）
今回は誰にも頼まれていませんが、Leafletにおける（他の地図プラットフォームでも言えるのかな？）のiconAnchorの(たぶん)世界一分かりやすい解説をしていきたいと思います。(知らんけど。)
今回のゲストは…
今回のゲストは、巷で有名な、パイセンさんに来てもらっています。
ということで、さっそくパイセンに大阪駅をこ↑こ↓と指さしていただきましょう。
<!DOCTYPE html>
<html lang="ja">
<head>
<title>iconAnchor</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY=" crossorigin="" />
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js" integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo=" crossorigin=""></script>
<style>
html, body, #map {
width: 100%;
height: 100%;
margin: 0;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
var map = L.map('map').setView([34.70248114132325, 135.49594341081539], 13);
L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);
var icon = L.icon({
iconUrl: 'icon.png',
iconSize: [100, 100],
iconAnchor: [0, 0]
});
L.marker([34.70248114132325, 135.49594341081539], {icon: icon}).addTo(map)
</script>
</body>
</html>
L.marker([34.70248114132325, 135.49594341081539])でしっかりと大阪駅の座標を入れています。
また、{icon: icon}で先輩のアイコンを指定しています。
さぁ、結果が楽しみですね。
結果はいかに…
あれ？先輩先輩、そこは大阪じゃなくて三重ですよ。
ちゃんと大阪駅の座標を指定してあげたはずなんですけど…。
理由はアイコン素材にあり。
理由はアイコン素材の問題にありました。
この○良い例のように、アイコン素材のポイント部分（今回なら指の先端）が左上（原点）に来ていれば。問題なく指せます。
ただ✕悪い例のように、アイコン素材のポイント部分が左上である原点を指していなかったら、違うところを指してしまうことになります。
じゃあどうするか。
じゃあどうしましょう。
○良い例のように、左右反転させたアイコン画像を使いますか？
え？でもそんなの
プライドが許しません
よね？
先輩を語る上ではそんな左右反転など甘ったるいことを言っていてはいけませんよね？
何を言っているんだこいつは
ちょっと話が脱線したのでもとに戻しましょう。
左右反転させた画像を使ってもいいのですが、それはちょっと、というときもありますよね。（特に今回）
そんなときは、こっち側が画像をどうのこうのするんじゃなくて、
お前、原点がこっちこいや
という話になりませんか？
そうですよね。原点が移動してくればいいだけの話です。
原点を移動させてしまおう
さて、どうやって原点を移動させるかなのですが、
ここでiconAnchorを使います。
iconAnchorで原点を移動させてしまうことで対処します。
さて、さっきこのアイコンの横幅を100pxと設定しましたね。
iconSize: [100, 100],
さて、横幅が100pxなので原点を100pxずらさないといけません。
今回は、xに100、yに0動かすので、iconAnchorは次のようになります。
iconAnchor: [100, 0]
ではそれをiconSizeなどの後ろに付け加えて、もう一度読み込んでみましょう。
<!DOCTYPE html>
<html lang="ja">
<head>
<title>iconAnchor</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY=" crossorigin="" />
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js" integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo=" crossorigin=""></script>
<style>
html, body, #map {
width: 100%;
height: 100%;
margin: 0;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
var map = L.map('map').setView([34.70248114132325, 135.49594341081539], 13);
L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);
var icon = L.icon({
iconUrl: 'icon2.png',
iconSize: [100, 100],
iconAnchor: [100, 0]
});
L.marker([34.70248114132325, 135.49594341081539], {icon: icon}).addTo(map)
</script>
</body>
</html>
改修した結果は…
せんぱ～～～～～～～い！！！
ナイスです！やっと大阪駅を指してくれましたね。
最後に
みなさん、iconAnchorを分かってくれましたか？
まあこれでも分からなかったら、深夜テンションでこれを作ってしまった私が悪いですので、他のところへどうぞ。