I want to use a camera to follow a moving marker, and the marker should behave as if it is in a fixed position on the screen. However, it always shakes slightly, like this:
Here is a reproduction of my work.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Display buildings in 3D</title>
<meta property="og:description" content="Use extrusions to display buildings' height in 3D." />
<meta charset='utf-8'>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel='stylesheet' href='https://unpkg.com/maplibre-gl@latest/dist/maplibre-gl.css' />
<script src='https://unpkg.com/maplibre-gl@latest/dist/maplibre-gl.js'></script>
<style>
body {
margin: 0;
padding: 0;
}
html,
body,
#map {
height: 100%;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
const MAPTILER_KEY = 'get_your_own_OpIi9ZULNHzrESv6T2vL';
const map = new maplibregl.Map({
style: `https://api.maptiler.com/maps/basic-v2/style.json?key=${MAPTILER_KEY}`,
center: [-77.035915, 38.889814],
zoom: 12,
pitch: 45,
bearing: -23.2,
container: 'map',
antialias: true
});
let i = 0
let step = 0
map.showTileBoundaries = true
// The 'building' layer in the streets vector source contains building-height
// data from OpenStreetMap.
map.on('load', () => {
// Insert the layer beneath any symbol layer.
const layers = map.getStyle().layers;
let labelLayerId;
for (let i = 0; i < layers.length; i++) {
if (layers[i].type === 'symbol' && layers[i].layout['text-field']) {
labelLayerId = layers[i].id;
break;
}
}
map.addSource('openmaptiles', {
url: `https://api.maptiler.com/tiles/v3/tiles.json?key=${MAPTILER_KEY}`,
type: 'vector',
});
const marker = new maplibregl.Marker()
.setLngLat([-77.035915, 38.889814])
.addTo(map);
const move = () => {
marker.setLngLat([-77.035915, 38.889814 + step * 0.001])
map.jumpTo({ center: [-77.035915, 38.889814 + step * 0.001] })
step++;
requestAnimationFrame(move)
}
move()
});
</script>
</body>
</html>
I want to use a camera to follow a moving marker, and the marker should behave as if it is in a fixed position on the screen. However, it always shakes slightly, like this:
2024-07-26.111958.mp4
Here is a reproduction of my work.