Binary file client/src/assets/distancemarks-axis.png has changed

--- a/client/src/components/identify/Identify.vue	Fri Apr 12 12:29:00 2019 +0200
+++ b/client/src/components/identify/Identify.vue	Fri Apr 12 12:49:43 2019 +0200
@@ -164,7 +164,14 @@
     },
     featureId(feature) {
       // cut away everything from the last . to the end
-      return feature.getId().replace(/[.][^.]*$/, "");
+      let id = "";
+      if (feature.getId) {
+        id = feature.getId();
+      }
+      if (feature.id) {
+        id = feature.id;
+      }
+      return id.replace(/[.][^.]*$/, "");
     },
     featureLabel(feature) {
       if (formatter.hasOwnProperty(this.featureId(feature))) {

--- a/client/src/components/layers/LegendElement.vue	Fri Apr 12 12:29:00 2019 +0200
+++ b/client/src/components/layers/LegendElement.vue	Fri Apr 12 12:49:43 2019 +0200
@@ -24,6 +24,7 @@
 import { Vector as VectorSource } from "ol/source";
 import LineString from "ol/geom/LineString";
 import Point from "ol/geom/Point";
+import { HTTP } from "@/lib/http";
 
 export default {
   props: ["layer"],
@@ -64,7 +65,32 @@
     if (this.layer.getType() == "VECTOR") {
       this.initMap();
     } else {
-      // TODO other tiles
+      if (this.layer.get("id") === "OPENSTREETMAP" ||
+        this.layer.get("id") === "INLANDECDIS" ||
+        this.layer.get("id") === "BOTTLENECKISOLINE" ||
+        this.layer.get("id") === "DIFFERENCES"
+      ) {
+        // TODO: Do something useful?
+        return
+      }
+      let img = document.createElement("img")
+      img.setAttribute("style", "margin: 0 auto;display: flex;")
+      if (this.layer.get("id") === "DISTANCEMARKSAXIS") {
+        img.setAttribute("src", require("@/assets/distancemarks-axis.png"))
+      }
+      else {
+        // for simple WMS legends.
+        let url = `/internal/wms?REQUEST=GetLegendGraphic&VERSION=1.0.0&FORMAT=image/png&WIDTH=20&HEIGHT=20&LAYER=`+this.layer.getSource().getParams().LAYERS + `&legend_options=columns:4;fontAntiAliasing:true`
+        HTTP.get(url, {
+          headers: {
+            "X-Gemma-Auth": localStorage.getItem("token")
+          },
+          responseType: "blob"
+        }).then(response => {
+          img.setAttribute("src", URL.createObjectURL(response.data));
+        });
+      }
+      this.$el.appendChild(img);
     }
   },
   methods: {

--- a/client/src/components/map/layers.js	Fri Apr 12 12:29:00 2019 +0200
+++ b/client/src/components/map/layers.js	Fri Apr 12 12:49:43 2019 +0200
@@ -1,8 +1,9 @@
 import TileWMS from "ol/source/TileWMS";
-import { Tile as TileLayer, Vector as VectorLayer } from "ol/layer";
+import { Tile as TileLayer, Vector as VectorLayer, Image as ImageLayer } from "ol/layer";
 import OSM from "ol/source/OSM";
 import { Icon, Stroke, Style } from "ol/style";
 import VectorSource from "ol/source/Vector";
+import { ImageWMS as ImageSource } from "ol/source";
 import Point from "ol/geom/Point";
 import { bbox as bboxStrategy } from "ol/loadingstrategy";
 import { WFS, GeoJSON } from "ol/format";
@@ -354,26 +355,24 @@
           source
         });
       })(),
-      (function() {
-        const source = new VectorSource({ strategy: bboxStrategy });
-        source.setLoader(
-          buildVectorLoader(
-            {
-              featureTypes: ["distance_marks_geoserver"],
-              geometryName: "geom"
-            },
-            source
-          )
-        );
-        return new VectorLayer({
-          id: "DISTANCEMARKSAXIS",
-          label: "Distance marks, Axis",
-          forLegendStyle: { point: true, resolution: 8 },
-          visible: true,
-          style: styles.dma,
-          source
-        });
-      })(),
+      new ImageLayer({
+        id: "DISTANCEMARKSAXIS",
+        label: "Distance Marks, Axis",
+        source: new ImageSource({
+          url: window.location.origin + "/api/internal/wms",
+          params: { LAYERS: "distance_marks_geoserver", 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(

--- a/client/src/store/map.js	Fri Apr 12 12:29:00 2019 +0200
+++ b/client/src/store/map.js	Fri Apr 12 12:49:43 2019 +0200
@@ -23,6 +23,9 @@
 import { transformExtent } from "ol/proj";
 import bbox from "@turf/bbox";
 import app from "@/main";
+import { HTTP } from "@/lib/http";
+import Feature from "ol/Feature";
+import Point from "ol/geom/Point";
 
 const moveMap = ({ view, extent, zoom, preventZoomOut }) => {
   const currentZoom = view.getZoom();
@@ -79,6 +82,10 @@
     setIdentifiedFeatures: (state, identifiedFeatures) => {
       state.identifiedFeatures = identifiedFeatures;
     },
+    addIdentifiedFeatures: (state, identifiedFeatures) => {
+      state.identifiedFeatures = state.identifiedFeatures.concat(identifiedFeatures);
+      console.log(state.identifiedFeatures);
+    },
     setCurrentMeasurement: (state, measurement) => {
       state.currentMeasurement = measurement;
     },
@@ -332,10 +339,39 @@
             */
 
             // trying the GetFeatureInfo way for WMS
-            var wmsSource = state.openLayersMap
+            var dmaSource = state.openLayersMap
+              .getLayer("DISTANCEMARKSAXIS")
+              .getSource();
+            var dmaUrl = dmaSource.getGetFeatureInfoUrl(
+              event.coordinate,
+              100 /* resolution */,
+              "EPSG:3857",
+              // { INFO_FORMAT: "application/vnd.ogc.gml" } // not allowed by d4d
+              { INFO_FORMAT: "application/json" }
+            );
+
+            if (dmaUrl) {
+              HTTP.get(dmaUrl, {
+                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);
+              });
+            }
+            // trying the GetFeatureInfo way for WMS
+            var iecdisSource = state.openLayersMap
               .getLayer("INLANDECDIS")
               .getSource();
-            var url = wmsSource.getGetFeatureInfoUrl(
+            var iecdisUrl = iecdisSource.getGetFeatureInfoUrl(
               event.coordinate,
               100 /* resolution */,
               "EPSG:3857",
@@ -343,9 +379,9 @@
               { INFO_FORMAT: "text/plain" }
             );
 
-            if (url) {
+            if (iecdisUrl) {
               // cannot directly query here because of SOP
-              console.log("GetFeatureInfo url:", url);
+              console.log("GetFeatureInfo url:", iecdisUrl);
             }
           }
         );