From fc97c21f4ceaf565141aa80ee51cc6ab9f5dfe07 Mon Sep 17 00:00:00 2001 From: Stefan Kuethe Date: Fri, 31 May 2024 21:26:50 +0200 Subject: [PATCH] Update deck.gl docs --- docs/deckgl.md | 23 +++++++++++++++++++++++ docs/examples/deckgl_layer/app.html | 10 +++++----- docs/examples/deckgl_layer/app.py | 9 ++------- mkdocs.yml | 3 ++- 4 files changed, 32 insertions(+), 13 deletions(-) create mode 100644 docs/deckgl.md diff --git a/docs/deckgl.md b/docs/deckgl.md new file mode 100644 index 00000000..4ab27706 --- /dev/null +++ b/docs/deckgl.md @@ -0,0 +1,23 @@ +Deck.GL layers can be added to the map with `Map.add_deck_layers`. + +They are defined as a dictionary, where classes got the `@@type` prefix and getter props +the `@@=` prefix. They are inserted into the layer stack of the maplibre context. Therefore, +you can also pass a `beforeId` prop. + +Here is an example corredponding to the [Deck.GL GridLayer API Example](https://deck.gl/docs/api-reference/aggregation-layers/grid-layer): + +```python +grid_layer = { + "@@type": "GridLayer", # JS: new GridLayer + "id": "my-awsome-grid-layer", + "data": "https://raw.githubusercontent.com/visgl/deck.gl-data/master/website/sf-bike-parking.json", + "extruded": True, + "getPosition": "@@=COORDINATES", # JS: d => d.COORDINATES + "getColorWeight": "@@=SPACES", # JS: d => d.SPACES + "getElevationWeight": "@@=SPACES", # JS: d => d.SPACES + "elevationScale": 4, + "cellSize": 200, + "pickable": True, + "beforeId": "first-labels-layer" # optional + } +``` diff --git a/docs/examples/deckgl_layer/app.html b/docs/examples/deckgl_layer/app.html index 70ec36be..8c2db951 100644 --- a/docs/examples/deckgl_layer/app.html +++ b/docs/examples/deckgl_layer/app.html @@ -10,10 +10,10 @@
diff --git a/docs/examples/deckgl_layer/app.py b/docs/examples/deckgl_layer/app.py index 7a32e963..2a307d30 100644 --- a/docs/examples/deckgl_layer/app.py +++ b/docs/examples/deckgl_layer/app.py @@ -19,11 +19,10 @@ ) ) -layer_id = "GridLayer" deck_grid_layer = { - "@@type": layer_id, - "id": "GridLayer", + "@@type": "GridLayer", + "id": "MyAwesomeGridLayer", "data": "https://raw.githubusercontent.com/visgl/deck.gl-data/master/website/sf-bike-parking.json", "extruded": True, "getPosition": "@@=COORDINATES", @@ -45,14 +44,10 @@ def render_map(): return m -# @reactive.Effect -# @reactive.event(input.render_map_layer_GridLayer) @render.code def picking_object(): obj = input.render_map_layer_GridLayer() print(obj) - # return json.dumps(obj, indent=2) if obj else "Pick a feature!" - # return f"{obj['count']}" if obj else "Pick a feature!" return json.dumps(obj["points"], indent=2) if obj else "Pick a feature!" diff --git a/mkdocs.yml b/mkdocs.yml index b847ec5b..b07bb8cd 100644 --- a/mkdocs.yml +++ b/mkdocs.yml @@ -13,6 +13,7 @@ nav: - Get started: - Welcome to MapLibre: index.md - Layers: layers.md + - Deck.GL Layers: deckgl.md - Shiny: shiny.md - Jupyter: jupyter.md - Changelog: changelog.md @@ -34,7 +35,7 @@ nav: - Where is the ISS: examples/where_is_the_iss/index.md - WMS: examples/wms/index.md - Layer Order: examples/layer_order/index.md - - DeckGL Layer: examples/deckgl_layer/index.md + - Deck.GL Layer: examples/deckgl_layer/index.md plugins: - search: