Deck.gl Layers on MapLibre¶

This notebook demonstrates the deck.gl visualization layers available directly on MapLibreMap.

These GPU-accelerated layers include:

• Scatterplot, Path, Polygon, Line layers
• Hexagon, Grid, Heatmap aggregation layers
• Icon, Text label layers
• Contour, Screen Grid layers
• Trips animation layer
• GeoJSON layer with auto-styling

In [ ]:

# %pip install anymap-ts

# %pip install anymap-ts

Scatterplot Layer¶

Render sized and colored circles at point locations.

In [ ]:

from anymap_ts import MapLibreMap

points = [
    {"coordinates": [-122.4194, 37.7749], "size": 100, "name": "San Francisco"},
    {"coordinates": [-118.2437, 34.0522], "size": 200, "name": "Los Angeles"},
    {"coordinates": [-73.9857, 40.7484], "size": 300, "name": "New York"},
    {"coordinates": [-87.6298, 41.8781], "size": 150, "name": "Chicago"},
    {"coordinates": [-95.3698, 29.7604], "size": 120, "name": "Houston"},
]

m = MapLibreMap(center=[-98, 39], zoom=3)
m.add_basemap("CartoDB.DarkMatter")
m.add_scatterplot_layer(
    data=points,
    name="cities",
    get_position="coordinates",
    get_radius="size",
    get_fill_color=[255, 140, 0, 200],
    radius_scale=100,
    radius_min_pixels=5,
)
m

from anymap_ts import MapLibreMap points = [ {"coordinates": [-122.4194, 37.7749], "size": 100, "name": "San Francisco"}, {"coordinates": [-118.2437, 34.0522], "size": 200, "name": "Los Angeles"}, {"coordinates": [-73.9857, 40.7484], "size": 300, "name": "New York"}, {"coordinates": [-87.6298, 41.8781], "size": 150, "name": "Chicago"}, {"coordinates": [-95.3698, 29.7604], "size": 120, "name": "Houston"}, ] m = MapLibreMap(center=[-98, 39], zoom=3) m.add_basemap("CartoDB.DarkMatter") m.add_scatterplot_layer( data=points, name="cities", get_position="coordinates", get_radius="size", get_fill_color=[255, 140, 0, 200], radius_scale=100, radius_min_pixels=5, ) m

Path Layer¶

Render polylines for routes and trajectories.

In [ ]:

routes = [
    {
        "path": [
            [-122.4194, 37.7749],
            [-121.8853, 37.3387],
            [-121.4944, 38.5816],
            [-120.5, 37.5],
        ],
        "name": "Route A",
    },
    {
        "path": [
            [-122.4194, 37.7749],
            [-122.2712, 37.8044],
            [-122.0308, 37.3382],
        ],
        "name": "Route B",
    },
]

m2 = MapLibreMap(center=[-121.5, 37.8], zoom=8)
m2.add_basemap("CartoDB.DarkMatter")
m2.add_path_layer(
    data=routes,
    name="routes",
    get_color=[0, 200, 255, 200],
    get_width=5,
    width_min_pixels=2,
)
m2

routes = [ { "path": [ [-122.4194, 37.7749], [-121.8853, 37.3387], [-121.4944, 38.5816], [-120.5, 37.5], ], "name": "Route A", }, { "path": [ [-122.4194, 37.7749], [-122.2712, 37.8044], [-122.0308, 37.3382], ], "name": "Route B", }, ] m2 = MapLibreMap(center=[-121.5, 37.8], zoom=8) m2.add_basemap("CartoDB.DarkMatter") m2.add_path_layer( data=routes, name="routes", get_color=[0, 200, 255, 200], get_width=5, width_min_pixels=2, ) m2

Polygon Layer¶

Render filled polygons with optional 3D extrusion.

In [ ]:

polygons = [
    {
        "polygon": [
            [-122.45, 37.80],
            [-122.40, 37.80],
            [-122.40, 37.75],
            [-122.45, 37.75],
        ],
        "height": 500,
        "name": "Zone A",
    },
    {
        "polygon": [
            [-122.40, 37.80],
            [-122.35, 37.80],
            [-122.35, 37.75],
            [-122.40, 37.75],
        ],
        "height": 1000,
        "name": "Zone B",
    },
]

m3 = MapLibreMap(center=[-122.4, 37.77], zoom=13, pitch=45)
m3.add_basemap("CartoDB.DarkMatter")
m3.add_polygon_layer(
    data=polygons,
    name="zones",
    get_fill_color=[0, 128, 255, 128],
    get_line_color=[255, 255, 255, 255],
    get_elevation="height",
    extruded=True,
)
m3

polygons = [ { "polygon": [ [-122.45, 37.80], [-122.40, 37.80], [-122.40, 37.75], [-122.45, 37.75], ], "height": 500, "name": "Zone A", }, { "polygon": [ [-122.40, 37.80], [-122.35, 37.80], [-122.35, 37.75], [-122.40, 37.75], ], "height": 1000, "name": "Zone B", }, ] m3 = MapLibreMap(center=[-122.4, 37.77], zoom=13, pitch=45) m3.add_basemap("CartoDB.DarkMatter") m3.add_polygon_layer( data=polygons, name="zones", get_fill_color=[0, 128, 255, 128], get_line_color=[255, 255, 255, 255], get_elevation="height", extruded=True, ) m3

