Remove dead tooltip code

Author: stfnkth

examples/standalone/gpd_polygons.py

@@ -8,5 +8,6 @@
 
 m.set_opacity("geopandas", 0.5)
 # m.set_visible("geopandas", False)
-
+m.add_call("addOverlay", (9.5, 51.31667), "Kassel", "background-color: white; padding: 5px; border-radius: 4px;")
+m.set_center((9.5, 51.31667))
 m.save()

src/openlayers/js/openlayers.anywidget.js

@@ -0,0 +1,54 @@
+// See also https://openlayers.org/en/latest/examples/tooltip-on-hover.html
+
+import { type Map } from "ol";
+import { type FeatureLike } from "ol/Feature";
+import Overlay from "ol/Overlay";
+
+type FeatureProps = {
+    [x: string]: any;
+}
+
+function createElement(cssText?: string | undefined): HTMLElement {
+    const el = document.createElement("div");
+    el.id = "ol-tooltip";
+    el.style.cssText = cssText || "padding: 5px; background-color: #333; color: #fff; border-radius: 4px; z-index: 100;"
+    el.style.visibility = "hidden";
+    return el;
+}
+
+function getFeatureProperties(feature: FeatureLike): FeatureProps {
+    let { geometry, ...props } = feature.getProperties();
+    return props;
+}
+
+function addTooltipTo(map: Map, prop: string): void {
+    let el = createElement();
+    const overlay = new Overlay({ element: el });
+    map.addOverlay(overlay);
+    let currentFeature: FeatureLike | undefined;
+    map.on('pointermove', (e) => {
+        if (e.dragging)
+            return;
+        const feature = map.forEachFeatureAtPixel(e.pixel, (feature) => {
+            return feature;
+        });
+        if (feature) {
+            el.style.visibility = "visible";
+            overlay.setPosition(e.coordinate);
+            if (feature !== currentFeature) {
+                console.log("feature props", getFeatureProperties(feature));
+                el.innerHTML = feature.get(prop)?.toString() || "";
+            }
+        } else {
+            el.style.visibility = "hidden";
+        }
+        currentFeature = feature;
+    });
+
+    map.getTargetElement().addEventListener("pointerleave", () => {
+        el.style.visibility = "hidden";
+        currentFeature = undefined;
+    });
+}
+
+export { addTooltipTo }

src/openlayers/js/openlayers.standalone.js

@@ -4,7 +4,7 @@ import GeoJSON from "ol/format/GeoJSON";
 import Overlay from "ol/Overlay";
 import { fromLonLat, transformExtent, useGeographic } from "ol/proj";
 import { JSONConverter } from "./json";
-import { addTooltip2 } from "./tooltip2";
+import { addTooltipToMap } from "./tooltip";
 
 // --- Types
 import type Layer from "ol/layer/Layer";
@@ -224,17 +224,18 @@ export default class MapWidget {
     }
   }
 
-  // TODO: Test only at the moment
-  addOverlay(position: Coordinate | undefined): void {
+  // ...
+  addOverlay(position: Coordinate | undefined, html: string, cssText: string | undefined, id: string = "ol-overlay"): void {
     const el = document.createElement("div");
-    el.style.cssText = "";
-    el.innerHTML = "We are out here."
+    el.id = id;
+    el.style.cssText = cssText || "";
+    el.innerHTML = html;
     const overlay = new Overlay({ element: el, position: position });
     this._map.addOverlay(overlay);
   }
 
   // ...
   addTooltip(template: string | null): void {
-    addTooltip2(this._map, template);
+    addTooltipToMap(this._map, template);
   }
 }

srcjs/_obsolete/tooltip-as-overlay.ts

@@ -1,54 +1,101 @@
-// See also https://openlayers.org/en/latest/examples/tooltip-on-hover.html
+/*
+taken from https://openlayers.org/en/latest/examples/tooltip-on-hover.html
+*/
+import { Map } from "ol";
+import type { FeatureLike } from "ol/Feature";
+import type { Pixel } from "ol/pixel";
 
-import { type Map } from "ol";
-import { type FeatureLike } from "ol/Feature";
-import Overlay from "ol/Overlay";
+import mustache from "mustache";
 
