--- a/client/src/store/map.js	Thu Nov 01 10:19:55 2018 +0100
+++ b/client/src/store/map.js	Fri Nov 02 08:10:58 2018 +0100
@@ -15,13 +15,203 @@
 
 //import { HTTP } from "../lib/http";
 
-import { layers } from "../layers/layers";
+import TileWMS from "ol/source/TileWMS.js";
+import { Tile as TileLayer, Vector as VectorLayer } from "ol/layer.js";
+import OSM from "ol/source/OSM";
+import { Stroke, Style, Fill, Text, Circle as CircleStyle } from "ol/style.js";
+import VectorSource from "ol/source/Vector.js";
+import { bbox as bboxStrategy } from "ol/loadingstrategy";
+import { HTTP } from "../application/lib/http";
 
 const MapStore = {
   namespaced: true,
   state: {
     openLayersMap: null,
-    layers: layers
+    layers: [
+      {
+        name: "Open Streetmap",
+        data: new TileLayer({
+          source: new OSM()
+        }),
+        isVisible: true
+      },
+      {
+        name: "Inland ECDIS chart Danube",
+        data: new TileLayer({
+          source: new TileWMS({
+            preload: 1,
+            url: "https://demo.d4d-portal.info/wms",
+            params: { LAYERS: "d4d", VERSION: "1.1.1", TILED: true }
+          })
+        }),
+        isVisible: true
+      },
+      {
+        name: "Fairway Dimensions",
+        data: new VectorLayer({
+          source: new VectorSource(),
+          style: function(feature) {
+            return [
+              new Style({
+                stroke: new Stroke({
+                  color: "rgba(0, 0, 255, 1.0)",
+                  width: 2
+                })
+              }),
+              new Style({
+                text: new Text({
+                  font: 'bold 12px "Open Sans", "sans-serif"',
+                  placement: "line",
+                  fill: new Fill({
+                    color: "black"
+                  }),
+                  text: "LOS: " + feature.get("level_of_service").toString()
+                  //, zIndex: 10
+                })
+              })
+            ];
+          }
+        }),
+        isVisible: true
+      },
+      {
+        name: "Waterway Area, named",
+        data: new VectorLayer({
+          source: new VectorSource({
+            strategy: bboxStrategy
+          }),
+          style: new Style({
+            stroke: new Stroke({
+              color: "rgba(0, 132, 0, 1)",
+              width: 2
+            })
+          })
+        }),
+        isVisible: false
+      },
+      {
+        name: "Waterway Area",
+        data: new VectorLayer({
+          source: new VectorSource({
+            strategy: bboxStrategy
+          }),
+          style: new Style({
+            stroke: new Stroke({
+              color: "rgba(0, 102, 0, 1)",
+              width: 2
+            })
+          })
+        }),
+        isVisible: true
+      },
+      {
+        name: "Waterway Axis",
+        data: new VectorLayer({
+          source: new VectorSource({
+            strategy: bboxStrategy
+          }),
+          style: new Style({
+            stroke: new Stroke({
+              color: "rgba(0, 0, 255, .5)",
+              lineDash: [5, 5],
+              width: 2
+            })
+          })
+        }),
+        isVisible: true
+      },
+      {
+        name: "Distance marks",
+        forLegendStyle: { point: true, resolution: 8 },
+        data: new VectorLayer({
+          source: new VectorSource({
+            strategy: bboxStrategy
+          })
+        }),
+        isVisible: false
+      },
+      {
+        name: "Bottlenecks",
+        data: new VectorLayer({
+          source: new VectorSource({
+            strategy: bboxStrategy
+          }),
+          style: new Style({
+            stroke: new Stroke({
+              color: "rgba(230, 230, 10, .8)",
+              width: 4
+            }),
+            fill: new Fill({
+              color: "rgba(230, 230, 10, .3)"
+            })
+          })
+        }),
+        isVisible: true
+      },
+      {
+        name: "Bottleneck isolines",
+        data: new TileLayer({
+          source: new TileWMS({
+            preload: 0,
+            projection: "EPSG:3857",
+            url: window.location.origin + "/api/internal/wms",
+            params: {
+              LAYERS: "sounding_results_contour_lines_geoserver",
+              VERSION: "1.1.1",
+              TILED: true
+            },
+            tileLoadFunction: function(tile, src) {
+              // console.log("calling for", 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);
+          })
+        }),
+        isVisible: false
+      },
+      {
+        name: "Distance marks, Axis",
+        forLegendStyle: { point: true, resolution: 8 },
+        data: new VectorLayer({
+          source: new VectorSource({
+            strategy: bboxStrategy
+          }),
+          style: function(feature, resolution) {
+            if (resolution < 10) {
+              var s = new Style({
+                image: new CircleStyle({
+                  radius: 5,
+                  fill: new Fill({ color: "rgba(255, 0, 0, 0.1)" }),
+                  stroke: new Stroke({ color: "blue", width: 1 })
+                })
+              });
+              if (resolution < 6) {
+                s.setText(
+                  new Text({
+                    offsetY: 12,
+                    font: '10px "Open Sans", "sans-serif"',
+                    fill: new Fill({
+                      color: "black"
+                    }),
+                    text: (feature.get("hectometre") / 10).toString()
+                  })
+                );
+              }
+              return s;
+            } else {
+              return [];
+            }
+          }
+        }),
+        isVisible: true
+      }
+    ]
   },
   getters: {
     layers: state => {