3D Buildings¶

This notebook demonstrates how to add 3D building extrusions to MapLibre maps.

Important: 3D buildings require a vector tile style with building data. The examples below use OpenFreeMap's Liberty style which includes building heights.

In [ ]:

# %pip install anymap-ts

# %pip install anymap-ts

Basic 3D Buildings¶

In [ ]:

from anymap_ts import Map

# Manhattan, NYC - lots of tall buildings
# Using OpenFreeMap Liberty style which has building data
m = Map(
    center=[-74.0060, 40.7128],
    zoom=15,
    pitch=60,
    bearing=-17,
    style="https://tiles.openfreemap.org/styles/liberty",
)
m.add_3d_buildings()
m

from anymap_ts import Map # Manhattan, NYC - lots of tall buildings # Using OpenFreeMap Liberty style which has building data m = Map( center=[-74.0060, 40.7128], zoom=15, pitch=60, bearing=-17, style="https://tiles.openfreemap.org/styles/liberty", ) m.add_3d_buildings() m

Custom Building Colors¶

In [ ]:

# San Francisco with blue buildings
m2 = Map(
    center=[-122.4194, 37.7749],
    zoom=15.5,
    pitch=55,
    bearing=45,
    style="https://tiles.openfreemap.org/styles/liberty",
)
m2.add_3d_buildings(
    fill_extrusion_color="#4682B4", fill_extrusion_opacity=0.8  # Steel blue
)
m2

# San Francisco with blue buildings m2 = Map( center=[-122.4194, 37.7749], zoom=15.5, pitch=55, bearing=45, style="https://tiles.openfreemap.org/styles/liberty", ) m2.add_3d_buildings( fill_extrusion_color="#4682B4", fill_extrusion_opacity=0.8 # Steel blue ) m2

3D Buildings with Terrain¶

In [ ]:

# Downtown LA with terrain and buildings
m3 = Map(
    center=[-118.2437, 34.0522],
    zoom=15,
    pitch=60,
    bearing=-30,
    style="https://tiles.openfreemap.org/styles/liberty",
)
m3.add_3d_terrain(exaggeration=1.5)
m3.add_3d_buildings(fill_extrusion_color="#808080", fill_extrusion_opacity=0.7)
m3

# Downtown LA with terrain and buildings m3 = Map( center=[-118.2437, 34.0522], zoom=15, pitch=60, bearing=-30, style="https://tiles.openfreemap.org/styles/liberty", ) m3.add_3d_terrain(exaggeration=1.5) m3.add_3d_buildings(fill_extrusion_color="#808080", fill_extrusion_opacity=0.7) m3

Golden Hour Effect¶

In [ ]:

# Chicago with warm sunset colors
m4 = Map(
    center=[-87.6298, 41.8781],
    zoom=15.5,
    pitch=60,
    bearing=100,
    style="https://tiles.openfreemap.org/styles/liberty",
)
m4.add_3d_buildings(
    fill_extrusion_color="#FF8C00",  # Dark orange for sunset effect
    fill_extrusion_opacity=0.85,
    min_zoom=13,
)
m4

# Chicago with warm sunset colors m4 = Map( center=[-87.6298, 41.8781], zoom=15.5, pitch=60, bearing=100, style="https://tiles.openfreemap.org/styles/liberty", ) m4.add_3d_buildings( fill_extrusion_color="#FF8C00", # Dark orange for sunset effect fill_extrusion_opacity=0.85, min_zoom=13, ) m4

Different Cities¶

In [ ]:

# Seattle
m5 = Map(
    center=[-122.3321, 47.6062],
    zoom=15,
    pitch=65,
    bearing=-45,
    style="https://tiles.openfreemap.org/styles/liberty",
)
m5.add_3d_buildings(
    fill_extrusion_color="#1a1a2e", fill_extrusion_opacity=0.9  # Dark blue
)
m5

# Seattle m5 = Map( center=[-122.3321, 47.6062], zoom=15, pitch=65, bearing=-45, style="https://tiles.openfreemap.org/styles/liberty", ) m5.add_3d_buildings( fill_extrusion_color="#1a1a2e", fill_extrusion_opacity=0.9 # Dark blue ) m5

In [ ]:

# Boston
m6 = Map(
    center=[-71.0589, 42.3601],
    zoom=15,
    pitch=55,
    bearing=20,
    style="https://tiles.openfreemap.org/styles/liberty",
)
m6.add_3d_buildings(
    fill_extrusion_color="#8B4513",  # Saddle brown - brick city look
    fill_extrusion_opacity=0.7,
)
m6

# Boston m6 = Map( center=[-71.0589, 42.3601], zoom=15, pitch=55, bearing=20, style="https://tiles.openfreemap.org/styles/liberty", ) m6.add_3d_buildings( fill_extrusion_color="#8B4513", # Saddle brown - brick city look fill_extrusion_opacity=0.7, ) m6

Interactive Navigation¶

Use the map controls to:

• Rotate: Right-click and drag, or use Shift + left-click and drag
• Tilt: Ctrl + click and drag
• Zoom: Scroll wheel or double-click

In [ ]:

# Tokyo - large urban area
m7 = Map(
    center=[139.6917, 35.6895],
    zoom=15,
    pitch=60,
    bearing=0,
    style="https://tiles.openfreemap.org/styles/liberty",
)
m7.add_3d_buildings(
    fill_extrusion_color="#C0C0C0", fill_extrusion_opacity=0.8  # Silver
)
m7

# Tokyo - large urban area m7 = Map( center=[139.6917, 35.6895], zoom=15, pitch=60, bearing=0, style="https://tiles.openfreemap.org/styles/liberty", ) m7.add_3d_buildings( fill_extrusion_color="#C0C0C0", fill_extrusion_opacity=0.8 # Silver ) m7

Using Other Vector Styles¶

You can use any vector tile style that includes building data. Here's an example with the Positron style from OpenFreeMap:

In [ ]:

# Using Positron style
m8 = Map(
    center=[-0.1276, 51.5074],  # London
    zoom=15,
    pitch=60,
    bearing=30,
    style="https://tiles.openfreemap.org/styles/positron",
)
m8.add_3d_buildings(
    fill_extrusion_color="#6B8E23", fill_extrusion_opacity=0.7  # Olive green
)
m8

# Using Positron style m8 = Map( center=[-0.1276, 51.5074], # London zoom=15, pitch=60, bearing=30, style="https://tiles.openfreemap.org/styles/positron", ) m8.add_3d_buildings( fill_extrusion_color="#6B8E23", fill_extrusion_opacity=0.7 # Olive green ) m8

Export to HTML¶

In [ ]:

m.to_html("buildings_3d_example.html")

m.to_html("buildings_3d_example.html")