Globe Projection¶

MapLibre GL JS v4+ supports globe projection, enabling a 3D globe view.

Use projection="globe" in the Map constructor, or call set_projection() to switch dynamically between mercator (flat) and globe (3D sphere) projections.

In [ ]:

# %pip install anymap-ts

# %pip install anymap-ts

Globe View¶

In [ ]:

from anymap_ts import Map

m = Map(center=[0, 20], zoom=1, projection="globe")
m.add_basemap("OpenStreetMap")
m

from anymap_ts import Map m = Map(center=[0, 20], zoom=1, projection="globe") m.add_basemap("OpenStreetMap") m

Globe with Satellite Imagery¶

In [ ]:

m2 = Map(center=[0, 20], zoom=1, projection="globe")
m2.add_basemap("Esri.WorldImagery")
m2

m2 = Map(center=[0, 20], zoom=1, projection="globe") m2.add_basemap("Esri.WorldImagery") m2

Switch Back to Mercator¶

You can switch projections dynamically.

In [ ]:

m.set_projection("mercator")

m.set_projection("mercator")

Globe with Arc Layer¶

Combine globe projection with deck.gl layers for striking visualizations.

In [ ]:

flights = [
    {"source": [-122.4, 37.8], "target": [139.7, 35.7]},
    {"source": [-122.4, 37.8], "target": [-0.1, 51.5]},
    {"source": [-122.4, 37.8], "target": [151.2, -33.9]},
    {"source": [-73.9, 40.7], "target": [2.3, 48.9]},
    {"source": [-73.9, 40.7], "target": [55.3, 25.3]},
]

m3 = Map(center=[0, 20], zoom=1, projection="globe")
m3.add_basemap("CartoDB.DarkMatter")
m3.add_arc_layer(
    data=flights,
    name="flights",
    get_source_color=[0, 200, 255, 255],
    get_target_color=[255, 100, 50, 255],
    get_width=2,
    great_circle=True,
)
m3

flights = [ {"source": [-122.4, 37.8], "target": [139.7, 35.7]}, {"source": [-122.4, 37.8], "target": [-0.1, 51.5]}, {"source": [-122.4, 37.8], "target": [151.2, -33.9]}, {"source": [-73.9, 40.7], "target": [2.3, 48.9]}, {"source": [-73.9, 40.7], "target": [55.3, 25.3]}, ] m3 = Map(center=[0, 20], zoom=1, projection="globe") m3.add_basemap("CartoDB.DarkMatter") m3.add_arc_layer( data=flights, name="flights", get_source_color=[0, 200, 255, 255], get_target_color=[255, 100, 50, 255], get_width=2, great_circle=True, ) m3

Export to HTML¶

In [ ]:

m3.to_html("globe_projection_example.html")

m3.to_html("globe_projection_example.html")