この記事は Mapbox Advent Calendar 2022 の記事です。
中の人も何名か参戦されるようなので、良い方法があればあわよくばアドバイスしてもらえないかというセコい思いで書かせていただきました(笑)
mapbox上に多数のマーカーをセットする場合など、マーカー群をレイヤーとして追加する方法もありますが、
今回は少数のマーカーをリアルタイムに移動させたり画像を差し替えたりしたかったので、今回はカスタムマーカーを追加する方法を選択しました。
一度セットしたマーカーの位置を変更するには.setLngLat()で場所を変えてあげればよいのですが、
セットしたマーカーの画像を変更する方法が見当たらず、試行錯誤の上、次のようになりました。
マーカー作成の際、divエレメントを保存しておく
const el = document.createElement('div');
el.className = _classname;
var marker = new mapboxgl.Marker(el);
marker._el = el;
エレメントのクラス名を直接書き換える
g_marker._el.className = 'cMarke'+g_iconType;
もっと良い方法を知っている方がおりましたら教えてください。
実行結果
ソースコード
同じ階層にimgフォルダがあり、icon0.png,icon1.pngが入っていることを前提としています。
<!DOCTYPE html>
<html>
<head>
<title>Marker test</title>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
<link href="https://api.mapbox.com/mapbox-gl-js/v2.6.1/mapbox-gl.css" rel="stylesheet">
<script src="https://api.mapbox.com/mapbox-gl-js/v2.6.1/mapbox-gl.js"></script>
<style>
body { margin: 0; padding: 0; }
#map { position: absolute; top: 0; bottom: 0; width: 100%; }
.cMarke0, .cMarke1{
background-image: url('./img/icon0.png');
background-size: cover; width: 64px; height: 64px; border-radius: 0%; cursor: pointer;
}
.cMarke1 { background-image: url('./img/icon1.png'); }
</style>
</head>
<body>
<div id="map"></div>
<script>
var g_reqAnimId = 0;
var g_previousMillis=0;
var g_marker = null;
var g_iconType = 0;
mapboxgl.accessToken = 'YOUR_ACCESS_TOKEN';
const map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/light-v10',
center: [139.75,35.67],
zoom: 12
});
map.on('load', () => {
g_marker = addMarker(map, map.getCenter(),'cMarke0');
g_reqAnimId = window.requestAnimationFrame(_update);
});
_update = function(_nowMillis){
var deltaMillis=(_nowMillis-g_previousMillis);
if(deltaMillis>=1000){
g_iconType=((g_iconType==0)?1:0);
g_marker._el.className = 'cMarke'+g_iconType;
g_previousMillis = _nowMillis;
}
g_reqAnimId = window.requestAnimationFrame(_update);
}
addMarker = function(_map, _homeLngLat, _classname){
const el = document.createElement('div');
el.className = _classname;
var marker = new mapboxgl.Marker(el);
marker._el = el;
marker.setLngLat(_homeLngLat).addTo(_map);
return marker;
}
</script>
</body>
</html>