DeckGL Backend Example¶

This notebook demonstrates how to use the DeckGL backend in anymap, which builds upon the MapLibre backend to provide advanced data visualization capabilities using DeckGL layers.

Installation¶

Make sure you have anymap installed:

pip install anymap

Troubleshooting¶

If you encounter widget loading issues:

1. Restart the kernel and clear all outputs
2. Check internet connectivity - DeckGL loads from CDN
3. Open browser console (F12) to see any JavaScript errors
4. Try a simple example first before complex visualizations

The widget dynamically loads DeckGL and MapLibre from CDN, so it requires an internet connection.

Basic Setup¶

First, let's import the necessary modules and create a basic DeckGL map:

In [1]:

from anymap import DeckGLMap
import json
import requests

from anymap import DeckGLMap import json import requests

Simple Test First¶

Let's start with a very simple DeckGL map to ensure the widget loads correctly:

In [2]:

# Create a simple test map first
simple_map = DeckGLMap(center=[0, 0], zoom=2, height="600px")
print("✓ Simple DeckGL map created successfully")
print(f"Center: {simple_map.center}, Zoom: {simple_map.zoom}")

# Display the simple map
simple_map

# Create a simple test map first simple_map = DeckGLMap(center=[0, 0], zoom=2, height="600px") print("✓ Simple DeckGL map created successfully") print(f"Center: {simple_map.center}, Zoom: {simple_map.zoom}") # Display the simple map simple_map

✓ Simple DeckGL map created successfully
Center: [0, 0], Zoom: 2.0

Out[2]:

In [3]:

# Create a basic DeckGL map
m = DeckGLMap(
    center=[51.47, 0.45],  # London
    zoom=4,
    bearing=0,
    pitch=30,
    height="600px",
    style="https://basemaps.cartocdn.com/gl/positron-nolabels-gl-style/style.json",
)

print(f"Created DeckGL map with center: {m.center}, zoom: {m.zoom}")
print(f"Map style: {m.style}")
print(f"Current DeckGL layers: {len(m.deckgl_layers)}")

# Create a basic DeckGL map m = DeckGLMap( center=[51.47, 0.45], # London zoom=4, bearing=0, pitch=30, height="600px", style="https://basemaps.cartocdn.com/gl/positron-nolabels-gl-style/style.json", ) print(f"Created DeckGL map with center: {m.center}, zoom: {m.zoom}") print(f"Map style: {m.style}") print(f"Current DeckGL layers: {len(m.deckgl_layers)}")

