Skip to content

Add deckgl layer

image image image

Add deck.gl layers

This source code of this example is adapted from the MapLibre GL JS example - Create deck.gl layer using REST API.

Uncomment the following line to install leafmap if needed.

1
# %pip install "leafmap[maplibre]"

1
import leafmap.maplibregl as leafmap

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
m = leafmap.Map(
    style="positron",
    center=(-122.4, 37.74),
    zoom=12,
    pitch=40,
)
deck_grid_layer = {
    "@@type": "GridLayer",
    "id": "GridLayer",
    "data": "https://raw.githubusercontent.com/visgl/deck.gl-data/master/website/sf-bike-parking.json",
    "extruded": True,
    "getPosition": "@@=COORDINATES",
    "getColorWeight": "@@=SPACES",
    "getElevationWeight": "@@=SPACES",
    "elevationScale": 4,
    "cellSize": 200,
    "pickable": True,
}

m.add_deck_layers([deck_grid_layer], tooltip="Number of points: {{ count }}")
m

1
m.set_deck_layer_properties("GridLayer", {"cellSize": 50, "elevationScale": 1})


 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
m = leafmap.Map(
    style="positron",
    center=(-123.13, 49.254),
    zoom=11,
    pitch=45,
)
deck_grid_layer = {
    "@@type": "GeoJsonLayer",
    "id": "GeoJsonLayer",
    "data": "https://raw.githubusercontent.com/visgl/deck.gl-data/master/examples/geojson/vancouver-blocks.json",
    "opacity": 0.8,
    "stroked": False,
    "filled": True,
    "extruded": True,
    "wireframe": True,
    "getElevation": "@@=properties.valuePerSqm / 20",
    "getFillColor": [255, 255, "@@=properties.growth * 255"],
    "getLineColor": [255, 255, 255],
}
m.add_deck_layers([deck_grid_layer])
m


1
import requests

1
2
3
data = requests.get(
    "https://d2ad6b4ur7yvpq.cloudfront.net/naturalearth-3.3.0/ne_10m_airports.geojson"
).json()

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
m = leafmap.Map(
    style="positron",
    center=(51.47, 0.45),
    zoom=1,
    pitch=30,
)
deck_geojson_layer = {
    "@@type": "GeoJsonLayer",
    "id": "airports",
    "data": data,
    "filled": True,
    "pointRadiusMinPixels": 2,
    "pointRadiusScale": 2000,
    "getPointRadius": "@@=11 - properties.scalerank",
    "getFillColor": [200, 0, 80, 180],
    "autoHighlight": True,
    "pickable": True,
}

deck_arc_layer = {
    "@@type": "ArcLayer",
    "id": "arcs",
    "data": [
        feature
        for feature in data["features"]
        if feature["properties"]["scalerank"] < 4
    ],
    "getSourcePosition": [-0.4531566, 51.4709959],  # London
    "getTargetPosition": "@@=geometry.coordinates",
    "getSourceColor": [0, 128, 200],
    "getTargetColor": [200, 0, 80],
    "getWidth": 2,
    "pickable": True,
}

m.add_deck_layers(
    [deck_geojson_layer, deck_arc_layer],
    tooltip={
        "airports": "{{ &properties.name }}",
        "arcs": "gps_code: {{ properties.gps_code }}",
    },
)
m


 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
url = "https://raw.githubusercontent.com/visgl/deck.gl-data/master/website/sf.h3cells.json"
response = requests.get(url)
data = response.json()

m = leafmap.Map(
    style="positron",
    center=(-122.4, 37.74),
    zoom=10,
    pitch=40,
)
deck_grid_layer = {
    "@@type": "H3HexagonLayer",
    "id": "my-layer",
    "data": data,
    "getHexagon": "@@=hex",
    "getFillColor": "@@=[255, (1 - count / 500) * 255, 0]",
    "getElevation": "@@=count * 10",
}

m.add_deck_layers([deck_grid_layer], tooltip="Number of points: {{ count }}")
m