@ -4421,8 +4421,8 @@
id: 'buildings-3d', type: 'fill-extrusion', source: 'openmaptiles', 'source-layer': 'building', minzoom: 13,
paint: {
'fill-extrusion-color': colors.buildings,
'fill-extrusion-height': ['get', 'render_height'],
'fill-extrusion-base': ['get', 'render_min_height'],
'fill-extrusion-height': ['*', 2, [' get', 'render_height'] ],
'fill-extrusion-base': ['*', 2, [' get', 'render_min_height'] ],
'fill-extrusion-opacity': 0.85
}
} : {
@ -5334,62 +5334,6 @@
map.on('rotate', updateFogOfWar);
map.on('pitch', updateFogOfWar);
// =====================
// ANIMATED BUILDINGS
// =====================
let buildingAnimationEnabled = true; // Set to false to disable
let buildingAnimationId = null;
const buildingAnimationSpeed = 0.003; // How fast buildings breathe
function animateBuildings(timestamp) {
if (!buildingAnimationEnabled) return;
// Two multipliers 180° out of phase: when one grows, the other shrinks
// Range: 100% to 150%
const sinVal = Math.sin(timestamp * buildingAnimationSpeed);
const multiplierA = 1 + (sinVal + 1) * 0.25; // 1.0 → 1.5
const multiplierB = 1 + (-sinVal + 1) * 0.25; // 1.5 → 1.0 (inverted)
// Alternate based on floor of height being even/odd
if (map.getLayer('buildings-3d')) {
map.setPaintProperty('buildings-3d', 'fill-extrusion-height', [
'*',
['get', 'render_height'],
['case',
['==', ['%', ['floor', ['get', 'render_height']], 2], 0],
multiplierA,
multiplierB
]
]);
}
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
// temporal dead zone issues with navMode variable