DeckGL Example¶

This notebook demonstrates the DeckGL integration in anymap-ts.

DeckGL provides GPU-accelerated visualization layers on top of MapLibre GL JS.

In [ ]:

from anymap_ts import DeckGLMap

# Create a DeckGL map
m = DeckGLMap(center=[-122.4, 37.8], zoom=10)
m.add_basemap("CartoDB.DarkMatter")
m

from anymap_ts import DeckGLMap # Create a DeckGL map m = DeckGLMap(center=[-122.4, 37.8], zoom=10) m.add_basemap("CartoDB.DarkMatter") m

In [ ]:

# Generate sample point data
import random

points = [
    {
        "coordinates": [
            -122.4 + random.uniform(-0.2, 0.2),
            37.8 + random.uniform(-0.2, 0.2),
        ],
        "value": random.randint(1, 100),
    }
    for _ in range(1000)
]

# Add scatterplot layer
m.add_scatterplot_layer(
    data=points, name="scatterplot", get_radius=100, get_fill_color=[255, 140, 0, 200]
)

# Generate sample point data import random points = [ { "coordinates": [ -122.4 + random.uniform(-0.2, 0.2), 37.8 + random.uniform(-0.2, 0.2), ], "value": random.randint(1, 100), } for _ in range(1000) ] # Add scatterplot layer m.add_scatterplot_layer( data=points, name="scatterplot", get_radius=100, get_fill_color=[255, 140, 0, 200] )

In [ ]:

# Add hexagon aggregation layer
m.add_hexagon_layer(
    data=points, name="hexagons", radius=500, elevation_scale=10, extruded=True
)

# Add hexagon aggregation layer m.add_hexagon_layer( data=points, name="hexagons", radius=500, elevation_scale=10, extruded=True )

In [ ]:

# Add heatmap layer
m2 = DeckGLMap(center=[-122.4, 37.8], zoom=11)
m2.add_basemap("CartoDB.DarkMatter")
m2.add_heatmap_layer(data=points, name="heatmap", radius_pixels=50, intensity=1)
m2

# Add heatmap layer m2 = DeckGLMap(center=[-122.4, 37.8], zoom=11) m2.add_basemap("CartoDB.DarkMatter") m2.add_heatmap_layer(data=points, name="heatmap", radius_pixels=50, intensity=1) m2

In [ ]:

# Add arc layer for connections
arcs = [
    {"source": [-122.4194, 37.7749], "target": [-122.2712, 37.8044]},
    {"source": [-122.4194, 37.7749], "target": [-122.0308, 37.3382]},
    {"source": [-122.2712, 37.8044], "target": [-121.8853, 37.3387]},
]

m3 = DeckGLMap(center=[-122.2, 37.6], zoom=9)
m3.add_basemap("CartoDB.DarkMatter")
m3.add_arc_layer(
    data=arcs,
    name="connections",
    get_source_color=[0, 128, 255],
    get_target_color=[255, 0, 128],
)
m3

# Add arc layer for connections arcs = [ {"source": [-122.4194, 37.7749], "target": [-122.2712, 37.8044]}, {"source": [-122.4194, 37.7749], "target": [-122.0308, 37.3382]}, {"source": [-122.2712, 37.8044], "target": [-121.8853, 37.3387]}, ] m3 = DeckGLMap(center=[-122.2, 37.6], zoom=9) m3.add_basemap("CartoDB.DarkMatter") m3.add_arc_layer( data=arcs, name="connections", get_source_color=[0, 128, 255], get_target_color=[255, 0, 128], ) m3

In [ ]:

# Export to HTML
m.to_html("deckgl_example.html")

# Export to HTML m.to_html("deckgl_example.html")