Browse Source

Add animated 3D building heights (breathing effect)

- Buildings slowly grow and shrink using sine wave animation
- Speed: 0.001 (slow breathing), Range: ±30% height variation
- Uses requestAnimationFrame for smooth 60fps animation
- toggleBuildingAnimation() function to enable/disable
- Enabled by default

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
master
HikeMap User 4 weeks ago
parent
commit
5d6b378e1e
  1. 50
      index.html

50
index.html

@ -5257,6 +5257,56 @@
map.on('rotate', updateFogOfWar); map.on('rotate', updateFogOfWar);
map.on('pitch', updateFogOfWar); map.on('pitch', updateFogOfWar);
// =====================
// ANIMATED BUILDINGS
// =====================
let buildingAnimationEnabled = true; // Set to false to disable
let buildingAnimationId = null;
const buildingAnimationSpeed = 0.001; // How fast buildings breathe
const buildingAnimationRange = 0.3; // How much they grow/shrink (0.3 = ±30%)
function animateBuildings(timestamp) {
if (!buildingAnimationEnabled) return;
// Calculate height multiplier using sine wave (oscillates between 0.7 and 1.3)
const multiplier = 1 + Math.sin(timestamp * buildingAnimationSpeed) * buildingAnimationRange;
// Update building height if layer exists
if (map.getLayer('buildings-3d')) {
map.setPaintProperty('buildings-3d', 'fill-extrusion-height', [
'*',
['get', 'render_height'],
multiplier
]);
}
buildingAnimationId = requestAnimationFrame(animateBuildings);
}
// Start the animation
if (buildingAnimationEnabled) {
buildingAnimationId = requestAnimationFrame(animateBuildings);
}
// Function to toggle building animation
function toggleBuildingAnimation() {
buildingAnimationEnabled = !buildingAnimationEnabled;
if (buildingAnimationEnabled) {
buildingAnimationId = requestAnimationFrame(animateBuildings);
console.log('Building animation enabled');
} else {
if (buildingAnimationId) {
cancelAnimationFrame(buildingAnimationId);
buildingAnimationId = null;
}
// Reset to normal height
if (map.getLayer('buildings-3d')) {
map.setPaintProperty('buildings-3d', 'fill-extrusion-height', ['get', 'render_height']);
}
console.log('Building animation disabled');
}
}
// NOTE: initFogOfWar() is called lazily from updateFogOfWar() to avoid // NOTE: initFogOfWar() is called lazily from updateFogOfWar() to avoid
// temporal dead zone issues with navMode variable // temporal dead zone issues with navMode variable

Loading…
Cancel
Save