Created DeckGL map with center: [51.47, 0.45], zoom: 4.0
Map style: {'version': 8, 'name': 'Positron without labels', 'metadata': {}, 'sources': {'carto': {'type': 'vector', 'url': 'https://tiles.basemaps.cartocdn.com/vector/carto.streets/v1/tiles.json'}}, 'sprite': 'https://tiles.basemaps.cartocdn.com/gl/positron-gl-style/sprite', 'glyphs': 'https://tiles.basemaps.cartocdn.com/fonts/{fontstack}/{range}.pbf', 'layers': [{'id': 'background', 'type': 'background', 'layout': {'visibility': 'visible'}, 'paint': {'background-color': '#fafaf8', 'background-opacity': 1}}, {'id': 'landcover', 'type': 'fill', 'source': 'carto', 'source-layer': 'landcover', 'filter': ['any', ['==', 'class', 'wood'], ['==', 'class', 'grass'], ['==', 'subclass', 'recreation_ground']], 'paint': {'fill-color': {'stops': [[8, 'rgba(234, 241, 233, 0.5)'], [9, 'rgba(234, 241, 233, 0.5)'], [11, 'rgba(234, 241, 233, 0.5)'], [13, 'rgba(234, 241, 233, 0.5)'], [15, 'rgba(234, 241, 233, 0.5)']]}, 'fill-opacity': 1}}, {'id': 'park_national_park', 'type': 'fill', 'source': 'carto', 'source-layer': 'park', 'minzoom': 9, 'filter': ['all', ['==', 'class', 'national_park']], 'layout': {'visibility': 'visible'}, 'paint': {'fill-color': {'stops': [[8, 'rgba(234, 241, 233, 0.5)'], [9, 'rgba(234, 241, 233, 0.5)'], [11, 'rgba(234, 241, 233, 0.5)'], [13, 'rgba(234, 241, 233, 0.5)'], [15, 'rgba(234, 241, 233, 0.5)']]}, 'fill-opacity': 1, 'fill-translate-anchor': 'map'}}, {'id': 'park_nature_reserve', 'type': 'fill', 'source': 'carto', 'source-layer': 'park', 'minzoom': 0, 'filter': ['all', ['==', 'class', 'nature_reserve']], 'layout': {'visibility': 'visible'}, 'paint': {'fill-color': {'stops': [[8, 'rgba(234, 241, 233, 0.5)'], [9, 'rgba(234, 241, 233, 0.5)'], [11, 'rgba(234, 241, 233, 0.5)'], [13, 'rgba(234, 241, 233, 0.5)'], [15, 'rgba(234, 241, 233, 0.5)']]}, 'fill-antialias': True, 'fill-opacity': {'stops': [[6, 0.7], [9, 0.9]]}}}, {'id': 'landuse_residential', 'type': 'fill', 'source': 'carto', 'source-layer': 'landuse', 'minzoom': 6, 'filter': ['any', ['==', 'class', 'residential']], 'paint': {'fill-color': {'stops': [[5, 'rgba(237, 237, 237, 0.5)'], [8, 'rgba(237, 237, 237, 0.45)'], [9, 'rgba(237, 237, 237, 0.4)'], [11, 'rgba(237, 237, 237, 0.35)'], [13, 'rgba(237, 237, 237, 0.3)'], [15, 'rgba(237, 237, 237, 0.25)'], [16, 'rgba(237, 237, 237, 0.25)']]}, 'fill-opacity': {'stops': [[6, 0.6], [9, 1]]}}}, {'id': 'landuse', 'type': 'fill', 'source': 'carto', 'source-layer': 'landuse', 'filter': ['any', ['==', 'class', 'cemetery'], ['==', 'class', 'stadium']], 'paint': {'fill-color': {'stops': [[8, 'rgba(234, 241, 233, 0.5)'], [9, 'rgba(234, 241, 233, 0.5)'], [11, 'rgba(234, 241, 233, 0.5)'], [13, 'rgba(234, 241, 233, 0.5)'], [15, 'rgba(234, 241, 233, 0.5)']]}}}, {'id': 'waterway', 'type': 'line', 'source': 'carto', 'source-layer': 'waterway', 'paint': {'line-color': '#d1dbdf', 'line-width': {'stops': [[8, 0.5], [9, 1], [15, 2], [16, 3]]}}}, {'id': 'boundary_county', 'type': 'line', 'source': 'carto', 'source-layer': 'boundary', 'minzoom': 9, 'maxzoom': 24, 'filter': ['all', ['==', 'admin_level', 6], ['==', 'maritime', 0]], 'paint': {'line-color': {'stops': [[4, '#ead5d7'], [5, '#ead5d7'], [6, '#e1c5c7']]}, 'line-width': {'stops': [[4, 0.5], [7, 1]]}, 'line-dasharray': {'stops': [[6, [1]], [7, [2, 2]]]}}}, {'id': 'boundary_state', 'type': 'line', 'source': 'carto', 'source-layer': 'boundary', 'minzoom': 4, 'filter': ['all', ['==', 'admin_level', 4], ['==', 'maritime', 0]], 'paint': {'line-color': {'stops': [[4, '#ead5d7'], [5, '#ead5d7'], [6, '#e1c5c7']]}, 'line-width': {'stops': [[4, 0.5], [7, 1], [8, 1], [9, 1.2]]}, 'line-dasharray': {'stops': [[6, [1]], [7, [2, 2]]]}}}, {'id': 'water', 'type': 'fill', 'source': 'carto', 'source-layer': 'water', 'minzoom': 0, 'maxzoom': 24, 'filter': ['all', ['==', '$type', 'Polygon']], 'layout': {'visibility': 'visible'}, 'paint': {'fill-color': '#d4dadc', 'fill-antialias': True, 'fill-translate-anchor': 'map', 'fill-opacity': 1}}, {'id': 'water_shadow', 'type': 'fill', 'source': 'carto', 'source-layer': 'water', 'minzoom': 0, 'filter': ['all', ['==', '$type', 'Polygon']], 'layout': {'visibility': 'visible'}, 'paint': {'fill-color': 'transparent', 'fill-antialias': True, 'fill-translate-anchor': 'map', 'fill-opacity': 1, 'fill-translate': {'stops': [[0, [0, 2]], [6, [0, 1]], [14, [0, 1]], [17, [0, 2]]]}}}, {'id': 'aeroway-runway', 'type': 'line', 'source': 'carto', 'source-layer': 'aeroway', 'minzoom': 12, 'filter': ['all', ['==', 'class', 'runway']], 'layout': {'line-cap': 'square'}, 'paint': {'line-width': {'stops': [[11, 1], [13, 4], [14, 6], [15, 8], [16, 10]]}, 'line-color': '#e8e8e8'}}, {'id': 'aeroway-taxiway', 'type': 'line', 'source': 'carto', 'source-layer': 'aeroway', 'minzoom': 13, 'filter': ['all', ['==', 'class', 'taxiway']], 'paint': {'line-color': '#e8e8e8', 'line-width': {'stops': [[13, 0.5], [14, 1], [15, 2], [16, 4]]}}}, {'id': 'tunnel_service_case', 'type': 'line', 'source': 'carto', 'source-layer': 'transportation', 'minzoom': 15, 'maxzoom': 24, 'filter': ['all', ['==', 'class', 'service'], ['==', 'brunnel', 'tunnel']], 'layout': {'line-cap': 'round', 'line-join': 'round'}, 'paint': {'line-width': {'stops': [[15, 1], [16, 3], [17, 6], [18, 8]]}, 'line-opacity': 1, 'line-color': '#ddd'}}, {'id': 'tunnel_minor_case', 'type': 'line', 'source': 'carto', 'source-layer': 'transportation', 'minzoom': 13, 'maxzoom': 24, 'filter': ['all', ['==', 'class', 'minor'], ['==', 'brunnel', 'tunnel']], 'layout': {'line-cap': 'butt', 'line-join': 'miter'}, 'paint': {'line-width': {'stops': [[11, 0.5], [12, 0.5], [14, 2], [15, 4], [16, 6], [17, 10], [18, 14]]}, 'line-opacity': 1, 'line-color': '#ddd'}}, {'id': 'tunnel_sec_case', 'type': 'line', 'source': 'carto', 'source-layer': 'transportation', 'minzoom': 11, 'maxzoom': 24, 'filter': ['all', ['in', 'class', 'secondary', 'tertiary'], ['==', 'brunnel', 'tunnel']], 'layout': {'line-cap': 'round', 'line-join': 'round'}, 'paint': {'line-width': {'stops': [[11, 0.5], [12, 1], [13, 2], [14, 5], [15, 6], [16, 8], [17, 12], [18, 16]]}, 'line-opacity': 1, 'line-color': '#ddd'}}, {'id': 'tunnel_pri_case', 'type': 'line', 'source': 'carto', 'source-layer': 'transportation', 'minzoom': 8, 'maxzoom': 24, 'filter': ['all', ['==', 'class', 'primary'], ['!=', 'ramp', 1], ['==', 'brunnel', 'tunnel']], 'layout': {'line-cap': 'butt', 'line-join': 'round'}, 'paint': {'line-width': {'stops': [[6, 0.5], [7, 0.8], [8, 1], [11, 3], [13, 4], [14, 6], [15, 8], [16, 10], [17, 14], [18, 18]]}, 'line-opacity': {'stops': [[5, 0.5], [7, 1]]}, 'line-color': '#ddd'}}, {'id': 'tunnel_trunk_case', 'type': 'line', 'source': 'carto', 'source-layer': 'transportation', 'minzoom': 5, 'maxzoom': 24, 'filter': ['all', ['==', 'class', 'trunk'], ['!=', 'ramp', 1], ['==', 'brunnel', 'tunnel']], 'layout': {'line-cap': 'butt', 'line-join': 'round', 'visibility': 'visible'}, 'paint': {'line-width': {'stops': [[6, 0.5], [7, 0.8], [8, 1], [11, 3], [13, 4], [14, 6], [15, 8], [16, 10], [17, 14], [18, 18]]}, 'line-opacity': {'stops': [[5, 0.5], [7, 1]]}, 'line-color': '#ddd'}}, {'id': 'tunnel_mot_case', 'type': 'line', 'source': 'carto', 'source-layer': 'transportation', 'minzoom': 5, 'maxzoom': 24, 'filter': ['all', ['==', 'class', 'motorway'], ['!=', 'ramp', 1], ['==', 'brunnel', 'tunnel']], 'layout': {'line-cap': 'butt', 'line-join': 'round'}, 'paint': {'line-width': {'stops': [[6, 0.5], [7, 0.8], [8, 1], [11, 3], [12, 4], [13, 5], [14, 7], [15, 9], [16, 11], [17, 13], [18, 22]]}, 'line-opacity': {'stops': [[6, 0.5], [7, 1]]}, 'line-color': '#ddd'}}, {'id': 'tunnel_path', 'type': 'line', 'source': 'carto', 'source-layer': 'transportation', 'minzoom': 15, 'maxzoom': 24, 'filter': ['all', ['==', 'class', 'path'], ['==', 'brunnel', 'tunnel']], 'layout': {'line-cap': 'round', 'line-join': 'round'}, 'paint': {'line-width': {'stops': [[15, 0.5], [16, 1], [18, 3]]}, 'line-opacity': 1, 'line-color': '#d5d5d5', 'line-dasharray': {'stops': [[15, [2, 2]], [18, [3, 3]]]}}}, {'id': 'tunnel_service_fill', 'type': 'line', 'source': 'carto', 'source-layer': 'transportation', 'minzoom': 15, 'maxzoom': 24, 'filter': ['all', ['==', 'class', 'service'], ['==', 'brunnel', 'tunnel']], 'layout': {'line-cap': 'round', 'line-join': 'round'}, 'paint': {'line-width': {'stops': [[15, 2], [16, 2], [17, 4], [18, 6]]}, 'line-opacity': 1, 'line-color': '#eee'}}, {'id': 'tunnel_minor_fill', 'type': 'line', 'source': 'carto', 'source-layer': 'transportation', 'minzoom': 15, 'maxzoom': 24, 'filter': ['all', ['==', 'class', 'minor'], ['==', 'brunnel', 'tunnel']], 'layout': {'line-cap': 'butt', 'line-join': 'round'}, 'paint': {'line-width': {'stops': [[15, 3], [16, 4], [17, 8], [18, 12]]}, 'line-opacity': 1, 'line-color': 'rgba(238, 238, 238, 1)'}}, {'id': 'tunnel_sec_fill', 'type': 'line', 'source': 'carto', 'source-layer': 'transportation', 'minzoom': 13, 'maxzoom': 24, 'filter': ['all', ['in', 'class', 'secondary', 'tertiary'], ['==', 'brunnel', 'tunnel']], 'layout': {'line-cap': 'round', 'line-join': 'round'}, 'paint': {'line-width': {'stops': [[11, 2], [13, 2], [14, 3], [15, 4], [16, 6], [17, 10], [18, 14]]}, 'line-opacity': 1, 'line-color': '#eee'}}, {'id': 'tunnel_pri_fill', 'type': 'line', 'source': 'carto', 'source-layer': 'transportation', 'minzoom': 11, 'maxzoom': 24, 'filter': ['all', ['==', 'class', 'primary'], ['!=', 'ramp', 1], ['==', 'brunnel', 'tunnel']], 'layout': {'line-cap': 'butt', 'line-join': 'round'}, 'paint': {'line-width': {'stops': [[11, 1], [13, 2], [14, 4], [15, 6], [16, 8], [17, 12], [18, 16]]}, 'line-opacity': 1, 'line-color': '#eee'}}, {'id': 'tunnel_trunk_fill', 'type': 'line', 'source': 'carto', 'source-layer': 'transportation', 'minzoom': 11, 'maxzoom': 24, 'filter': ['all', ['==', 'class', 'trunk'], ['!=', 'ramp', 1], ['==', 'brunnel', 'tunnel']], 'layout': {'line-cap': 'round', 'line-join': 'round', 'visibility': 'visible'}, 'paint': {'line-width': {'stops': [[11, 1], [13, 2], [14, 4], [15, 6], [16, 8], [17, 12], [18, 16]]}, 'line-opacity': 1, 'line-color': '#eee'}}, {'id': 'tunnel_mot_fill', 'type': 'line', 'source': 'carto', 'source-layer': 'transportation', 'minzoom': 10, 'maxzoom': 24, 'filter': ['all', ['==', 'class', 'motorway'], ['!=', 'ramp', 1], ['==', 'brunnel', 'tunnel']], 'layout': {'line-cap': 'butt', 'line-join': 'round'}, 'paint': {'line-width': {'stops': [[10, 1], [12, 2], [13, 3], [14, 5], [15, 7], [16, 9], [17, 11], [18, 20]]}, 'line-opacity': 1, 'line-color': '#eee'}}, {'id': 'tunnel_rail', 'type': 'line', 'source': 'carto', 'source-layer': 'transportation', 'minzoom': 13, 'filter': ['all', ['==', 'class', 'rail'], ['==', 'brunnel', 'tunnel']], 'layout': {'visibility': 'visible', 'line-join': 'round'}, 'paint': {'line-color': '#dddddd', 'line-width': {'base': 1.3, 'stops': [[13, 0.5], [14, 1], [15, 1], [16, 3], [21, 7]]}, 'line-opacity': 0.5}}, {'id': 'tunnel_rail_dash', 'type': 'line', 'source': 'carto', 'source-layer': 'transportation', 'minzoom': 15, 'filter': ['all', ['==', 'class', 'rail'], ['==', 'brunnel', 'tunnel']], 'layout': {'visibility': 'visible', 'line-join': 'round'}, 'paint': {'line-color': '#ffffff', 'line-width': {'base': 1.3, 'stops': [[15, 0.5], [16, 1], [20, 5]]}, 'line-dasharray': {'stops': [[15, [5, 5]], [16, [6, 6]]]}, 'line-opacity': 0.5}}, {'id': 'road_service_case', 'type': 'line', 'source': 'carto', 'source-layer': 'transportation', 'minzoom': 15, 'maxzoom': 24, 'filter': ['all', ['==', 'class', 'service'], ['!has', 'brunnel']], 'layout': {'line-cap': 'round', 'line-join': 'round'}, 'paint': {'line-width': {'stops': [[15, 1], [16, 3], [17, 6], [18, 8]]}, 'line-opacity': 1, 'line-color': '#ddd'}}, {'id': 'road_minor_case', 'type': 'line', 'source': 'carto', 'source-layer': 'transportation', 'minzoom': 13, 'maxzoom': 24, 'filter': ['all', ['==', 'class', 'minor'], ['!has', 'brunnel']], 'layout': {'line-cap': 'round', 'line-join': 'round'}, 'paint': {'line-width': {'stops': [[11, 0.5], [12, 0.5], [14, 2], [15, 3], [16, 4.3], [17, 10], [18, 14]]}, 'line-opacity': 1, 'line-color': {'stops': [[13, '#e6e6e6'], [15.7, '#e6e6e6'], [16, '#ddd']]}}}, {'id': 'road_pri_case_ramp', 'type': 'line', 'source': 'carto', 'source-layer': 'transportation', 'minzoom': 12, 'maxzoom': 24, 'filter': ['all', ['==', 'class', 'primary'], ['==', 'ramp', 1]], 'layout': {'line-cap': 'round', 'line-join': 'round'}, 'paint': {'line-width': {'stops': [[12, 2], [13, 3], [14, 4], [15, 5], [16, 8], [17, 10]]}, 'line-opacity': {'stops': [[5, 0.5], [7, 1]]}, 'line-color': '#ddd'}}, {'id': 'road_trunk_case_ramp', 'type': 'line', 'source': 'carto', 'source-layer': 'transportation', 'minzoom': 12, 'maxzoom': 24, 'filter': ['all', ['==', 'class', 'trunk'], ['==', 'ramp', 1]], 'layout': {'line-cap': 'round', 'line-join': 'round'}, 'paint': {'line-width': {'stops': [[12, 2], [13, 3], [14, 4], [15, 5], [16, 8], [17, 10]]}, 'line-opacity': 1, 'line-color': {'stops': [[12, '#e6e6e6'], [14, '#ddd']]}}}, {'id': 'road_mot_case_ramp', 'type': 'line', 'source': 'carto', 'source-layer': 'transportation', 'minzoom': 12, 'maxzoom': 24, 'filter': ['all', ['==', 'class', 'motorway'], ['==', 'ramp', 1]], 'layout': {'line-cap': 'round', 'line-join': 'round'}, 'paint': {'line-width': {'stops': [[12, 2], [13, 3], [14, 4], [15, 5], [16, 8], [17, 10]]}, 'line-opacity': 1, 'line-color': {'stops': [[12, '#e6e6e6'], [14, '#ddd']]}}}, {'id': 'road_sec_case_noramp', 'type': 'line', 'source': 'carto', 'source-layer': 'transportation', 'minzoom': 11, 'maxzoom': 24, 'filter': ['all', ['in', 'class', 'secondary', 'tertiary'], ['!has', 'brunnel']], 'layout': {'line-cap': 'round', 'line-join': 'round'}, 'paint': {'line-width': {'stops': [[11, 0.5], [12, 1.5], [13, 3], [14, 5], [15, 6], [16, 8], [17, 12], [18, 16]]}, 'line-opacity': 1, 'line-color': {'stops': [[11, '#e6e6e6'], [12.99, '#e6e6e6'], [13, '#ddd']]}}}, {'id': 'road_pri_case_noramp', 'type': 'line', 'source': 'carto', 'source-layer': 'transportation', 'minzoom': 7, 'maxzoom': 24, 'filter': ['all', ['==', 'class', 'primary'], ['!=', 'ramp', 1], ['!has', 'brunnel']], 'layout': {'line-cap': 'round', 'line-join': 'round'}, 'paint': {'line-width': {'stops': [[6, 0.5], [7, 0.8], [8, 1], [11, 3], [13, 4], [14, 6], [15, 8], [16, 10], [17, 14], [18, 18]]}, 'line-opacity': {'stops': [[5, 0.5], [7, 1]]}, 'line-color': {'stops': [[7, '#e6e6e6'], [12, '#ddd']]}}}, {'id': 'road_trunk_case_noramp', 'type': 'line', 'source': 'carto', 'source-layer': 'transportation', 'minzoom': 5, 'maxzoom': 24, 'filter': ['all', ['==', 'class', 'trunk'], ['!=', 'ramp', 1], ['!has', 'brunnel']], 'layout': {'line-cap': 'round', 'line-join': 'round'}, 'paint': {'line-width': {'stops': [[6, 0.5], [7, 0.8], [8, 1], [11, 3], [13, 4], [14, 6], [15, 8], [16, 10], [17, 14], [18, 18]]}, 'line-opacity': {'stops': [[5, 0.5], [7, 1]]}, 'line-color': {'stops': [[5, '#e6e6e6'], [12, '#ddd']]}}}, {'id': 'road_mot_case_noramp', 'type': 'line', 'source': 'carto', 'source-layer': 'transportation', 'minzoom': 5, 'maxzoom': 24, 'filter': ['all', ['==', 'class', 'motorway'], ['!=', 'ramp', 1], ['!has', 'brunnel']], 'layout': {'line-cap': 'round', 'line-join': 'round'}, 'paint': {'line-width': {'stops': [[6, 0.5], [7, 0.7], [8, 0.8], [11, 3], [12, 4], [13, 5], [14, 7], [15, 9], [16, 11], [17, 13], [18, 22]]}, 'line-opacity': {'stops': [[6, 0.5], [7, 1]]}, 'line-color': {'stops': [[5, '#e6e6e6'], [12, '#ddd']]}}}, {'id': 'road_path', 'type': 'line', 'source': 'carto', 'source-layer': 'transportation', 'minzoom': 15, 'maxzoom': 24, 'filter': ['all', ['in', 'class', 'path', 'track'], ['!has', 'brunnel']], 'layout': {'line-cap': 'round', 'line-join': 'round'}, 'paint': {'line-width': {'stops': [[15, 0.5], [16, 1], [18, 3]]}, 'line-opacity': 1, 'line-color': '#d5d5d5', 'line-dasharray': {'stops': [[15, [2, 2]], [18, [3, 3]]]}}}, {'id': 'road_service_fill', 'type': 'line', 'source': 'carto', 'source-layer': 'transportation', 'minzoom': 15, 'maxzoom': 24, 'filter': ['all', ['==', 'class', 'service'], ['!has', 'brunnel']], 'layout': {'line-cap': 'round', 'line-join': 'round'}, 'paint': {'line-width': {'stops': [[15, 2], [16, 2], [17, 4], [18, 6]]}, 'line-opacity': 1, 'line-color': '#fdfdfd'}}, {'id': 'road_minor_fill', 'type': 'line', 'source': 'carto', 'source-layer': 'transportation', 'minzoom': 15, 'maxzoom': 24, 'filter': ['all', ['==', 'class', 'minor'], ['!has', 'brunnel']], 'layout': {'line-cap': 'round', 'line-join': 'round'}, 'paint': {'line-width': {'stops': [[15, 3], [16, 4], [17, 8], [18, 12]]}, 'line-opacity': 1, 'line-color': '#fdfdfd'}}, {'id': 'road_pri_fill_ramp', 'type': 'line', 'source': 'carto', 'source-layer': 'transportation', 'minzoom': 12, 'maxzoom': 24, 'filter': ['all', ['==', 'class', 'primary'], ['==', 'ramp', 1]], 'layout': {'line-cap': 'round', 'line-join': 'round'}, 'paint': {'line-width': {'stops': [[12, 1], [13, 1.5], [14, 2], [15, 3], [16, 6], [17, 8]]}, 'line-opacity': 1, 'line-color': '#fff'}}, {'id': 'road_trunk_fill_ramp', 'type': 'line', 'source': 'carto', 'source-layer': 'transportation', 'minzoom': 12, 'maxzoom': 24, 'filter': ['all', ['==', 'class', 'trunk'], ['==', 'ramp', 1]], 'layout': {'line-cap': 'square', 'line-join': 'round'}, 'paint': {'line-width': {'stops': [[12, 1], [13, 1.5], [14, 2], [15, 3], [16, 6], [17, 8]]}, 'line-opacity': 1, 'line-color': '#fff'}}, {'id': 'road_mot_fill_ramp', 'type': 'line', 'source': 'carto', 'source-layer': 'transportation', 'minzoom': 12, 'maxzoom': 24, 'filter': ['all', ['==', 'class', 'motorway'], ['==', 'ramp', 1]], 'layout': {'line-cap': 'round', 'line-join': 'round'}, 'paint': {'line-width': {'stops': [[12, 1], [13, 1.5], [14, 2], [15, 3], [16, 6], [17, 8]]}, 'line-opacity': 1, 'line-color': '#fff'}}, {'id': 'road_sec_fill_noramp', 'type': 'line', 'source': 'carto', 'source-layer': 'transportation', 'minzoom': 13, 'maxzoom': 24, 'filter': ['all', ['in', 'class', 'secondary', 'tertiary'], ['!has', 'brunnel']], 'layout': {'line-cap': 'round', 'line-join': 'round'}, 'paint': {'line-width': {'stops': [[11, 2], [13, 2], [14, 3], [15, 4], [16, 6], [17, 10], [18, 14]]}, 'line-opacity': 1, 'line-color': '#fff'}}, {'id': 'road_pri_fill_noramp', 'type': 'line', 'source': 'carto', 'source-layer': 'transportation', 'minzoom': 10, 'maxzoom': 24, 'filter': ['all', ['==', 'class', 'primary'], ['!=', 'ramp', 1], ['!has', 'brunnel']], 'layout': {'line-cap': 'round', 'line-join': 'round'}, 'paint': {'line-width': {'stops': [[10, 0.3], [13, 2], [14, 4], [15, 6], [16, 8], [17, 12], [18, 16]]}, 'line-opacity': 1, 'line-color': '#fff'}}, {'id': 'road_trunk_fill_noramp', 'type': 'line', 'source': 'carto', 'source-layer': 'transportation', 'minzoom': 10, 'maxzoom': 24, 'filter': ['all', ['==', 'class', 'trunk'], ['!=', 'ramp', 1], ['!has', 'brunnel']], 'layout': {'line-cap': 'round', 'line-join': 'round'}, 'paint': {'line-width': {'stops': [[11, 1], [13, 2], [14, 4], [15, 6], [16, 8], [17, 12], [18, 16]]}, 'line-opacity': 1, 'line-color': '#fff'}}, {'id': 'road_mot_fill_noramp', 'type': 'line', 'source': 'carto', 'source-layer': 'transportation', 'minzoom': 10, 'maxzoom': 24, 'filter': ['all', ['==', 'class', 'motorway'], ['!=', 'ramp', 1], ['!has', 'brunnel']], 'layout': {'line-cap': 'round', 'line-join': 'round'}, 'paint': {'line-width': {'stops': [[10, 1], [12, 2], [13, 3], [14, 5], [15, 7], [16, 9], [17, 11], [18, 20]]}, 'line-opacity': 1, 'line-color': '#fff'}}, {'id': 'rail', 'type': 'line', 'source': 'carto', 'source-layer': 'transportation', 'minzoom': 13, 'filter': ['all', ['==', 'class', 'rail'], ['!=', 'brunnel', 'tunnel']], 'layout': {'visibility': 'visible', 'line-join': 'round'}, 'paint': {'line-color': '#dddddd', 'line-width': {'base': 1.3, 'stops': [[13, 0.5], [14, 1], [15, 1], [16, 3], [21, 7]]}}}, {'id': 'rail_dash', 'type': 'line', 'source': 'carto', 'source-layer': 'transportation', 'minzoom': 15, 'filter': ['all', ['==', 'class', 'rail'], ['!=', 'brunnel', 'tunnel']], 'layout': {'visibility': 'visible', 'line-join': 'round'}, 'paint': {'line-color': '#ffffff', 'line-width': {'base': 1.3, 'stops': [[15, 0.5], [16, 1], [20, 5]]}, 'line-dasharray': {'stops': [[15, [5, 5]], [16, [6, 6]]]}}}, {'id': 'bridge_service_case', 'type': 'line', 'source': 'carto', 'source-layer': 'transportation', 'minzoom': 15, 'maxzoom': 24, 'filter': ['all', ['==', 'class', 'service'], ['==', 'brunnel', 'bridge']], 'layout': {'line-cap': 'butt', 'line-join': 'round'}, 'paint': {'line-width': {'stops': [[15, 1], [16, 3], [17, 6], [18, 8]]}, 'line-opacity': 1, 'line-color': '#ddd'}}, {'id': 'bridge_minor_case', 'type': 'line', 'source': 'carto', 'source-layer': 'transportation', 'minzoom': 13, 'maxzoom': 24, 'filter': ['all', ['==', 'class', 'minor'], ['==', 'brunnel', 'bridge']], 'layout': {'line-cap': 'butt', 'line-join': 'miter'}, 'paint': {'line-width': {'stops': [[11, 0.5], [12, 0.5], [14, 2], [15, 3], [16, 4.3], [17, 10], [18, 14]]}, 'line-opacity': 1, 'line-color': {'stops': [[13, '#e6e6e6'], [15.7, '#e6e6e6'], [16, '#ddd']]}}}, {'id': 'bridge_sec_case', 'type': 'line', 'source': 'carto', 'source-layer': 'transportation', 'minzoom': 11, 'maxzoom': 24, 'filter': ['all', ['in', 'class', 'secondary', 'tertiary'], ['==', 'brunnel', 'bridge']], 'layout': {'line-cap': 'butt', 'line-join': 'miter'}, 'paint': {'line-width': {'stops': [[11, 0.5], [12, 1.5], [13, 3], [14, 5], [15, 6], [16, 8], [17, 12], [18, 16]]}, 'line-opacity': 1, 'line-color': {'stops': [[11, '#e6e6e6'], [12.99, '#e6e6e6'], [13, '#ddd']]}}}, {'id': 'bridge_pri_case', 'type': 'line', 'source': 'carto', 'source-layer': 'transportation', 'minzoom': 8, 'maxzoom': 24, 'filter': ['all', ['==', 'class', 'primary'], ['!=', 'ramp', 1], ['==', 'brunnel', 'bridge']], 'layout': {'line-cap': 'butt', 'line-join': 'round'}, 'paint': {'line-width': {'stops': [[6, 0.5], [7, 0.8], [8, 1], [11, 3], [13, 4], [14, 6], [15, 8], [16, 10], [17, 14], [18, 18]]}, 'line-opacity': {'stops': [[5, 0.5], [7, 1]]}, 'line-color': {'stops': [[8, '#e6e6e6'], [12, '#ddd']]}}}, {'id': 'bridge_trunk_case', 'type': 'line', 'source': 'carto', 'source-layer': 'transportation', 'minzoom': 5, 'maxzoom': 24, 'filter': ['all', ['==', 'class', 'trunk'], ['!=', 'ramp', 1], ['==', 'brunnel', 'bridge']], 'layout': {'line-cap': 'butt', 'line-join': 'round', 'visibility': 'visible'}, 'paint': {'line-width': {'stops': [[6, 0.5], [7, 0.8], [8, 1], [11, 3], [13, 4], [14, 6], [15, 8], [16, 10], [17, 14], [18, 18]]}, 'line-opacity': {'stops': [[5, 0.5], [7, 1]]}, 'line-color': {'stops': [[5, '#e6e6e6'], [12, '#ddd']]}}}, {'id': 'bridge_mot_case', 'type': 'line', 'source': 'carto', 'source-layer': 'transportation', 'minzoom': 5, 'maxzoom': 24, 'filter': ['all', ['==', 'class', 'motorway'], ['!=', 'ramp', 1], ['==', 'brunnel', 'bridge']], 'layout': {'line-cap': 'butt', 'line-join': 'round'}, 'paint': {'line-width': {'stops': [[6, 0.5], [7, 0.8], [8, 1], [11, 3], [12, 4], [13, 5], [14, 7], [15, 9], [16, 11], [17, 13], [18, 22]]}, 'line-opacity': {'stops': [[6, 0.5], [7, 1]]}, 'line-color': {'stops': [[5, '#e6e6e6'], [10, '#ddd']]}}}, {'id': 'bridge_path', 'type': 'line', 'source': 'carto', 'source-layer': 'transportation', 'minzoom': 15, 'maxzoom': 24, 'filter': ['all', ['==', 'class', 'path'], ['==', 'brunnel', 'bridge']], 'layout': {'line-cap': 'round', 'line-join': 'round'}, 'paint': {'line-width': {'stops': [[15, 0.5], [16, 1], [18, 3]]}, 'line-opacity': 1, 'line-color': '#d5d5d5', 'line-dasharray': {'stops': [[15, [2, 2]], [18, [3, 3]]]}}}, {'id': 'bridge_service_fill', 'type': 'line', 'source': 'carto', 'source-layer': 'transportation', 'minzoom': 15, 'maxzoom': 24, 'filter': ['all', ['==', 'class', 'service'], ['==', 'brunnel', 'bridge']], 'layout': {'line-cap': 'round', 'line-join': 'round'}, 'paint': {'line-width': {'stops': [[15, 2], [16, 2], [17, 4], [18, 6]]}, 'line-opacity': 1, 'line-color': '#fdfdfd'}}, {'id': 'bridge_minor_fill', 'type': 'line', 'source': 'carto', 'source-layer': 'transportation', 'minzoom': 15, 'maxzoom': 24, 'filter': ['all', ['==', 'class', 'minor'], ['==', 'brunnel', 'bridge']], 'layout': {'line-cap': 'butt', 'line-join': 'round'}, 'paint': {'line-width': {'stops': [[15, 3], [16, 4], [17, 8], [18, 12]]}, 'line-opacity': 1, 'line-color': '#fdfdfd'}}, {'id': 'bridge_sec_fill', 'type': 'line', 'source': 'carto', 'source-layer': 'transportation', 'minzoom': 13, 'maxzoom': 24, 'filter': ['all', ['in', 'class', 'secondary', 'tertiary'], ['==', 'brunnel', 'bridge']], 'layout': {'line-cap': 'round', 'line-join': 'round'}, 'paint': {'line-width': {'stops': [[11, 2], [13, 2], [14, 3], [15, 4], [16, 6], [17, 10], [18, 14]]}, 'line-opacity': 1, 'line-color': '#fff'}}, {'id': 'bridge_pri_fill', 'type': 'line', 'source': 'carto', 'source-layer': 'transportation', 'minzoom': 11, 'maxzoom': 24, 'filter': ['all', ['==', 'class', 'primary'], ['!=', 'ramp', 1], ['==', 'brunnel', 'bridge']], 'layout': {'line-cap': 'butt', 'line-join': 'round'}, 'paint': {'line-width': {'stops': [[11, 1], [13, 2], [14, 4], [15, 6], [16, 8], [17, 12], [18, 16]]}, 'line-opacity': 1, 'line-color': '#fff'}}, {'id': 'bridge_trunk_fill', 'type': 'line', 'source': 'carto', 'source-layer': 'transportation', 'minzoom': 11, 'maxzoom': 24, 'filter': ['all', ['==', 'class', 'trunk'], ['!=', 'ramp', 1], ['==', 'brunnel', 'bridge']], 'layout': {'line-cap': 'butt', 'line-join': 'round', 'visibility': 'visible'}, 'paint': {'line-width': {'stops': [[11, 1], [13, 2], [14, 4], [15, 6], [16, 8], [17, 12], [18, 16]]}, 'line-opacity': 1, 'line-color': '#fff'}}, {'id': 'bridge_mot_fill', 'type': 'line', 'source': 'carto', 'source-layer': 'transportation', 'minzoom': 10, 'maxzoom': 24, 'filter': ['all', ['==', 'class', 'motorway'], ['!=', 'ramp', 1], ['==', 'brunnel', 'bridge']], 'layout': {'line-cap': 'butt', 'line-join': 'round'}, 'paint': {'line-width': {'stops': [[10, 1], [12, 2], [13, 3], [14, 5], [15, 7], [16, 9], [17, 11], [18, 20]]}, 'line-opacity': 1, 'line-color': '#fff'}}, {'id': 'building', 'type': 'fill', 'source': 'carto', 'source-layer': 'building', 'layout': {'visibility': 'visible'}, 'paint': {'fill-color': {'base': 1, 'stops': [[15.5, '#dfdfdf'], [16, '#dfdfdf']]}, 'fill-antialias': True}}, {'id': 'building-top', 'type': 'fill', 'source': 'carto', 'source-layer': 'building', 'layout': {'visibility': 'visible'}, 'paint': {'fill-translate': {'base': 1, 'stops': [[14, [0, 0]], [16, [-2, -2]]]}, 'fill-outline-color': '#dfdfdf', 'fill-color': '#ededed', 'fill-opacity': {'base': 1, 'stops': [[13, 0], [16, 1]]}}}, {'id': 'boundary_country_outline', 'type': 'line', 'source': 'carto', 'source-layer': 'boundary', 'minzoom': 6, 'maxzoom': 24, 'filter': ['all', ['==', 'admin_level', 2], ['==', 'maritime', 0]], 'layout': {'line-cap': 'round', 'line-join': 'round'}, 'paint': {'line-color': '#f3efed', 'line-opacity': 0.5, 'line-width': 8, 'line-offset': 0}}, {'id': 'boundary_country_inner', 'type': 'line', 'source': 'carto', 'source-layer': 'boundary', 'minzoom': 0, 'filter': ['all', ['==', 'admin_level', 2], ['==', 'maritime', 0]], 'layout': {'line-cap': 'round', 'line-join': 'round'}, 'paint': {'line-color': {'stops': [[4, '#f2e6e7'], [5, '#ebd6d8'], [6, '#ebd6d8']]}, 'line-opacity': 1, 'line-width': {'stops': [[3, 1], [6, 1.5]]}, 'line-offset': 0}}], 'id': 'voyager', 'owner': 'Carto'}
Current DeckGL layers: 0

