Sky & Fog¶

This notebook demonstrates how to add atmospheric sky and fog effects to MapLibre maps.

MapLibre v5 unifies sky and fog into a single map.setSky() API. These effects work best with 3D terrain enabled.

In [ ]:

# %pip install anymap-ts

# %pip install anymap-ts

Basic Sky with 3D Terrain¶

In [ ]:

from anymap_ts import Map

m = Map(
    center=[-122.4, 37.8],
    zoom=12,
    pitch=60,
    bearing=-17,
    style="https://tiles.openfreemap.org/styles/liberty",
)
m.add_3d_terrain(exaggeration=1.5)
m.set_sky()
m

from anymap_ts import Map m = Map( center=[-122.4, 37.8], zoom=12, pitch=60, bearing=-17, style="https://tiles.openfreemap.org/styles/liberty", ) m.add_3d_terrain(exaggeration=1.5) m.set_sky() m

Custom Sky Colors¶

In [ ]:

m2 = Map(
    center=[6.8652, 45.8326],
    zoom=12,
    pitch=70,
    bearing=30,
    style="https://tiles.openfreemap.org/styles/liberty",
)
m2.add_3d_terrain(exaggeration=1.5)
m2.set_sky(
    sky_color="#1E90FF",
    horizon_color="#FFD700",
    fog_color="#FFFACD",
    sky_horizon_blend=0.4,
    horizon_fog_blend=0.6,
    fog_ground_blend=0.8,
    atmosphere_blend=0.9,
)
m2

m2 = Map( center=[6.8652, 45.8326], zoom=12, pitch=70, bearing=30, style="https://tiles.openfreemap.org/styles/liberty", ) m2.add_3d_terrain(exaggeration=1.5) m2.set_sky( sky_color="#1E90FF", horizon_color="#FFD700", fog_color="#FFFACD", sky_horizon_blend=0.4, horizon_fog_blend=0.6, fog_ground_blend=0.8, atmosphere_blend=0.9, ) m2

Sunset Effect¶

In [ ]:

m3 = Map(
    center=[-112.1129, 36.1069],
    zoom=13,
    pitch=65,
    bearing=-45,
    style="https://tiles.openfreemap.org/styles/liberty",
)
m3.add_3d_terrain(exaggeration=1.5)
m3.set_sky(
    sky_color="#FF6347",
    horizon_color="#FF8C00",
    fog_color="#FFD700",
    sky_horizon_blend=0.3,
    horizon_fog_blend=0.5,
    fog_ground_blend=0.4,
    atmosphere_blend=0.85,
)
m3

m3 = Map( center=[-112.1129, 36.1069], zoom=13, pitch=65, bearing=-45, style="https://tiles.openfreemap.org/styles/liberty", ) m3.add_3d_terrain(exaggeration=1.5) m3.set_sky( sky_color="#FF6347", horizon_color="#FF8C00", fog_color="#FFD700", sky_horizon_blend=0.3, horizon_fog_blend=0.5, fog_ground_blend=0.4, atmosphere_blend=0.85, ) m3

Globe Atmosphere Effect¶

Set atmosphere_blend close to 1.0 for a globe-like atmosphere halo.

In [ ]:

m4 = Map(
    center=[0, 20],
    zoom=2,
    pitch=0,
    style="https://tiles.openfreemap.org/styles/liberty",
)
m4.set_sky(
    sky_color="#87CEEB",
    horizon_color="#B0E0E6",
    fog_color="#F0F8FF",
    atmosphere_blend=1.0,
)
m4

m4 = Map( center=[0, 20], zoom=2, pitch=0, style="https://tiles.openfreemap.org/styles/liberty", ) m4.set_sky( sky_color="#87CEEB", horizon_color="#B0E0E6", fog_color="#F0F8FF", atmosphere_blend=1.0, ) m4

Remove Sky¶

In [ ]:

m.remove_sky()

m.remove_sky()

Export to HTML¶

In [ ]:

m2.to_html("sky_fog_example.html")

m2.to_html("sky_fog_example.html")