mapboxのマーカーは、その名の通り「ピン」ではなく「マーカー」である。
ある座標にマーカーを立てた場合、マーカー画像の中心が目的の座標となる。
![ピンを立てたい座標](https://halfpower.work/wp-content/uploads/2020/07/1.jpg)
![ピンの先端を目的の座標にしたい](https://halfpower.work/wp-content/uploads/2020/07/2.jpg)
![ピンの先端がずれる](https://halfpower.work/wp-content/uploads/2020/07/3.jpg)
![マーカーの中心位置が目的の座標になるから](https://halfpower.work/wp-content/uploads/2020/07/4.jpg)
縮小すればするほどピンの先端がズレる
![縮小すればするほどピンの先端がズレる](https://halfpower.work/wp-content/uploads/2020/07/5.jpg)
解決方法は、マーカー画像のheight / 2 ピクセル分、上にずらして表示すれば良い
![マーカー画像のheight / 2 ピクセル分、上にずらして表示すれば良い](https://halfpower.work/wp-content/uploads/2020/07/6.jpg)
例えば、width:75px, height:100pxのマーカー画像の場合
var el = document.createElement('div');
el.className = 'marker';
el.style.width = '75px';
el.style.height = '100px';
el.style.top = '-50px'; ⇐これ
el.style.backgroundImage =
'url({{ url('/img/marker.png') }})';
とすることで、ピンの先端がちょうど目的の座標を指すようになる。
但し、このマーカーにホバー(mouseenter, mouseleave)でポップアップを表示している場合は
マーカーに被ってポップアップが表示されてしまい、マウスがポップアップに乗ると
マーカーのmouseleaveイベントが発生しておかしな動きになるので
ポップアップの表示位置もCSSでずらす必要がある。
mapbox ポップアップにCSSを摘要する方法