In [4]:

m

m

Out[4]:

Adding GeoJSON Layer¶

Let's add a GeoJSON layer showing airports around the world:

In [5]:

# Add airports GeoJSON layer
airports_url = (
    "https://d2ad6b4ur7yvpq.cloudfront.net/naturalearth-3.3.0/ne_10m_airports.geojson"
)

m.add_geojson_layer(
    layer_id="airports",
    geojson_data=airports_url,
    filled=True,
    pointRadiusMinPixels=2,
    pointRadiusScale=2000,
    getPointRadius="@@=11 - f.properties.scalerank",  # DeckGL expression
    getFillColor=[200, 0, 80, 180],
    pickable=True,
    autoHighlight=True,
)

print(f"Added airports layer. Total layers: {len(m.deckgl_layers)}")

# Add airports GeoJSON layer airports_url = ( "https://d2ad6b4ur7yvpq.cloudfront.net/naturalearth-3.3.0/ne_10m_airports.geojson" ) m.add_geojson_layer( layer_id="airports", geojson_data=airports_url, filled=True, pointRadiusMinPixels=2, pointRadiusScale=2000, getPointRadius="@@=11 - f.properties.scalerank", # DeckGL expression getFillColor=[200, 0, 80, 180], pickable=True, autoHighlight=True, ) print(f"Added airports layer. Total layers: {len(m.deckgl_layers)}")