Hexagon Layer¶

Aggregate points into 3D hexagonal bins.

In [ ]:

import random

random.seed(42)
hex_points = [
    {"coordinates": [-122.4 + random.gauss(0, 0.05), 37.78 + random.gauss(0, 0.03)]}
    for _ in range(500)
]

m4 = MapLibreMap(center=[-122.4, 37.78], zoom=11, pitch=45)
m4.add_basemap("CartoDB.DarkMatter")
m4.add_hexagon_layer(
    data=hex_points,
    name="hexbins",
    radius=300,
    elevation_scale=10,
    extruded=True,
)
m4

import random random.seed(42) hex_points = [ {"coordinates": [-122.4 + random.gauss(0, 0.05), 37.78 + random.gauss(0, 0.03)]} for _ in range(500) ] m4 = MapLibreMap(center=[-122.4, 37.78], zoom=11, pitch=45) m4.add_basemap("CartoDB.DarkMatter") m4.add_hexagon_layer( data=hex_points, name="hexbins", radius=300, elevation_scale=10, extruded=True, ) m4

Grid Layer¶

Aggregate points into a square grid with 3D elevation.

In [ ]:

m5 = MapLibreMap(center=[-122.4, 37.78], zoom=11, pitch=45)
m5.add_basemap("CartoDB.DarkMatter")
m5.add_grid_layer(
    data=hex_points,
    name="grid",
    cell_size=300,
    elevation_scale=10,
    extruded=True,
)
m5

m5 = MapLibreMap(center=[-122.4, 37.78], zoom=11, pitch=45) m5.add_basemap("CartoDB.DarkMatter") m5.add_grid_layer( data=hex_points, name="grid", cell_size=300, elevation_scale=10, extruded=True, ) m5

Deck.gl Heatmap Layer¶

GPU-accelerated heatmap alternative to the native MapLibre heatmap.

In [ ]:

weighted_points = [
    {
        "coordinates": [-122.4 + random.gauss(0, 0.05), 37.78 + random.gauss(0, 0.03)],
        "weight": random.randint(1, 10),
    }
    for _ in range(300)
]

m6 = MapLibreMap(center=[-122.4, 37.78], zoom=11)
m6.add_basemap("CartoDB.DarkMatter")
m6.add_deck_heatmap_layer(
    data=weighted_points,
    name="heatmap",
    get_weight="weight",
    radius_pixels=40,
    intensity=1.5,
)
m6

weighted_points = [ { "coordinates": [-122.4 + random.gauss(0, 0.05), 37.78 + random.gauss(0, 0.03)], "weight": random.randint(1, 10), } for _ in range(300) ] m6 = MapLibreMap(center=[-122.4, 37.78], zoom=11) m6.add_basemap("CartoDB.DarkMatter") m6.add_deck_heatmap_layer( data=weighted_points, name="heatmap", get_weight="weight", radius_pixels=40, intensity=1.5, ) m6

Text Layer¶

Place text labels at specified positions.

In [ ]:

labels = [
    {"coordinates": [-122.4194, 37.7749], "text": "San Francisco"},
    {"coordinates": [-118.2437, 34.0522], "text": "Los Angeles"},
    {"coordinates": [-73.9857, 40.7484], "text": "New York"},
    {"coordinates": [-87.6298, 41.8781], "text": "Chicago"},
    {"coordinates": [-95.3698, 29.7604], "text": "Houston"},
]

m7 = MapLibreMap(center=[-98, 39], zoom=3)
m7.add_basemap("CartoDB.DarkMatter")
m7.add_text_layer(
    data=labels,
    name="city-labels",
    get_size=16,
    get_color=[255, 255, 255, 255],
)
m7

labels = [ {"coordinates": [-122.4194, 37.7749], "text": "San Francisco"}, {"coordinates": [-118.2437, 34.0522], "text": "Los Angeles"}, {"coordinates": [-73.9857, 40.7484], "text": "New York"}, {"coordinates": [-87.6298, 41.8781], "text": "Chicago"}, {"coordinates": [-95.3698, 29.7604], "text": "Houston"}, ] m7 = MapLibreMap(center=[-98, 39], zoom=3) m7.add_basemap("CartoDB.DarkMatter") m7.add_text_layer( data=labels, name="city-labels", get_size=16, get_color=[255, 255, 255, 255], ) m7

Line Layer¶

Render straight lines between source and target positions.

In [ ]:

lines = [
    {"sourcePosition": [-122.4194, 37.7749], "targetPosition": [-73.9857, 40.7484]},
    {"sourcePosition": [-122.4194, 37.7749], "targetPosition": [-87.6298, 41.8781]},
    {"sourcePosition": [-122.4194, 37.7749], "targetPosition": [-118.2437, 34.0522]},
]

