--- a/client/src/map/Maplayer.vue	Thu Sep 20 21:08:37 2018 +0200
+++ b/client/src/map/Maplayer.vue	Fri Sep 21 09:50:46 2018 +0200
@@ -73,6 +73,48 @@
       const interaction = this.createInteraction(this.drawMode);
       this.interaction = interaction;
       this.openLayersMap.addInteraction(interaction);
+    },
+    buildVectorLoader(featureRequestOptions, endpoint, vectorSource) {
+      // build a function to be used for VectorSource.setLoader()
+      // make use of WFS().writeGetFeature to build the request
+      // and use our HTTP library to actually do it
+      // NOTE: a) the geometryName has to be given in featureRequestOptions,
+      //          because we want to load depending on the bbox
+      //  b) the VectorSource has to have the option strategy: bbox
+      featureRequestOptions["outputFormat"] = "application/json";
+      var loader = function(extent, resolution, projection) {
+        featureRequestOptions["bbox"] = extent;
+        featureRequestOptions["srsName"] = projection.getCode();
+        var featureRequest = new WFS().writeGetFeature(featureRequestOptions);
+        // DEBUG console.log(featureRequest);
+        HTTP.post(
+          endpoint,
+          new XMLSerializer().serializeToString(featureRequest),
+          {
+            headers: {
+              "X-Gemma-Auth": localStorage.getItem("token"),
+              "Content-type": "text/xml; charset=UTF-8"
+            }
+          }
+        )
+          .then(response => {
+            var features = new GeoJSON().readFeatures(
+              JSON.stringify(response.data)
+            );
+            vectorSource.addFeatures(features);
+            console.log(
+              "loaded",
+              features.length,
+              featureRequestOptions.featureTypes,
+              "features"
+            );
+            // DEBUG console.log("loaded ", features, "for", vectorSource);
+            // eslint-disable-next-line
+        }).catch(error => {
+            vectorSource.removeLoadedExtent(extent);
+          });
+      };
+      return loader;
     }
   },
   watch: {
@@ -131,26 +173,21 @@
     });
 
     // FIXME hardwired for now
-    var featureRequest3 = new WFS().writeGetFeature({
+    var featureRequestOptions3 = {
       featurePrefix: "ws-wamos",
       featureTypes: ["ienc_wtware"],
-      outputFormat: "application/json"
-    });
+      geometryName: "geom"
+    };
 
-    HTTP.post(
-      "/external/d4d",
-      new XMLSerializer().serializeToString(featureRequest3),
-      {
-        headers: {
-          "X-Gemma-Auth": localStorage.getItem("token"),
-          "Content-type": "text/xml; charset=UTF-8"
-        }
-      }
-    ).then(response => {
-      var features = new GeoJSON().readFeatures(JSON.stringify(response.data));
-      var vectorSrc = this.layers[3].data.getSource();
-      vectorSrc.addFeatures(features);
-    });
+    this.layers[3].data
+      .getSource()
+      .setLoader(
+        this.buildVectorLoader(
+          featureRequestOptions3,
+          "/external/d4d",
+          this.layers[3].data.getSource()
+        )
+      );
 
     // FIXME hardwired for now
     var featureRequest4 = new WFS().writeGetFeature({
@@ -175,55 +212,42 @@
     });
 
     // FIXME this is hardwired for now to try for an external point layer
-    var featureRequest5 = new WFS().writeGetFeature({
+    var featureRequestOptions5 = {
       featurePrefix: "ws-wamos",
       featureTypes: ["ienc_dismar"],
-      outputFormat: "application/json",
+      geometryName: "geom",
       /* restrict loading approximately to extend of danube in Austria */
       filter: bboxFilter("geom", [13.3, 48.0, 17.1, 48.6], "EPSG:4326")
-    });
+    };
 
-    HTTP.post(
-      "/external/d4d",
-      new XMLSerializer().serializeToString(featureRequest5),
-      {
-        headers: {
-          "X-Gemma-Auth": localStorage.getItem("token"),
-          "Content-type": "text/xml; charset=UTF-8"
-        }
-      }
-    ).then(response => {
-      var features = new GeoJSON().readFeatures(JSON.stringify(response.data));
-      var vectorSrc = this.layers[5].data.getSource();
-      this.layers[5].data.setVisible(this.layers[5].isVisible);
-      vectorSrc.addFeatures(features);
-      console.log("loaded ", features, "for", vectorSrc);
-    });
+    this.layers[5].data
+      .getSource()
+      .setLoader(
+        this.buildVectorLoader(
+          featureRequestOptions5,
+          "/external/d4d",
+          this.layers[5].data.getSource()
+        )
+      );
+    this.layers[5].data.setVisible(this.layers[5].isVisible);
 
     // FIXME this is hardwired for now
-    var featureRequest6 = new WFS().writeGetFeature({
-      srsName: "EPSG:3857",
+    var featureRequestOptions6 = {
       featureNS: "gemma",
       featurePrefix: "gemma",
       featureTypes: ["distance_marks_geoserver"],
-      outputFormat: "application/json"
-    });
+      geometryName: "geom"
+    };
 
-    HTTP.post(
-      "/internal/wfs",
-      new XMLSerializer().serializeToString(featureRequest6),
-      {
-        headers: {
-          "X-Gemma-Auth": localStorage.getItem("token"),
-          "Content-type": "text/xml; charset=UTF-8"
-        }
-      }
-    ).then(response => {
-      var features = new GeoJSON().readFeatures(JSON.stringify(response.data));
-      var vectorSrc = this.layers[6].data.getSource();
-      vectorSrc.addFeatures(features);
-      console.log("loaded ", features, "for", vectorSrc);
-    });
+    this.layers[6].data
+      .getSource()
+      .setLoader(
+        this.buildVectorLoader(
+          featureRequestOptions6,
+          "/internal/wfs",
+          this.layers[6].data.getSource()
+        )
+      );
   }
 };
 </script>

--- a/client/src/map/store.js	Thu Sep 20 21:08:37 2018 +0200
+++ b/client/src/map/store.js	Fri Sep 21 09:50:46 2018 +0200
@@ -5,6 +5,7 @@
 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";
 
 const MapStore = {
   namespaced: true,
@@ -21,6 +22,7 @@
         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 }
           })
@@ -58,7 +60,9 @@
       {
         name: "Waterway Area",
         data: new VectorLayer({
-          source: new VectorSource(),
+          source: new VectorSource({
+            strategy: bboxStrategy
+          }),
           style: new Style({
             stroke: new Stroke({
               color: "rgba(0, 102, 0, 1)",
@@ -85,31 +89,43 @@
       {
         name: "Distance marks",
         data: new VectorLayer({
-          source: new VectorSource()
+          source: new VectorSource({
+            strategy: bboxStrategy
+          })
         }),
         isVisible: false
       },
       {
         name: "Distance marks, Axis",
         data: new VectorLayer({
-          source: new VectorSource(),
-          style: function(feature) {
-            return [
-              new Style({
+          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})
-                }),
-                text: new Text({
-                  font: '10px "Open Sans", "sans-serif"',
-                  fill: new Fill({
-                    color: "black"
-                  }),
-                  text: (feature.get("hectometre")/10).toString()
+                  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