Added airports layer. Total layers: 1

Adding Arc Layer¶

Now let's add an Arc layer showing connections from London to major airports. This will display curved lines connecting London to airports with scalerank < 4:

In [6]:

# Add arc layer showing connections from London
m.add_arc_layer(
    layer_id="arcs",
    data=airports_url,
    dataTransform="@@=d => d.features.filter(f => f.properties.scalerank < 4)",  # Filter major airports
    getSourcePosition="@@=f => [-0.4531566, 51.4709959]",  # London coordinates (function)
    getTargetPosition="@@=f => f.geometry.coordinates",  # Target airport coordinates
    getSourceColor=[0, 128, 200],
    getTargetColor=[200, 0, 80],
    getWidth=1,
    pickable=True,
)

print(f"Added arcs layer. Total layers: {len(m.deckgl_layers)}")

# Add arc layer showing connections from London m.add_arc_layer( layer_id="arcs", data=airports_url, dataTransform="@@=d => d.features.filter(f => f.properties.scalerank < 4)", # Filter major airports getSourcePosition="@@=f => [-0.4531566, 51.4709959]", # London coordinates (function) getTargetPosition="@@=f => f.geometry.coordinates", # Target airport coordinates getSourceColor=[0, 128, 200], getTargetColor=[200, 0, 80], getWidth=1, pickable=True, ) print(f"Added arcs layer. Total layers: {len(m.deckgl_layers)}")