m8 = MapLibreMap(center=[-98, 39], zoom=3)
m8.add_basemap("CartoDB.DarkMatter")
m8.add_line_layer(
    data=lines,
    name="connections",
    get_color=[0, 255, 128, 200],
    get_width=2,
)
m8

lines = [ {"sourcePosition": [-122.4194, 37.7749], "targetPosition": [-73.9857, 40.7484]}, {"sourcePosition": [-122.4194, 37.7749], "targetPosition": [-87.6298, 41.8781]}, {"sourcePosition": [-122.4194, 37.7749], "targetPosition": [-118.2437, 34.0522]}, ] m8 = MapLibreMap(center=[-98, 39], zoom=3) m8.add_basemap("CartoDB.DarkMatter") m8.add_line_layer( data=lines, name="connections", get_color=[0, 255, 128, 200], get_width=2, ) m8

Contour Layer¶

Generate isolines and isobands from point data.

In [ ]:

m9 = MapLibreMap(center=[-122.4, 37.78], zoom=11)
m9.add_basemap("CartoDB.DarkMatter")
m9.add_contour_layer(
    data=hex_points,
    name="contours",
    cell_size=200,
    contours=[
        {"threshold": 1, "color": [255, 255, 178], "strokeWidth": 1},
        {"threshold": 3, "color": [253, 141, 60], "strokeWidth": 2},
        {"threshold": 5, "color": [189, 0, 38], "strokeWidth": 3},
    ],
)
m9

m9 = MapLibreMap(center=[-122.4, 37.78], zoom=11) m9.add_basemap("CartoDB.DarkMatter") m9.add_contour_layer( data=hex_points, name="contours", cell_size=200, contours=[ {"threshold": 1, "color": [255, 255, 178], "strokeWidth": 1}, {"threshold": 3, "color": [253, 141, 60], "strokeWidth": 2}, {"threshold": 5, "color": [189, 0, 38], "strokeWidth": 3}, ], ) m9

Screen Grid Layer¶

Aggregate points into a grid in screen space.

In [ ]:

m10 = MapLibreMap(center=[-122.4, 37.78], zoom=11)
m10.add_basemap("CartoDB.DarkMatter")
m10.add_screen_grid_layer(
    data=hex_points,
    name="screengrid",
    cell_size_pixels=30,
    opacity=0.6,
)
m10

m10 = MapLibreMap(center=[-122.4, 37.78], zoom=11) m10.add_basemap("CartoDB.DarkMatter") m10.add_screen_grid_layer( data=hex_points, name="screengrid", cell_size_pixels=30, opacity=0.6, ) m10

Trips Layer¶

Animate trajectories over time.

In [ ]:

trips = [
    {
        "waypoints": [
            [-122.4194, 37.7749],
            [-122.40, 37.78],
            [-122.38, 37.77],
            [-122.36, 37.79],
        ],
        "timestamps": [0, 50, 100, 150],
    },
    {
        "waypoints": [
            [-122.45, 37.77],
            [-122.43, 37.76],
            [-122.41, 37.78],
            [-122.39, 37.76],
        ],
        "timestamps": [0, 40, 80, 120],
    },
]

m11 = MapLibreMap(center=[-122.4, 37.77], zoom=13)
m11.add_basemap("CartoDB.DarkMatter")
m11.add_trips_layer(
    data=trips,
    name="trips",
    get_color=[253, 128, 93],
    trail_length=100,
    current_time=75,
    width_min_pixels=3,
)
m11

trips = [ { "waypoints": [ [-122.4194, 37.7749], [-122.40, 37.78], [-122.38, 37.77], [-122.36, 37.79], ], "timestamps": [0, 50, 100, 150], }, { "waypoints": [ [-122.45, 37.77], [-122.43, 37.76], [-122.41, 37.78], [-122.39, 37.76], ], "timestamps": [0, 40, 80, 120], }, ] m11 = MapLibreMap(center=[-122.4, 37.77], zoom=13) m11.add_basemap("CartoDB.DarkMatter") m11.add_trips_layer( data=trips, name="trips", get_color=[253, 128, 93], trail_length=100, current_time=75, width_min_pixels=3, ) m11

Generic Deck.gl Layer¶

Use add_deckgl_layer() to add any deck.gl layer type with a single flexible interface.

In [ ]:

m12 = MapLibreMap(center=[-98, 39], zoom=3)
m12.add_basemap("CartoDB.DarkMatter")
m12.add_deckgl_layer(
    layer_type="ScatterplotLayer",
    data=points,
    name="generic-scatter",
    getPosition="coordinates",
    getRadius=50000,
    getFillColor=[255, 0, 128, 200],
    radiusMinPixels=5,
)
m12

m12 = MapLibreMap(center=[-98, 39], zoom=3) m12.add_basemap("CartoDB.DarkMatter") m12.add_deckgl_layer( layer_type="ScatterplotLayer", data=points, name="generic-scatter", getPosition="coordinates", getRadius=50000, getFillColor=[255, 0, 128, 200], radiusMinPixels=5, ) m12

Remove Deck.gl Layers¶

In [ ]:

m12.remove_deck_layer("generic-scatter")

m12.remove_deck_layer("generic-scatter")