位置記録サービス向けmapBoxリンク集

canvas APIを用いてアニメーション生成. 位置はgeolocateで指定できる.

map.addSource('dot-point', {
  'type': 'geojson',
  'data': {
    'type': 'FeatureCollection',
    'features': [
      {
        'type': 'Feature',
        'geometry': {
          'type': 'Point',
          'coordinates': [0, 0] // icon position [lng, lat]
        }
      }
    ]
  }
});

2021/08/30 追記
アニメーションgif（複数枚の画像を所持したファイル）は上記リンクの方法では対応できないらしい。gif単体は表示できるので、一枚ずつ読み込んで更新。
この方法で対処を検討中。

KanataYAMAGISHI

位置情報から住所取得(座標→住所, 逆変換も可)

Data type	Description
country	Generally recognized countries or, in some cases like Hong Kong, an area of quasi-national administrative status that has been given a designated country code under ISO 3166-1.
region	Top-level sub-national administrative features, such as states in the United States or provinces in Canada or China.
postcode	Postal codes used in country-specific national addressing systems.
district	Features that are smaller than top-level administrative features but typically larger than cities, in countries that use such an additional layer in postal addressing (for example, prefectures in China).
place	Typically these are cities, villages, municipalities, etc. They’re usually features used in postal addressing, and are suitable for display in ambient end-user applications where current-location context is needed (for example, in weather displays).
locality	Official sub-city features present in countries where such an additional administrative layer is used in postal addressing, or where such features are commonly referred to in local parlance. Examples include city districts in Brazil and Chile and arrondissements in France.
neighborhood	Colloquial sub-city features often referred to in local parlance. Unlike locality features, these typically lack official status and may lack universally agreed-upon boundaries.
address	Individual residential or business addresses.
poi	Points of interest. These include restaurants, stores, concert venues, parks, museums, etc.

KanataYAMAGISHI

マップ上で点を動かす.

仕組みとしては特別なメソッドが用意されているわけではなく, window.requestAnimationFrame()関数を用いてブラウザが再描画されるたびにレイヤー上に表示する座標データを更新している.

window.requestAnimationFrame() メソッドは、ブラウザに描画させたいアニメーションを指定し、次の再描画の前に、アニメーションを更新する指定した関数を呼び出すように要求します。このメソッドは再描画する前に呼び出されるコールバックメソッドを引数にひとつとります。
引用元：MDN

map.on('load', () => {
// Add a source and layer displaying a point which will be animated in a circle.
map.addSource('point', {
'type': 'geojson',
'data': pointOnCircle(0)
});
 
map.addLayer({
'id': 'point',
'source': 'point',
'type': 'circle',
'paint': {
'circle-radius': 10,
'circle-color': '#007cbf'
}
});
 
function animateMarker(timestamp) {
// Update the data to a new position based on the animation timestamp. The
// divisor in the expression `timestamp / 1000` controls the animation speed.
map.getSource('point').setData(pointOnCircle(timestamp / 1000));
 
// Request the next frame of the animation.
requestAnimationFrame(animateMarker);
}
 
// Start the animation.
animateMarker(0);
});

KanataYAMAGISHI

マウスの位置からマップ上の緯度、経度を取得する