Add image overlays

.gitignore

@@ -15,4 +15,7 @@ shapefile
 config.js
 # Don't track shperical photos
 webgis/img/spherical/*.png
+# Don't track georeferenced images
+webgis/img/geo/*
+!webgis/img/geo/.keep
 *Zone*Identifier

webgis/js/gis.js

@@ -114,9 +114,12 @@ GIS.initMap = async function (mapId, zoomLevel = this.INIT_ZOOM) {
 
     await this.addLayerGroups(map);
 
+    const historicCadastre = await this.imageOverlays();
+
     const archeo = {
         'Vincoli archeologici' : layerVincoli,
         'Vincoli paesistici' : layerPaesistici,
+        'Catasto storico' : historicCadastre,
     };
     L.control.layers(baseMap, archeo).addTo(map);
 
@@ -124,6 +127,37 @@ GIS.initMap = async function (mapId, zoomLevel = this.INIT_ZOOM) {
 
     return map;
 }
+/**
+ * Load georeferenced image overlays layer group
+ */
+GIS.imageOverlays = async function () {
+    const data = await this._fetchData('geoimage')
+        .catch(error => console.error(`Could not fetch data for geo images: ${error}`));
+
+    const overlays = L.layerGroup();
+
+    for (let image of data) {
+        let polygonCoords = JSON.parse(image.polygon).coordinates[0];
+        // Image rectangle bounds are SE and NW coordinates from the PostGIS polygon
+        // with long/lat swapped...
+        const se = [polygonCoords[0][1], polygonCoords[0][0]];
+        const nw = [polygonCoords[2][1], polygonCoords[2][0]];
+        const bounds = [se, nw];
+
+        const imageOverlay = L.imageOverlay(
+            `/webgis/img/geo/${image.filename}`,
+            bounds,
+            {
+                opacity: 0.8,
+                alt: `Immagine georeferita dal catasto storico di Capri`
+            }
+        );
+
+        overlays.addLayer(imageOverlay);
+    }
+
+    return overlays;
+}
 /**
  * Add layer groups to map
  */