Added arcs layer. Total layers: 2

Adding Scatterplot Layer¶

Let's also add a scatterplot layer with custom styling:

In [7]:

# Create sample data for scatterplot
sample_data = [
    {"position": [-0.1276, 51.5074], "name": "London", "size": 1000},
    {"position": [2.3522, 48.8566], "name": "Paris", "size": 800},
    {"position": [13.4050, 52.5200], "name": "Berlin", "size": 600},
    {"position": [12.4964, 41.9028], "name": "Rome", "size": 700},
    {"position": [-3.7038, 40.4168], "name": "Madrid", "size": 650},
]

m.add_scatterplot_layer(
    layer_id="cities",
    data=sample_data,
    get_position="@@=d.position",
    get_radius="@@=d.size",
    get_fill_color=[255, 140, 0, 200],
    radiusMinPixels=10,
    radiusMaxPixels=100,
    pickable=True,
)

print(f"Added cities scatterplot layer. Total layers: {len(m.deckgl_layers)}")

# Create sample data for scatterplot sample_data = [ {"position": [-0.1276, 51.5074], "name": "London", "size": 1000}, {"position": [2.3522, 48.8566], "name": "Paris", "size": 800}, {"position": [13.4050, 52.5200], "name": "Berlin", "size": 600}, {"position": [12.4964, 41.9028], "name": "Rome", "size": 700}, {"position": [-3.7038, 40.4168], "name": "Madrid", "size": 650}, ] m.add_scatterplot_layer( layer_id="cities", data=sample_data, get_position="@@=d.position", get_radius="@@=d.size", get_fill_color=[255, 140, 0, 200], radiusMinPixels=10, radiusMaxPixels=100, pickable=True, ) print(f"Added cities scatterplot layer. Total layers: {len(m.deckgl_layers)}")

