Feature/slider control

_experimental/layer_switcher_control.py

@@ -3,7 +3,7 @@
 import json
 import webbrowser
 
-from maplibre import Map, MapOptions, render_maplibregl
+from maplibre import Layer, LayerType, Map, MapOptions, render_maplibregl
 from maplibre.basemaps import Carto
 from maplibre.controls import (
     ControlPosition,
@@ -12,6 +12,7 @@
     NavigationControl,
     ScaleControl,
 )
+from maplibre.sources import GeoJSONSource
 from shiny.express import input, render, ui
 
 m = Map(
@@ -23,23 +24,37 @@
         pitch=40,
     )
 )
+layer_id = "this-is-a-very-log-id-for-my-awesome-layer"
+m.add_layer(
+    Layer(
+        type=LayerType.LINE,
+        id=layer_id,
+        source=GeoJSONSource(
+            data="https://raw.githubusercontent.com/visgl/deck.gl-data/master/website/bart.geo.json"
+        ),
+        paint={"line-width": 4, "line-color": "red", "line-opacity": 0.55},
+    )
+)
 m.add_control(NavigationControl())
 m.add_control(ScaleControl(), ControlPosition.BOTTOM_LEFT)
 
-# m.add_call(
-#    "addControl",
-#    "InfoBoxControl",
-#    {
-#        "cssText": "padding: 20px; font-size: 20px;font-family: monospace;",
-#        "content": "<h1>Awesome control.</h1><p>And some text.</p>",
-#    },
-#    ControlPosition.TOP_LEFT.value,
-# )
+m.add_call(
+    "addControl",
+    "LayerOpacityControl",
+    {
+        "layerIds": ["water", layer_id],
+        "toggleLayers": True,
+        "flexDirection": None,
+        # "cssText": "padding: 20px; font-size: 20px;font-family: monospace;",
+        # "content": "<h1>Awesome control.</h1><p>And some text.</p>",
+    },
+    ControlPosition.TOP_LEFT.value,
+)
 
 m.add_control(InfoBoxControl(content="Toggle layers"), ControlPosition.TOP_LEFT)
 m.add_control(
     LayerSwitcherControl(
-        layer_ids=["water", "landcover"],
+        layer_ids=["water", layer_id],
         theme="default",
         # css_text="padding: 10px; border: 1px solid black; border-radius: 3x;font-size: 15px;",
     ),

srcjs/css/custom-opacity-control.css

@@ -0,0 +1,15 @@
+.layer-opacity-ctrl #menu {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  border-bottom: 1px solid black;
+  padding-bottom: 10px;
+}
+
+.layer-opacity-ctrl a {
+  background-color: #ffffff;
+  color: darkgrey;
+  border: 0;
+  text-decoration: none;
+  text-align: center;
+}

srcjs/custom-controls/layer-opacity.js

@@ -0,0 +1,85 @@
+import { createToggleLayerLink } from "../utils";
+
+import "../css/custom-opacity-control.css";
+
+function createLabel(layerId) {
+  const label = document.createElement("span");
+  label.innerHTML = layerId;
+  return label;
+}
+
+function getOpacityPropName(map, layerId) {
+  const layer = map.getLayer(layerId);
+  return `${layer.type}-opacity`;
+}
+
+function createSlider(
+  map,
+  layerId,
+  toggleLayers = false,
+  flexDirection = "column",
+) {
+  const label = toggleLayers
+    ? createToggleLayerLink(map, layerId)
+    : createLabel(layerId);
+  const slider = document.createElement("input");
+  slider.type = "range";
+  slider.min = "0";
+  slider.max = "1.0";
+  slider.step = "0.1";
+
+  // This might fail if layer is not already added to the map
+  // TODO: Put it in a try catch statement
+  const prop = getOpacityPropName(map, layerId);
+  const currentValue = map.getPaintProperty(layerId, prop) || 1;
+  console.log("currentValue", currentValue);
+  slider.value = currentValue;
+  // -------------------------
+
+  slider.style.width = "100px";
+  slider.oninput = function (e) {
+    const prop = getOpacityPropName(map, layerId);
+    const value = parseFloat(this.value);
+    console.log(prop, value);
+    map.setPaintProperty(layerId, prop, value);
+  };
+  const div = document.createElement("div");
+  div.id = "menu";
+  div.style.flexDirection = flexDirection;
+  if (div.style.flexDirection === "row") {
+    div.appendChild(slider);
+    div.appendChild(label);
+    return div;
+  }
+
+  div.appendChild(label);
+  div.appendChild(slider);
+  return div;
+}
+
+export default class LayerOpacityControl {
+  constructor(options) {
+    this._options = options;
+  }
+
+  onAdd(map) {
+    this._map = map;
+    this._container = document.createElement("div");
+    this._container.className =
+      "maplibregl-ctrl maplibregl-ctrl-group layer-switcher-ctrl-simple layer-opacity-ctrl";
+    this._container.style.cssText = this._options.cssText || "padding: 5px;";
+    const layerIds = this._options.layerIds || [];
+    const toggleLayers = this._options.toggleLayers || false;
+    const flexDirection = this._options.flexDirection || "column";
+    for (const layerId of layerIds) {
+      const slider = createSlider(map, layerId, toggleLayers, flexDirection);
+      this._container.appendChild(slider);
+    }
+    return this._container;
+  }
+
+  onRemove() {
+    this._container.parentNode.removeChild(this._container);
+    this._map = undefined;
+  }
+}

srcjs/pymaplibregl.js

@@ -5,8 +5,10 @@ maplibregl.addProtocol("pmtiles", protocol.tile);
 // Add custom controls
 import InfoBoxControl from "./custom-controls/info-box";
 import LayerSwitcherControl from "./custom-controls/layer-switcher";
+import LayerOpacityControl from "./custom-controls/layer-opacity";
 maplibregl.LayerSwitcherControl = LayerSwitcherControl;
 maplibregl.InfoBoxControl = InfoBoxControl;
+maplibregl.LayerOpacityControl = LayerOpacityControl;
 
 import {
   getTextFromFeature,

srcjs/utils.js

@@ -51,4 +51,36 @@ function getDeckMapLibrePopupTooltip(map, tooltip) {
   };
 }
 
-export { getTextFromFeature, getDeckTooltip, getDeckMapLibrePopupTooltip };
+// Used in controls
+function createToggleLayerLink(map, layerId) {
+  const link = document.createElement("a");
+  link.id = layerId;
+  link.href = "#";
+  link.textContent = layerId;
+  const visibility = map.getLayoutProperty(layerId, "visibility");
+  if (typeof visibility === "undefined" || visibility === "visible") {
+    link.className = "active";
+  }
+
+  link.onclick = function (e) {
+    const layerIdClicked = this.textContent;
+    const visibility = map.getLayoutProperty(layerIdClicked, "visibility");
+    console.log(layerIdClicked, visibility);
+    if (typeof visibility === "undefined" || visibility === "visible") {
+      map.setLayoutProperty(layerIdClicked, "visibility", "none");
+      this.className = "";
+      return;
+    }
+
+    map.setLayoutProperty(layerIdClicked, "visibility", "visible");
+    this.className = "active";
+  };
+  return link;
+}
+
+export {
+  getTextFromFeature,
+  getDeckTooltip,
+  getDeckMapLibrePopupTooltip,
+  createToggleLayerLink,
+};