Advanced Deck.gl Layers on MapLibre¶

This notebook demonstrates advanced deck.gl layers on MapLibreMap, including:

• Column, Solid Polygon layers
• Bitmap, Grid Cell layers

In [ ]:

# %pip install anymap-ts

# %pip install anymap-ts

Column Layer¶

Render 3D columns (bar charts) at map positions.

In [ ]:

from anymap_ts import MapLibreMap

cities = [
    {"coordinates": [-122.4194, 37.7749], "population": 870000, "name": "SF"},
    {"coordinates": [-118.2437, 34.0522], "population": 3900000, "name": "LA"},
    {"coordinates": [-73.9857, 40.7484], "population": 8300000, "name": "NYC"},
    {"coordinates": [-87.6298, 41.8781], "population": 2700000, "name": "Chicago"},
    {"coordinates": [-95.3698, 29.7604], "population": 2300000, "name": "Houston"},
]

m = MapLibreMap(center=[-98, 39], zoom=3, pitch=45)
m.add_basemap("CartoDB.DarkMatter")
m.add_column_layer(
    data=cities,
    name="population",
    get_position="coordinates",
    get_elevation="population",
    elevation_scale=0.05,
    radius=50000,
    get_fill_color=[255, 140, 0, 200],
    extruded=True,
)
m

from anymap_ts import MapLibreMap cities = [ {"coordinates": [-122.4194, 37.7749], "population": 870000, "name": "SF"}, {"coordinates": [-118.2437, 34.0522], "population": 3900000, "name": "LA"}, {"coordinates": [-73.9857, 40.7484], "population": 8300000, "name": "NYC"}, {"coordinates": [-87.6298, 41.8781], "population": 2700000, "name": "Chicago"}, {"coordinates": [-95.3698, 29.7604], "population": 2300000, "name": "Houston"}, ] m = MapLibreMap(center=[-98, 39], zoom=3, pitch=45) m.add_basemap("CartoDB.DarkMatter") m.add_column_layer( data=cities, name="population", get_position="coordinates", get_elevation="population", elevation_scale=0.05, radius=50000, get_fill_color=[255, 140, 0, 200], extruded=True, ) m

Solid Polygon Layer¶

Render extruded 3D polygons.

In [ ]:

buildings = [
    {
        "polygon": [
            [-122.42, 37.78],
            [-122.41, 37.78],
            [-122.41, 37.77],
            [-122.42, 37.77],
        ],
        "height": 800,
    },
    {
        "polygon": [
            [-122.41, 37.79],
            [-122.40, 37.79],
            [-122.40, 37.78],
            [-122.41, 37.78],
        ],
        "height": 1200,
    },
]

m4 = MapLibreMap(center=[-122.41, 37.78], zoom=14, pitch=60)
m4.add_basemap("CartoDB.DarkMatter")
m4.add_solid_polygon_layer(
    data=buildings,
    name="buildings",
    get_fill_color=[0, 150, 255, 128],
    get_elevation="height",
    extruded=True,
    wireframe=True,
)
m4

buildings = [ { "polygon": [ [-122.42, 37.78], [-122.41, 37.78], [-122.41, 37.77], [-122.42, 37.77], ], "height": 800, }, { "polygon": [ [-122.41, 37.79], [-122.40, 37.79], [-122.40, 37.78], [-122.41, 37.78], ], "height": 1200, }, ] m4 = MapLibreMap(center=[-122.41, 37.78], zoom=14, pitch=60) m4.add_basemap("CartoDB.DarkMatter") m4.add_solid_polygon_layer( data=buildings, name="buildings", get_fill_color=[0, 150, 255, 128], get_elevation="height", extruded=True, wireframe=True, ) m4

Bitmap Layer¶

Overlay a raster image on the map with GPU rendering.

In [ ]:

m5 = MapLibreMap(center=[-122.4, 37.75], zoom=11)
m5.add_bitmap_layer(
    image="https://raw.githubusercontent.com/visgl/deck.gl-data/master/website/sf-districts.png",
    bounds=[-122.519, 37.7045, -122.355, 37.829],
    name="overlay",
    opacity=0.7,
)
m5

m5 = MapLibreMap(center=[-122.4, 37.75], zoom=11) m5.add_bitmap_layer( image="https://raw.githubusercontent.com/visgl/deck.gl-data/master/website/sf-districts.png", bounds=[-122.519, 37.7045, -122.355, 37.829], name="overlay", opacity=0.7, ) m5

Grid Cell Layer¶

Render pre-aggregated grid cells with elevation.

In [ ]:

import random

random.seed(42)
grid_cells = [
    {
        "coordinates": [-122.4 + i * 0.01, 37.75 + j * 0.01],
        "value": random.randint(100, 2000),
        "color": [
            int(255 * random.random()),
            int(200 * random.random()),
            100,
            200,
        ],
    }
    for i in range(10)
    for j in range(10)
]

m6 = MapLibreMap(center=[-122.35, 37.8], zoom=12, pitch=45)
m6.add_basemap("CartoDB.DarkMatter")
m6.add_grid_cell_layer(
    data=grid_cells,
    name="grid-cells",
    get_color="color",
    get_elevation="value",
    cell_size=500,
    elevation_scale=2,
    extruded=True,
)
m6

import random random.seed(42) grid_cells = [ { "coordinates": [-122.4 + i * 0.01, 37.75 + j * 0.01], "value": random.randint(100, 2000), "color": [ int(255 * random.random()), int(200 * random.random()), 100, 200, ], } for i in range(10) for j in range(10) ] m6 = MapLibreMap(center=[-122.35, 37.8], zoom=12, pitch=45) m6.add_basemap("CartoDB.DarkMatter") m6.add_grid_cell_layer( data=grid_cells, name="grid-cells", get_color="color", get_elevation="value", cell_size=500, elevation_scale=2, extruded=True, ) m6

Remove Layers¶

In [ ]:

m.remove_deck_layer("population")

m.remove_deck_layer("population")