-type FeatureProps = {
-    [x: string]: any;
-}
+import { getFeatureProperties } from "./utils";
 
-function createElement(cssText?: string | undefined): HTMLElement {
-    const el = document.createElement("div");
-    el.id = "ol-tooltip";
-    el.style.cssText = cssText || "padding: 5px; background-color: #333; color: #fff; border-radius: 4px; z-index: 100;"
-    el.style.visibility = "hidden";
-    return el;
+/*
+#info {
+    position: absolute;
+    display: inline-block;
+    height: auto;
+    width: auto;
+    z-index: 100;
+    background-color: #333;
+    color: #fff;
+    text-align: center;
+    border-radius: 4px;
+    padding: 5px;
+    left: 50%;
+    transform: translateX(3%);
+    visibility: hidden;
+    pointer-events: none;
 }
+*/
+
+const info = document.createElement("div");
+info.style.position = "absolute";
+info.style.display = "inline-block";
+info.style.height = "auto";
+info.style.width = "auto";
+info.style.zIndex = "100";
+info.style.backgroundColor = "#333";
+info.style.color = "#fff";
+// info.style.textAlign = "center";
+info.style.borderRadius = "4px";
+info.style.padding = "7px";
+info.style.left = "50%";
+// info.style.transform = "translateX(3%)";
+info.style.visibility = "hidden";
+info.style.pointerEvents = "none";
+
+function renderFeatureProperties(feature: FeatureLike, template: string | null): string {
+    const properties = getFeatureProperties(feature);
+    if (template)
+        return mustache.render(template, properties);
 
-function getFeatureProperties(feature: FeatureLike): FeatureProps {
-    let { geometry, ...props } = feature.getProperties();
-    return props;
+    return Object.keys(properties).map((key) => `${key}: ${properties[key]}`).join("</br>");
 }
 
-function addTooltipTo(map: Map, prop: string): void {
-    let el = createElement();
-    const overlay = new Overlay({ element: el });
-    map.addOverlay(overlay);
+function addTooltipToMap(map: Map, template: string | null): void {
+    info.id = "ol-tooltip";
+    map.getTargetElement().appendChild(info);
+    console.log("tooltip element added", info);
+
     let currentFeature: FeatureLike | undefined;
-    map.on('pointermove', (e) => {
-        if (e.dragging)
-            return;
-        const feature = map.forEachFeatureAtPixel(e.pixel, (feature) => {
-            return feature;
-        });
+    const displayFeatureInfo = function (pixel: Pixel, target: EventTarget | null) {
+        // @ts-expect-error
+        const feature = target.closest('.ol-control')
+            ? undefined
+            : map.forEachFeatureAtPixel(pixel, function (feature) {
+                return feature;
+            });
         if (feature) {
-            el.style.visibility = "visible";
-            overlay.setPosition(e.coordinate);
+            // console.log("feature props", getFeatureProperties(feature));
+            info.style.left = (pixel[0] + 15) + 'px';
+            info.style.top = pixel[1] + 'px';
             if (feature !== currentFeature) {
-                console.log("feature props", getFeatureProperties(feature));
-                el.innerHTML = feature.get(prop)?.toString() || "";
+                info.style.visibility = 'visible';
+                info.innerHTML = renderFeatureProperties(feature, template);
             }
         } else {
-            el.style.visibility = "hidden";
+            info.style.visibility = 'hidden';
         }
         currentFeature = feature;
+    };
+
+    map.on('pointermove', function (evt) {
+        if (evt.dragging) {
+            info.style.visibility = 'hidden';
+            currentFeature = undefined;
+            return;
+        }
+        displayFeatureInfo(evt.pixel, evt.originalEvent.target);
+    });
+
+    map.on('click', function (evt) {
+        displayFeatureInfo(evt.pixel, evt.originalEvent.target);
     });
 
-    map.getTargetElement().addEventListener("pointerleave", () => {
-        el.style.visibility = "hidden";
+    map.getTargetElement().addEventListener('pointerleave', function () {
         currentFeature = undefined;
+        info.style.visibility = 'hidden';
     });
 }
 
-export { addTooltipTo }
+export { addTooltipToMap };