Add cartography menu with image overlays (WIP)

webgis/js/gis.js

@@ -113,13 +113,12 @@ GIS.initMap = async function (mapId, zoomLevel = this.INIT_ZOOM) {
     let layerPaesistici = await this.loadGeoJSON('paesistici.geojson', optionsPaesistici);
 
     await this.addLayerGroups(map);
-
-    const historicCadastre = await this.imageOverlays();
+    await this.fetchCartographyLayers();
 
     const archeo = {
         'Vincoli archeologici' : layerVincoli,
         'Vincoli paesistici' : layerPaesistici,
-        'Catasto storico' : historicCadastre,
+        //'Catasto storico' : historicCadastre,
     };
     L.control.layers(baseMap, archeo).addTo(map);
 
@@ -128,35 +127,45 @@ GIS.initMap = async function (mapId, zoomLevel = this.INIT_ZOOM) {
     return map;
 }
 /**
- * Load georeferenced image overlays layer group
+ * Fetches references to cartography layers
+ * and updates GisState
  */
-GIS.imageOverlays = async function () {
-    const data = await this._fetchData('geoimage')
+GIS.fetchCartographyLayers = async function () {
+    const data = await this._fetchData('geoimages/menu')
         .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);
+    for (let item of data) {
+        let {id, label} = item;
+        GisState.cartography.historic.push({id, label});
     }
+}
+/**
+ * Load georeferenced image overlays layer group
+ * @param {Number} imageId - The API id of the georeferenced image
+ * @returns {L.ImageOverlay}
+ */
+GIS.getImageOverlay = async function (imageId) {
+    const imageData = await this._fetchData(`geoimages/${imageId}`)
+        .catch(error => console.error(`Could not fetch data for geo image ${imageId}: ${error}`));
 
-    return overlays;
+    let polygonCoords = JSON.parse(imageData.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/${imageData.filename}`,
+        bounds,
+        {
+            opacity: 0.8,
+            alt: `Immagine georeferita (${imageData.label})`,
+            label: `geoimage:${imageData.id}:${imageData.label}`,
+        }
+    );
+
+    return imageOverlay;
 }
 /**
  * Add layer groups to map