# HG changeset patch
# User Raimund Renkert <raimund.renkert@intevation.de>
# Date 1555334116 -7200
# Node ID e0b77d7463e781152dc99e12a7f2f4c220c84a14
# Parent  c764c73f44b43a45f9004fc802910abb04dede16
Changed Waterway axis and area layer to WMS.

diff -r c764c73f44b4 -r e0b77d7463e7 client/src/components/map/layers.js
--- a/client/src/components/map/layers.js	Mon Apr 15 13:47:12 2019 +0200
+++ b/client/src/components/map/layers.js	Mon Apr 15 15:15:16 2019 +0200
@@ -84,30 +84,26 @@
           params: { LAYERS: "d4d", VERSION: "1.1.1", TILED: true }
         })
       }),
-      (function() {
-        const source = new VectorSource({ strategy: bboxStrategy });
-        source.setLoader(
-          buildVectorLoader(
-            {
-              featureTypes: ["waterway_area"],
-              geometryName: "area"
-            },
-            source
-          )
-        );
-        return new VectorLayer({
-          id: "WATERWAYAREA",
-          label: "Waterway Area",
-          visible: true,
-          style: new Style({
-            stroke: new Stroke({
-              color: "rgba(0, 102, 0, 1)",
-              width: 2
-            })
-          }),
-          source
-        });
-      })(),
+      new ImageLayer({
+        id: "WATERWAYAREA",
+        label: "Waterway Area",
+        maxResolution: 100,
+        minResolution: 0,
+        source: new ImageSource({
+          url: window.location.origin + "/api/internal/wms",
+          params: { LAYERS: "waterway_area", VERSION: "1.1.1", TILED: true },
+          imageLoadFunction: function(tile, src) {
+            HTTP.get(src, {
+              headers: {
+                "X-Gemma-Auth": localStorage.getItem("token")
+              },
+              responseType: "blob"
+            }).then(response => {
+              tile.getImage().src = URL.createObjectURL(response.data);
+            });
+          } // TODO  tile.setState(TileState.ERROR);
+        })
+      }),
       (function() {
         const source = new VectorSource({ strategy: bboxStrategy });
         source.setLoader(
@@ -199,35 +195,24 @@
           source
         });
       })(),
-      (function() {
-        const source = new VectorSource({ strategy: bboxStrategy });
-        source.setLoader(
-          buildVectorLoader(
-            {
-              featureTypes: ["waterway_axis"],
-              geometryName: "wtwaxs"
-            },
-            source
-          )
-        );
-        return new VectorLayer({
-          id: "WATERWAYAXIS",
-          label: "Waterway Axis",
-          visible: true,
-          style: new Style({
-            stroke: new Stroke({
-              color: "rgba(0, 0, 255, .5)",
-              lineDash: [5, 5],
-              width: 2
-            })
-          }),
-          // TODO: Set layer in layertree active/inactive depending on
-          // resolution.
-          maxResolution: 5,
-          minResolution: 0,
-          source
-        });
-      })(),
+      new ImageLayer({
+        id: "WATERWAYAXIS",
+        label: "Waterway Axis",
+        source: new ImageSource({
+          url: window.location.origin + "/api/internal/wms",
+          params: { LAYERS: "waterway_axis", VERSION: "1.1.1", TILED: true },
+          imageLoadFunction: function(tile, src) {
+            HTTP.get(src, {
+              headers: {
+                "X-Gemma-Auth": localStorage.getItem("token")
+              },
+              responseType: "blob"
+            }).then(response => {
+              tile.getImage().src = URL.createObjectURL(response.data);
+            });
+          } // TODO  tile.setState(TileState.ERROR);
+        })
+      }),
       (function() {
         const source = new VectorSource({ strategy: bboxStrategy });
         source.setLoader(
diff -r c764c73f44b4 -r e0b77d7463e7 client/src/store/map.js
--- a/client/src/store/map.js	Mon Apr 15 13:47:12 2019 +0200
+++ b/client/src/store/map.js	Mon Apr 15 15:15:16 2019 +0200
@@ -324,7 +324,64 @@
             }
             */
 
-            // trying the GetFeatureInfo way for WMS
+            var waterwayAxisSource = getters.openLayersMap
+              .getLayer("WATERWAYAXIS")
+              .getSource();
+            var waxisUrl = waterwayAxisSource.getGetFeatureInfoUrl(
+              event.coordinate,
+              100 /* resolution */,
+              "EPSG:3857",
+              // { INFO_FORMAT: "application/vnd.ogc.gml" } // not allowed by d4d
+              { INFO_FORMAT: "application/json" }
+            );
+
+            if (waxisUrl) {
+              // cannot directly query here because of SOP
+              HTTP.get(waxisUrl, {
+                headers: {
+                  "X-Gemma-Auth": localStorage.getItem("token")
+                }
+              }).then(response => {
+                let features = response.data.features.map(f => {
+                  let feat = new Feature({
+                    geometry: new Point(f.geometry.coordinates)
+                  });
+                  feat.setId(f.id);
+                  feat.setProperties(f.properties);
+                  return feat;
+                });
+                commit("addIdentifiedFeatures", features);
+              });
+            }
+            var waterwayAreaSource = getters.openLayersMap
+              .getLayer("WATERWAYAREA")
+              .getSource();
+            var wareaUrl = waterwayAreaSource.getGetFeatureInfoUrl(
+              event.coordinate,
+              100 /* resolution */,
+              "EPSG:3857",
+              // { INFO_FORMAT: "application/vnd.ogc.gml" } // not allowed by d4d
+              { INFO_FORMAT: "application/json" }
+            );
+
+            if (wareaUrl) {
+              // cannot directly query here because of SOP
+              HTTP.get(wareaUrl, {
+                headers: {
+                  "X-Gemma-Auth": localStorage.getItem("token")
+                }
+              }).then(response => {
+                let features = response.data.features.map(f => {
+                  let feat = new Feature({
+                    geometry: new Point(f.geometry.coordinates)
+                  });
+                  feat.setId(f.id);
+                  feat.setProperties(f.properties);
+                  return feat;
+                });
+                commit("addIdentifiedFeatures", features);
+              });
+            }
             var dmaSource = getters.openLayersMap
               .getLayer("DISTANCEMARKSAXIS")
               .getSource();