Added cities scatterplot layer. Total layers: 3

Display the Map¶

Now let's display the interactive map (note: this will only work in a Jupyter environment with widget support):

In [8]:

# Display the map
m

# Display the map m

Out[8]:

Export to HTML¶

Let's export the map to a standalone HTML file that can be opened in any browser:

In [9]:

# Export to HTML
html_content = m.to_html(
    filename="deckgl_example_export.html",
    title="DeckGL Map Example - Airports and Cities",
    width="100%",
    height="600px",
)

print(f"HTML exported successfully!")
print(f"File saved as: deckgl_example_export.html")
print(f"HTML content length: {len(html_content)} characters")

# Export to HTML html_content = m.to_html( filename="deckgl_example_export.html", title="DeckGL Map Example - Airports and Cities", width="100%", height="600px", ) print(f"HTML exported successfully!") print(f"File saved as: deckgl_example_export.html") print(f"HTML content length: {len(html_content)} characters")

HTML exported successfully!
File saved as: deckgl_example_export.html
HTML content length: 87744 characters

Map Interaction Methods¶

The DeckGL map supports various interaction methods inherited from the MapLibre backend:

In [10]:

# Change map view
print("Current center:", m.center)
print("Current zoom:", m.zoom)

# Update map center and zoom
m.set_center(48.8566, 2.3522)  # Paris
m.set_zoom(6)

