Winter on Mars
Today's #30DayMapChallenge is to map "something non-Earth". As the holiday season is fast approaching, I therefore decided to create a little Christmas message from Mars? This latest interactive map lets you explore the Martian surface while enjoying a snowfall animation - all from the comfort of your browser.
Exploring Mars in Leaflet
The map is built using Leaflet, the lightweight, open-source JavaScript mapping library. We’re using a high-resolution shaded relief basemap of Mars provided by OpenPlanetary. The tiles are served through a standard TMS endpoint.
All my other #30DayMapChallenge maps have been created using MapLibre GL, but for this Mars map I chose Leaflet - mainly because MapLibre GL JS only supports EPSG:3857 (Web Mercator). The high-resolution shaded relief tiles from OpenPlanetary are provided in EPSG:4326, and MapLibre struggles to display raster tiles in projections other than Web Mercator without distortion. Leaflet, on the other hand, allows maps in EPSG:4326, making it possible to display the Mars tiles accurately.
Snow on the Red Planet
To give Mars a wintery feel, we added falling snow using a custom Leaflet plugin. The snowflakes are rendered in three layers, each with different speeds, sizes, and sideways drift, giving the illusion of depth and movement.
L.snow({
color: "rgba(255,255,255,0.9)",
layers: [
{ density: 60, speed: 0.6, size: 1.5, drift: 0.2 },
{ density: 40, speed: 1.2, size: 2.2, drift: 0.5 },
{ density: 20, speed: 2.0, size: 3.5, drift: 1.0 }
]
}).addTo(map);
This layering technique gives the snowfall a sense of parallax, making it feel more realistic, even on a 2D map.
Comments