--- 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(