print("New center:", m.center)
print("New zoom:", m.zoom)

# Change map view print("Current center:", m.center) print("Current zoom:", m.zoom) # Update map center and zoom m.set_center(48.8566, 2.3522) # Paris m.set_zoom(6) print("New center:", m.center) print("New zoom:", m.zoom)

Current center: [51.47, 0.45]
Current zoom: 4.0
New center: [48.8566, 2.3522]
New zoom: 6.0

In [11]:

# Change bearing and pitch
m.set_bearing(45)
m.set_pitch(60)

print("New bearing:", m.bearing)
print("New pitch:", m.pitch)

# Change bearing and pitch m.set_bearing(45) m.set_pitch(60) print("New bearing:", m.bearing) print("New pitch:", m.pitch)

New bearing: 45.0
New pitch: 60.0

Layer Management¶

You can manage DeckGL layers dynamically:

In [12]:

# Show current layers
print("Current DeckGL layers:")
for i, layer in enumerate(m.deckgl_layers):
    print(
        f"  {i+1}. {layer.get('id', 'Unknown')} ({layer.get('@@type', 'Unknown type')})"
    )

# Remove a layer
m.remove_deckgl_layer("cities")
print(f"\nAfter removing cities layer: {len(m.deckgl_layers)} layers remaining")

