@josephinumresearch/swagger-ui-map-plugin 1.0.4 → 1.0.5

package/src/formats/GeoTiff.js

@@ -0,0 +1,75 @@
+import GeoTIFF from "ol/source/GeoTIFF";
+import WebGLTileLayer from "ol/layer/WebGLTile";
+import Overlay from "ol/Overlay";
+import {transformExtent} from "ol/proj";
+
+export default async (olMap, content, config) => {
+
+
+    const visualSource = new GeoTIFF({
+        sources: [{blob: content}],
+        convertToRGB: config.convertToRGB ?? 'auto',
+        interpolate: false,
+    });
+
+    const visualLayer = new WebGLTileLayer({
+        source: visualSource,
+    });
+    olMap.addLayer(visualLayer);
+
+    const srcView = await visualSource.getView();
+    const dstView = await olMap.getView();
+
+    dstView.fit(
+        transformExtent(srcView.extent, srcView.projection, dstView.getProjection()),
+        {padding: [10, 10, 10, 10]}
+    );
+
+    // show value of pixel on mouse hover
+    if (config.showValuesOnHover) {
+        // this is a bit inefficient, but it's WebGL... maybe fix that in the future
+        const dataLayer = new WebGLTileLayer({
+            source: new GeoTIFF({
+                sources: [{blob: content}],
+                convertToRGB: false,
+                interpolate: false,
+                normalize: false
+            }),
+            opacity: 0
+        });
+        olMap.addLayer(dataLayer);
+
+        const tooltipEl = document.createElement('div');
+        tooltipEl.style.cssText = `
+        background: rgba(0, 0, 0, 0.8);
+        color: white;
+        padding: 4px 8px;
+        border-radius: 4px;
+        font-family: sans-serif;
+        font-size: 12px;
+        pointer-events: none;
+        white-space: nowrap;
+        z-index: 1000;
+    `;
+
+        const overlay = new Overlay({
+            element: tooltipEl,
+            offset: [10, 0],
+            positioning: 'bottom-left',
+        });
+        olMap.addOverlay(overlay);
+
+        olMap.on("pointermove", (event) => {
+            const data = dataLayer.getData(event.pixel);
+
+            if (data) {
+                tooltipEl.innerText = data.join ? `Value: ${data.join(', ')}` : `Value: ${data}`;
+                overlay.setPosition(event.coordinate);
+                tooltipEl.style.display = 'block';
+            } else {
+                tooltipEl.style.display = 'none';
+            }
+        });
+
+    }
+};

package/src/index.html

@@ -24,6 +24,14 @@
                             config: {
                                 defaultStrokeWidth: '4'
                             }
+                        },
+                        geotiff: {
+                            activationFnc: props => ['image/tiff', 'image/tif'].includes(props.contentType),
+                            format: 'GeoTiff',
+                            config: {
+                                convertToRGB: 'auto',
+                                showValuesOnHover: true
+                            }
                         }
                     }
                 })

package/webpack.config.js

@@ -31,7 +31,11 @@ module.exports = (env, argv) => ({
             react: 'react',
         },
         ({ context, request }, callback) => {
-            if (/^ol\/|^ol$/i.test(request)) {
+            if (/^ol\//i.test(request)) {
+                const path = request.replace(/^ol\//, '');
+                if (path.startsWith('source/GeoTIFF') || path.startsWith('layer/WebGLTile')) {
+                    return callback();
+                }
                 return callback(null, request.split('/'));
             }
             callback();
@@ -42,4 +46,4 @@ module.exports = (env, argv) => ({
             template: "src/index.html",
         })
     ] : []
-});
+});