Add deckgl layer

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.

In [ ]:

# %pip install "leafmap[maplibre]"

# %pip install "leafmap[maplibre]"

In [ ]:

import leafmap.maplibregl as leafmap

import leafmap.maplibregl as leafmap

In [ ]:

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

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

In [ ]:

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

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

In [ ]:

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

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

In [ ]:

import requests

import requests

In [ ]:

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

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

In [ ]:

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

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

In [ ]:

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

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