# Show current layers print("Current DeckGL layers:") for i, layer in enumerate(m.deckgl_layers): print( f" {i+1}. {layer.get('id', 'Unknown')} ({layer.get('@@type', 'Unknown type')})" ) # Remove a layer m.remove_deckgl_layer("cities") print(f"\nAfter removing cities layer: {len(m.deckgl_layers)} layers remaining")

Current DeckGL layers:
  1. airports (GeoJsonLayer)
  2. arcs (ArcLayer)
  3. cities (ScatterplotLayer)

After removing cities layer: 2 layers remaining

In [13]:

# Add the cities layer back with different styling
m.add_scatterplot_layer(
    layer_id="cities_styled",
    data=sample_data,
    get_position="@@=d.position",
    get_radius="@@=d.size * 0.5",
    get_fill_color=[0, 255, 0, 180],  # Green color
    radiusMinPixels=5,
    radiusMaxPixels=50,
    pickable=True,
)

print(f"Added styled cities layer. Total layers: {len(m.deckgl_layers)}")

# Add the cities layer back with different styling m.add_scatterplot_layer( layer_id="cities_styled", data=sample_data, get_position="@@=d.position", get_radius="@@=d.size * 0.5", get_fill_color=[0, 255, 0, 180], # Green color radiusMinPixels=5, radiusMaxPixels=50, pickable=True, ) print(f"Added styled cities layer. Total layers: {len(m.deckgl_layers)}")

Added styled cities layer. Total layers: 3

Export Final Version¶

Let's export the final version with all our changes:

In [14]:

# Export final version
final_html = m.to_html(
    filename="deckgl_final_example.html",
    title="Final DeckGL Map - Airports, Arcs, and Cities",
    width="100%",
    height="800px",
)

print("Final HTML exported successfully!")
print("File saved as: deckgl_final_example.html")
print(f"Final map has {len(m.deckgl_layers)} DeckGL layers")
print(
    f"Final view: center={m.center}, zoom={m.zoom}, bearing={m.bearing}, pitch={m.pitch}"
)

# Export final version final_html = m.to_html( filename="deckgl_final_example.html", title="Final DeckGL Map - Airports, Arcs, and Cities", width="100%", height="800px", ) print("Final HTML exported successfully!") print("File saved as: deckgl_final_example.html") print(f"Final map has {len(m.deckgl_layers)} DeckGL layers") print( f"Final view: center={m.center}, zoom={m.zoom}, bearing={m.bearing}, pitch={m.pitch}" )

Final HTML exported successfully!
File saved as: deckgl_final_example.html
Final map has 3 DeckGL layers
Final view: center=[48.8566, 2.3522], zoom=6.0, bearing=45.0, pitch=60.0

Summary¶

This notebook demonstrated:

1. Basic DeckGL Map Creation: Creating a DeckGL map with custom styling and view settings
2. GeoJSON Layer: Adding interactive airport data with custom styling
3. Arc Layer: Visualizing connections between geographic points
4. Scatterplot Layer: Displaying point data with custom sizing and colors
5. Map Interaction: Changing view, bearing, and pitch programmatically
6. Layer Management: Adding and removing layers dynamically
7. HTML Export: Exporting interactive maps to standalone HTML files

The DeckGL backend provides powerful visualization capabilities while maintaining compatibility with the anymap framework. The exported HTML files can be shared and viewed in any modern web browser without requiring a Python environment.