Mapbox - Deck.gl Layers¶

GPU-accelerated deck.gl layers for data visualization.

In [ ]:

# %pip install anymap-ts

# %pip install anymap-ts

In [ ]:

from anymap_ts import MapboxMap

m = MapboxMap(center=[-122.4, 37.8], zoom=10, style="mapbox://styles/mapbox/dark-v11")
m

from anymap_ts import MapboxMap m = MapboxMap(center=[-122.4, 37.8], zoom=10, style="mapbox://styles/mapbox/dark-v11") m

Scatterplot Layer¶

In [ ]:

import random

points = [
    {
        "coordinates": [
            -122.4 + random.uniform(-0.1, 0.1),
            37.8 + random.uniform(-0.1, 0.1),
        ]
    }
    for _ in range(50)
]
m.add_scatterplot_layer(points, name="scatter", get_radius=100)
m

import random points = [ { "coordinates": [ -122.4 + random.uniform(-0.1, 0.1), 37.8 + random.uniform(-0.1, 0.1), ] } for _ in range(50) ] m.add_scatterplot_layer(points, name="scatter", get_radius=100) m

Path Layer¶

In [ ]:

routes = [
    {
        "path": [[-122.4, 37.8], [-122.3, 37.85], [-122.2, 37.8]],
        "name": "Route 1",
    },
    {
        "path": [[-122.35, 37.75], [-122.25, 37.82]],
        "name": "Route 2",
    },
]
m.add_path_layer(routes, name="paths", get_width=3)
m

routes = [ { "path": [[-122.4, 37.8], [-122.3, 37.85], [-122.2, 37.8]], "name": "Route 1", }, { "path": [[-122.35, 37.75], [-122.25, 37.82]], "name": "Route 2", }, ] m.add_path_layer(routes, name="paths", get_width=3) m

Polygon Layer with 3D Extrusion¶

In [ ]:

polygons = [
    {
        "polygon": [
            [-122.42, 37.78],
            [-122.38, 37.78],
            [-122.38, 37.82],
            [-122.42, 37.82],
            [-122.42, 37.78],
        ],
        "elevation": 5000,
    },
]
m.add_polygon_layer(polygons, name="extruded", extruded=True, get_elevation="elevation")
m

polygons = [ { "polygon": [ [-122.42, 37.78], [-122.38, 37.78], [-122.38, 37.82], [-122.42, 37.82], [-122.42, 37.78], ], "elevation": 5000, }, ] m.add_polygon_layer(polygons, name="extruded", extruded=True, get_elevation="elevation") m

Hexagon Layer (Aggregation)¶

In [ ]:

hex_data = [
    {"coordinates": [-122.4 + i * 0.02, 37.8 + j * 0.02]}
    for i in range(10)
    for j in range(10)
]
m.add_hexagon_layer(hex_data, name="hexagons", radius=500, elevation_scale=50)
m

hex_data = [ {"coordinates": [-122.4 + i * 0.02, 37.8 + j * 0.02]} for i in range(10) for j in range(10) ] m.add_hexagon_layer(hex_data, name="hexagons", radius=500, elevation_scale=50) m

Grid Layer¶

In [ ]:

grid_data = [{"coordinates": [-122.4 + i * 0.01, 37.8]} for i in range(20)]
m.add_grid_layer(grid_data, name="grid", cell_size=300)
m

grid_data = [{"coordinates": [-122.4 + i * 0.01, 37.8]} for i in range(20)] m.add_grid_layer(grid_data, name="grid", cell_size=300) m

Deck.gl Heatmap Layer¶

In [ ]:

heatmap_points = [
    {"coordinates": [-122.4 + i * 0.02, 37.8], "weight": 1} for i in range(30)
]
m.add_deck_heatmap_layer(heatmap_points, name="deck-heatmap", radius_pixels=50)
m

heatmap_points = [ {"coordinates": [-122.4 + i * 0.02, 37.8], "weight": 1} for i in range(30) ] m.add_deck_heatmap_layer(heatmap_points, name="deck-heatmap", radius_pixels=50) m

Text Layer¶

In [ ]:

text_data = [
    {"coordinates": [-122.4194, 37.7749], "text": "SF"},
    {"coordinates": [-122.2712, 37.8044], "text": "Oakland"},
]
m.add_text_layer(text_data, name="labels", get_size=14)
m

text_data = [ {"coordinates": [-122.4194, 37.7749], "text": "SF"}, {"coordinates": [-122.2712, 37.8044], "text": "Oakland"}, ] m.add_text_layer(text_data, name="labels", get_size=14) m

Line Layer¶

In [ ]:

lines = [
    {"sourcePosition": [-122.4, 37.8], "targetPosition": [-122.3, 37.85]},
    {"sourcePosition": [-122.3, 37.85], "targetPosition": [-122.2, 37.8]},
]
m.add_line_layer(lines, name="lines", get_width=2)
m

lines = [ {"sourcePosition": [-122.4, 37.8], "targetPosition": [-122.3, 37.85]}, {"sourcePosition": [-122.3, 37.85], "targetPosition": [-122.2, 37.8]}, ] m.add_line_layer(lines, name="lines", get_width=2) m

Contour Layer¶

In [ ]:

contour_data = [
    {"coordinates": [-122.4, 37.8], "value": 100},
    {"coordinates": [-122.35, 37.82], "value": 150},
    {"coordinates": [-122.3, 37.8], "value": 120},
]
m.add_contour_layer(
    contour_data, name="contour", get_position="coordinates", get_weight="value"
)
m

contour_data = [ {"coordinates": [-122.4, 37.8], "value": 100}, {"coordinates": [-122.35, 37.82], "value": 150}, {"coordinates": [-122.3, 37.8], "value": 120}, ] m.add_contour_layer( contour_data, name="contour", get_position="coordinates", get_weight="value" ) m

Screen Grid Layer¶

In [ ]:

screen_data = [{"coordinates": [-122.4 + i * 0.02, 37.8]} for i in range(15)]
m.add_screen_grid_layer(screen_data, name="screengrid", cell_size_pixels=50)
m

screen_data = [{"coordinates": [-122.4 + i * 0.02, 37.8]} for i in range(15)] m.add_screen_grid_layer(screen_data, name="screengrid", cell_size_pixels=50) m

Trips Layer¶

In [ ]:

trips = [
    {
        "waypoints": [[-122.4, 37.8], [-122.35, 37.82], [-122.3, 37.8]],
        "timestamps": [0, 100, 200],
    }
]
m.add_trips_layer(trips, name="trips", trail_length=100)
m

trips = [ { "waypoints": [[-122.4, 37.8], [-122.35, 37.82], [-122.3, 37.8]], "timestamps": [0, 100, 200], } ] m.add_trips_layer(trips, name="trips", trail_length=100) m

Generic Deck.gl Layer¶

In [ ]:

generic_data = [{"coordinates": [-122.4, 37.8]}, {"coordinates": [-122.3, 37.85]}]
m.add_deckgl_layer("ScatterplotLayer", generic_data, name="generic", getRadius=200)
m

generic_data = [{"coordinates": [-122.4, 37.8]}, {"coordinates": [-122.3, 37.85]}] m.add_deckgl_layer("ScatterplotLayer", generic_data, name="generic", getRadius=200) m

Remove Deck Layer¶

In [ ]:

m.remove_deck_layer("generic")

m.remove_deck_layer("generic")