Feature image overlay

src/Geometry/hyperleaflet-geometry-handler.js

@@ -27,7 +27,7 @@ function deleteNodeFromHyperleaflet(node, map) {
 }
 
 function changeNodeInHyperleaflet(change, map) {
-  const rowId = change.changes['data-id'];
+  const rowId = change['data-id'];
   // eslint-disable-next-line no-underscore-dangle
   const leafletLayers = Object.values(map._layers);
   const leafletObject = leafletLayers.find((layer) => layer.hlID === rowId);
@@ -50,8 +50,17 @@ export default function hyperleafletGeometryHandler(map, { addCallback = () => {
   }
 
   function changeNodesInHyperleaflet(changes) {
+    // changes is an array of changes and a dataset
     changes.forEach((change) => {
-      changeNodeInHyperleaflet(change, map);
+      // NOTE: Some changes have shape { node, changes }, but these seem to be related to add/remove
+      //       lifecycle events.
+      const { dataset, ...partialChanges } = change;
+      if (typeof dataset !== 'undefined') {
+        // Handle { dataset, { i: change } } format
+        Object.values(partialChanges).forEach((partialChange) => {
+          changeNodeInHyperleaflet({ ...partialChange, dataset }, map);
+        });
+      }
     });
   }
 

src/Geometry/index.js

@@ -37,7 +37,7 @@ function hyperleafletDataToMap(map) {
   hyperChangeDetection.observe({
     targetSelector: HYPERLEAFLET_DATA_SOURCE,
     uniqueAttribute: 'data-id',
-    attributeFilter: ['data-geometry'],
+    attributeFilter: ['data-geometry', 'data-l', 'data-image-url', 'data-image-bounds'],
   });
 
   hyperChangeDetection.subscribe(HYPERLEAFLET_DATA_SOURCE, 'node_adds', (data) => {

src/Geometry/leaflet-geometry.js

@@ -1,6 +1,6 @@
-import { GeoJSON, marker, polygon, polyline } from 'leaflet';
-import { setPointEvents, setPolyGeometryEvents } from './events';
-import hyperleafletConfig from '../config';
+import { GeoJSON, marker, polygon, polyline } from "leaflet";
+import { setPointEvents, setPolyGeometryEvents } from "./events";
+import hyperleafletConfig from "../config";
 
 const createPointGeometry = (parsedGeometry, options) => {
   const { reverseOrderAll, reverseOrder } = options;
@@ -28,7 +28,9 @@ function changePointGeometry(leafletObject, parsedGeometry, options) {
 const createLineGeometry = (parsedGeometry, options) => {
   const { reverseOrderAll, reverseOrder } = options;
   const isLonLat = reverseOrderAll || reverseOrder !== undefined;
-  const geometry = isLonLat ? GeoJSON.coordsToLatLngs(parsedGeometry, 0) : parsedGeometry;
+  const geometry = isLonLat
+    ? GeoJSON.coordsToLatLngs(parsedGeometry, 0)
+    : parsedGeometry;
   const leafletGeometry = polyline(geometry);
   if (options.popup) {
     leafletGeometry.bindPopup(options.popup);
@@ -43,15 +45,19 @@ const createLineGeometry = (parsedGeometry, options) => {
 function changeLineGeometry(leafletObject, parsedGeometry, options) {
   const { reverseOrderAll, reverseOrder } = options;
   const isLonLat = reverseOrderAll || reverseOrder !== undefined;
-  const geometry = isLonLat ? GeoJSON.coordsToLatLngs(parsedGeometry, 0) : parsedGeometry;
+  const geometry = isLonLat
+    ? GeoJSON.coordsToLatLngs(parsedGeometry, 0)
+    : parsedGeometry;
   leafletObject.setLatLngs(geometry);
   return leafletObject;
 }
 
 const createPolygonGeometry = (parsedGeometry, options) => {
   const { reverseOrderAll, reverseOrder } = options;
   const isLonLat = reverseOrderAll || reverseOrder !== undefined;
-  const geometry = isLonLat ? GeoJSON.coordsToLatLngs(parsedGeometry, 1) : parsedGeometry;
+  const geometry = isLonLat
+    ? GeoJSON.coordsToLatLngs(parsedGeometry, 1)
+    : parsedGeometry;
   const leafletGeometry = polygon(geometry);
   if (options.popup) {
     leafletGeometry.bindPopup(options.popup);
@@ -66,18 +72,20 @@ const createPolygonGeometry = (parsedGeometry, options) => {
 function changePolygonGeometry(leafletObject, parsedGeometry, options) {
   const { reverseOrderAll, reverseOrder } = options;
   const isLonLat = reverseOrderAll || reverseOrder !== undefined;
-  const geometry = isLonLat ? GeoJSON.coordsToLatLngs(parsedGeometry, 1) : parsedGeometry;
+  const geometry = isLonLat
+    ? GeoJSON.coordsToLatLngs(parsedGeometry, 1)
+    : parsedGeometry;
   leafletObject.setLatLngs(geometry);
   return leafletObject;
 }
 
 const createGeometry = (geometryType) => (parsedGeometry, options) => {
   switch (geometryType) {
-    case 'Point':
+    case "Point":
       return createPointGeometry(parsedGeometry, options);
-    case 'LineString':
+    case "LineString":
       return createLineGeometry(parsedGeometry, options);
-    case 'Polygon':
+    case "Polygon":
       return createPolygonGeometry(parsedGeometry, options);
     default:
       // eslint-disable-next-line no-console
@@ -92,12 +100,21 @@ function changeGeometry(leafletObject, change) {
   const { reverseOrderAll } = hyperleafletConfig;
 
   switch (geometryType) {
-    case 'Point':
-      return changePointGeometry(leafletObject, parsedGeometry, { ...change.dataset, reverseOrderAll });
-    case 'LineString':
-      return changeLineGeometry(leafletObject, parsedGeometry, { ...change.dataset, reverseOrderAll });
-    case 'Polygon':
-      return changePolygonGeometry(leafletObject, parsedGeometry, { ...change.dataset, reverseOrderAll });
+    case "Point":
+      return changePointGeometry(leafletObject, parsedGeometry, {
+        ...change.dataset,
+        reverseOrderAll,
+      });
+    case "LineString":
+      return changeLineGeometry(leafletObject, parsedGeometry, {
+        ...change.dataset,
+        reverseOrderAll,
+      });
+    case "Polygon":
+      return changePolygonGeometry(leafletObject, parsedGeometry, {
+        ...change.dataset,
+        reverseOrderAll,
+      });
     default:
       // eslint-disable-next-line no-console
       console.warn(`${geometryType} is not supported`);
@@ -106,20 +123,66 @@ function changeGeometry(leafletObject, change) {
 }
 
 export function createLeafletObject(dataset) {
+  // Image overlay
+  if ("l" in dataset) {
+    return createL(dataset);
+  }
+
+  // Geometry based L objects
   const { geometry, popup, tooltip, geometryType, id, reverseOrder } = dataset;
   const parsedGeometry = JSON.parse(geometry);
   const { reverseOrderAll } = hyperleafletConfig;
   const createGeometryFn = createGeometry(geometryType);
-  return createGeometryFn(parsedGeometry, { popup, tooltip, id, reverseOrderAll, reverseOrder });
+  return createGeometryFn(parsedGeometry, {
+    popup,
+    tooltip,
+    id,
+    reverseOrderAll,
+    reverseOrder,
+  });
+}
+
+/**
+ * Create a L.* leaflet object from HTML data-* attributes
+ */
+function createL(dataset) {
+  if (dataset.l.toLowerCase() === "imageoverlay") {
+    ["imageUrl", "imageBounds"].forEach((attr) => {
+      if (!dataset[attr]) {
+        throw new Error(`attribute ${attr} not specified`);
+      }
+    });
+    return L.imageOverlay(dataset.imageUrl, JSON.parse(dataset.imageBounds));
+  } else {
+    throw new Error(`data-l ${dataset.l} not supported`);
+  }
+}
+
+/**
+ * Create a L.* leaflet object attributes
+ */
+function changeL(leafletObject, change) {
+  switch (change.attribute.toLowerCase()) {
+    case "data-image-bounds":
+      return leafletObject.setBounds(JSON.parse(change.to));
+    case "data-image-url":
+      return leafletObject.setUrl(change.to);
+    default:
+      throw new Error(`change to ${change.attribute} not supported`);
+  }
 }
 
 export function changeLeafletObject(leafletObject, change) {
-  switch (change.attribute) {
-    case 'data-geometry': {
+  switch (change.attribute.toLowerCase()) {
+    case "data-geometry": {
       return changeGeometry(leafletObject, change);
     }
+    case "data-l":
+    case "data-image-url":
+    case "data-image-bounds":
+      return changeL(leafletObject, change);
     default: {
-      throw new Error('Parameter is not a number!');
+      throw new Error("Parameter is not a number!");
     }
   }
 }