Ring of Fire
Today's #30DayMapChallenge is Fire. For this challenge I have created an interactive map with an animated ring of fire.
The map itself is just a basic MapLibre GL instance centered on Washington DC. The fire itself is a Canvas element overlaid on top of the map.
In this fire animation hundreds of small particles orbit a central point representing the map center. Each particle has properties like angle, distance, size, life, and hue, which are updated every animation frame to create a glowing, flickering effect.
The fire ring is also dynamically sized based on the map’s zoom level.
The main challenge is keeping the fire anchored to the map even when the user pans, zooms, or searches for a new location. This is done by projecting the geographic coordinates to screen coordinates using MapLibre’s projection functions. Every animation frame, the fire particles are redrawn relative to these screen coordinates, ensuring they stay in sync with the underlying map.
The map also features a search input powered by Photon, an open-source geocoder. Photon converts human-readable place names into geographic coordinates (longitude and latitude), allowing the fire to be repositioned anywhere in the world.
Comments