DeckGL Integration Examples¶

This notebook demonstrates both the standalone DeckGL backend and the new DeckGL layer integration with MapLibre in anymap.

What's New: DeckGL Layers in MapLibre¶

The MapLibre backend now supports adding DeckGL layers directly, providing the best of both worlds:

• MapLibre's vector tiles and styling capabilities
• DeckGL's high-performance data visualization layers

Installation¶

Make sure you have anymap installed:

pip install anymap

In [ ]:

import sys
import os

from anymap.maplibre import MapLibreMap

# Create a MapLibre map
m = MapLibreMap(
    center=[2.345885, 48.860412],  # Paris
    zoom=12,
    style="https://tiles.openfreemap.org/styles/bright",
)

# Sample data for gardens in Paris (from the HTML example)
garden_data = [
    {"name": "Jardins du Trocadéro", "position": [2.289207, 48.861561], "district": 16},
    {"name": "Jardin des Plantes", "position": [2.359823, 48.843995], "district": 5},
    {"name": "Jardins des Tuileries", "position": [2.327092, 48.863608], "district": 1},
    {"name": "Parc de Bercy", "position": [2.382094, 48.835962], "district": 12},
    {"name": "Jardin du Luxembourg", "position": [2.336975, 48.846421], "district": 6},
]


# Add DeckGL ScatterplotLayer - using strings instead of lambda functions
m.add_deckgl_layer(
    "gardens",
    "ScatterplotLayer",
    garden_data,
    props={
        "getPosition": "position",  # String accessor instead of lambda
        "getRadius": 100,
        "getFillColor": [49, 130, 206],
        "getLineColor": [175, 0, 32],
        "lineWidthMinPixels": 5,
        "radiusMinPixels": 20,
        "radiusMaxPixels": 100,
        "pickable": True,
        "opacity": 0.8,
        "stroked": True,
        "filled": True,
    },
)

print(f"DeckGL layers: {list(m.get_deckgl_layers().keys())}")

# Toggle visibility
m.set_deckgl_layer_visibility("gardens", False)
m.set_deckgl_layer_visibility("gardens", True)

geojson_data = {
    "type": "FeatureCollection",
    "features": [
        {
            "type": "Feature",
            "geometry": {
                "type": "Point",
                "coordinates": [2.3522, 48.8566],  # Paris center
            },
            "properties": {"name": "Paris Center", "size": 200},
        },
        {
            "type": "Feature",
            "geometry": {
                "type": "Point",
                "coordinates": [2.2945, 48.8534],  # Eiffel Tower
            },
            "properties": {"name": "Eiffel Tower", "size": 150},
        },
    ],
}

m.add_deckgl_layer(
    "landmarks",
    "GeoJsonLayer",
    geojson_data,
    props={
        "pickable": True,
        "stroked": True,
        "filled": True,
        "pointType": "circle",
        "getFillColor": [255, 140, 0, 200],
        "getLineColor": [255, 0, 0],
        "getPointRadius": 80,
        "lineWidthMinPixels": 2,
    },
)


html_file = "test_deckgl_maplibre.html"
m.to_html(html_file, title="DeckGL + MapLibre Test")
m

import sys import os from anymap.maplibre import MapLibreMap # Create a MapLibre map m = MapLibreMap( center=[2.345885, 48.860412], # Paris zoom=12, style="https://tiles.openfreemap.org/styles/bright", ) # Sample data for gardens in Paris (from the HTML example) garden_data = [ {"name": "Jardins du Trocadéro", "position": [2.289207, 48.861561], "district": 16}, {"name": "Jardin des Plantes", "position": [2.359823, 48.843995], "district": 5}, {"name": "Jardins des Tuileries", "position": [2.327092, 48.863608], "district": 1}, {"name": "Parc de Bercy", "position": [2.382094, 48.835962], "district": 12}, {"name": "Jardin du Luxembourg", "position": [2.336975, 48.846421], "district": 6}, ] # Add DeckGL ScatterplotLayer - using strings instead of lambda functions m.add_deckgl_layer( "gardens", "ScatterplotLayer", garden_data, props={ "getPosition": "position", # String accessor instead of lambda "getRadius": 100, "getFillColor": [49, 130, 206], "getLineColor": [175, 0, 32], "lineWidthMinPixels": 5, "radiusMinPixels": 20, "radiusMaxPixels": 100, "pickable": True, "opacity": 0.8, "stroked": True, "filled": True, }, ) print(f"DeckGL layers: {list(m.get_deckgl_layers().keys())}") # Toggle visibility m.set_deckgl_layer_visibility("gardens", False) m.set_deckgl_layer_visibility("gardens", True) geojson_data = { "type": "FeatureCollection", "features": [ { "type": "Feature", "geometry": { "type": "Point", "coordinates": [2.3522, 48.8566], # Paris center }, "properties": {"name": "Paris Center", "size": 200}, }, { "type": "Feature", "geometry": { "type": "Point", "coordinates": [2.2945, 48.8534], # Eiffel Tower }, "properties": {"name": "Eiffel Tower", "size": 150}, }, ], } m.add_deckgl_layer( "landmarks", "GeoJsonLayer", geojson_data, props={ "pickable": True, "stroked": True, "filled": True, "pointType": "circle", "getFillColor": [255, 140, 0, 200], "getLineColor": [255, 0, 0], "getPointRadius": 80, "lineWidthMinPixels": 2, }, ) html_file = "test_deckgl_maplibre.html" m.to_html(html_file, title="DeckGL + MapLibre Test") m

In [ ]: