Merge pull request #50 from eodaGmbH/feature/add-layer-before-id

Add 'before_id' param to 'add_layer'

docs/examples/layer_order/app.py

@@ -0,0 +1,48 @@
+# Shiny Express App
+
+import requests as req
+from maplibre import Layer, LayerType, Map, MapOptions, render_maplibregl
+from maplibre.basemaps import Carto, construct_carto_basemap_url
+from maplibre.sources import GeoJSONSource
+from shiny.express import input, render, ui
+
+style = req.get(construct_carto_basemap_url(Carto.VOYAGER)).json()
+
+
+symbol_ids = [layer["id"] for layer in style["layers"] if layer["type"] == "symbol"]
+# print(symbol_ids)
+
+urban_areas = GeoJSONSource(
+    data="https://d2ad6b4ur7yvpq.cloudfront.net/naturalearth-3.3.0/ne_50m_urban_areas.geojson"
+)
+
+m = Map(
+    MapOptions(
+        style=style,
+        center=(-89.928, 35.204),
+        # center=(-88.13734351262877, 35.137451890638886),
+        zoom=9,
+        hash=True,
+    )
+)
+m.add_layer(
+    Layer(
+        id="urban-areas-fill",
+        type=LayerType.FILL,
+        source=urban_areas,
+        paint={"fill-color": "pink", "fill-opacity": 1.0},
+    ),
+    before_id=symbol_ids[0],
+)
+for symbol_id in symbol_ids:
+    m.set_paint_property(symbol_id, "text-color", "purple")
+
+
+@render_maplibregl
+def render_map():
+    return m
+
+
+if __name__ == "__main__":
+    with open("docs/examples/layer_order/app.html", "w") as f:
+        f.write(m.to_html())

docs/examples/layer_order/index.md

@@ -0,0 +1,13 @@
+Add a data layer below the labels of the basemap.
+
+<iframe src="app.html" height="620px", width="100%" style="border:none;"></iframe>
+
+```python
+-8<-- "layer_order/app.py"
+```
+
+Run example:
+
+```bash
+poetry run shiny run docs/examples/layer_order/app.py
+```

maplibre/map.py

@@ -133,22 +133,30 @@ def add_control(
         )
 
     def add_source(self, id: str, source: [Source | dict]) -> None:
-        """Add a source to the map"""
+        """Add a source to the map
+
+        Args:
+            id (str): The unique ID of the source.
+            source (Source | dict): The source to be added to the map.
+        """
         if isinstance(source, Source):
             source = source.to_dict()
 
         self.add_call("addSource", id, source)
 
-    def add_layer(self, layer: [Layer | dict]) -> None:
+    def add_layer(self, layer: [Layer | dict], before_id: str = None) -> None:
         """Add a layer to the map
 
         Args:
             layer (Layer | dict): The Layer to be added to the map.
+            before_id (str): The ID of an existing layer to insert the new layer before,
+                resulting in the new layer appearing visually beneath the existing layer.
+                If `None`, the new layer will appear above all other layers.
         """
         if isinstance(layer, Layer):
             layer = layer.to_dict()
 
-        self.add_call("addLayer", layer)
+        self.add_call("addLayer", layer, before_id)
 
     def add_marker(self, marker: Marker) -> None:
         """Add a marker to the map

mkdocs.yml

@@ -33,6 +33,7 @@ nav:
       - H3 Grid UK Road Safety: examples/road_safety/index.md
       - Where is the ISS: examples/where_is_the_iss/index.md
       - WMS: examples/wms/index.md
+      - Layer Order: examples/layer_order/index.md
 
 plugins:
   - search:

pyproject.toml

@@ -1,6 +1,6 @@
 [tool.poetry]
 name = "maplibre"
-version = "0.1.5"
+version = "0.1.5.1"
 description = "Python bindings for MapLibre GL JS"
 authors = ["Stefan Kuethe <[email protected]>"]
 readme = "README.md"

srcjs/pymaplibregl.js

@@ -41,8 +41,8 @@ export default class PyMapLibreGL {
     marker.addTo(this._map);
   }
 
-  addLayer(layer) {
-    this._map.addLayer(layer);
+  addLayer(layer, beforeId) {
+    this._map.addLayer(layer, beforeId);
 
     // Add event listener
     if (typeof Shiny !== "undefined") {