Implemented image filtering.

modules/renderer/photos.js

@@ -119,12 +119,12 @@ export function rendererPhotos(context) {
     }
 
     photos.shouldFilterByDate = function() {
-        return showsLayer('mapillary') || showsLayer('kartaview') || showsLayer('streetside');
+        return showsLayer('mapillary') || showsLayer('kartaview') || showsLayer('streetside') || showsLayer('vegbilder');
     };
 
     photos.shouldFilterByPhotoType = function() {
         return showsLayer('mapillary') ||
-            (showsLayer('streetside') && showsLayer('kartaview'));
+            (showsLayer('streetside') && showsLayer('kartaview')) || showsLayer('vegbilder');
     };
 
     photos.shouldFilterByUsername = function() {

modules/services/vegbilder.js

@@ -66,13 +66,13 @@ async function fetchAvailableLayers() {
   }
 }
 
-function filterAvailableLayers(photos) {
-  const fromDate = photos.fromDate();
-  const toDate = photos.toDate();
-  const fromYear = fromDate ? new Date(fromDate).getFullYear() : 2016;
-  const toYear = toDate ? new Date(toDate).getFullYear() : null;
-  const showsFlat = photos.showsFlat();
-  const showsPano = photos.showsPanoramic();
+function filterAvailableLayers(photoContex) {
+  const fromDateString = photoContex.fromDate();
+  const toDateString = photoContex.toDate();
+  const fromYear = fromDateString ? new Date(fromDateString).getFullYear() : 2016;
+  const toYear = toDateString ? new Date(toDateString).getFullYear() : null;
+  const showsFlat = photoContex.showsFlat();
+  const showsPano = photoContex.showsPanoramic();
   return _availableLayers.filter(layerInfo => (
     (layerInfo.year >= fromYear) &&
     (!toYear || (layerInfo.year <= toYear)) &&
@@ -193,7 +193,7 @@ async function loadTile(cache, layername, tile) {
   dispatch.call('loadedImages');
 }
 
-function OrderSequences() {
+function orderSequences() {
   for (let [, sequence] of _vegbilderCache.sequences) {
     const {images, direction, geometry} = sequence;
     if (direction) {
@@ -299,7 +299,7 @@ export default {
 
 
   sequences: function (projection) {
-    OrderSequences();
+    orderSequences();
     const viewport = projection.clipExtent();
     const min = [viewport[0][0], viewport[1][1]];
     const max = [viewport[1][0], viewport[0][1]];
@@ -334,9 +334,9 @@ export default {
   },
 
 
-    loadImages: function (projection, photos) {
+  loadImages: function (projection, photosContext) {
     const margin = 1;
-    const layers = filterAvailableLayers(photos);
+    const layers = filterAvailableLayers(photosContext);
     loadWFSLayers(projection, margin, layers);
   },
 
@@ -344,7 +344,7 @@ export default {
     return _pannellumViewer;
   },
 
-  initViewerpannellumViewer: function () {
+  initPannellumViewer: function () {
     if (!window.pannellum) return;
     if (_pannellumViewer) return;
 

modules/svg/vegbilder.js

@@ -152,8 +152,32 @@ export function svgVegbilder(projection, context, dispatch) {
       .attr('transform', transform);
   }
 
-  function filterSequences(sequences) {
+  function filterImages(images) {
+    const photoContext = context.photos();
+    const fromDateString = photoContext.fromDate();
+    const toDateString = photoContext.toDate();
+    const showsFlat = photoContext.showsFlat();
+    const showsPano = photoContext.showsPanoramic();
 
+    if (fromDateString) {
+      const fromDate = new Date(fromDateString);
+      images = images.filter(image => image.captured_at.getTime() >= fromDate.getTime());
+    }
+
+    if (toDateString) {
+      const toDate = new Date(toDateString);
+      images = images.filter(image => image.captured_at.getTime() <= toDate.getTime());
+    }
+
+    if (!showsPano) {
+      images = images.filter(image => !image.is_sphere);
+    }
+
+    if (!showsFlat) {
+      images = images.filter(image => image.is_sphere);
+    }
+
+    return images;
   }
 
   /**
@@ -166,12 +190,17 @@ export function svgVegbilder(projection, context, dispatch) {
     const showMarkers = (z >= minMarkerZoom);
     const showViewfields = (z >= minViewfieldZoom);
     const service = getService();
-
     let sequences = [];
     let images = [];
 
-    sequences = (service ? service.sequences(projection) : []);
-    images = (service && showMarkers ? service.images(projection) : []);
+    if (service) {
+      // The WFS-layer for that year or image type may not be loaded after a filter is changed
+      service.loadImages(projection, context.photos());
+
+      sequences = service.sequences(projection);
+      images = showMarkers ? service.images(projection) : [];
+      images = filterImages(images);
+    }
 
     let traces = layer.selectAll('.sequences').selectAll('.sequence')
       .data(sequences, d => d.properties.key);
@@ -181,7 +210,7 @@ export function svgVegbilder(projection, context, dispatch) {
       .remove();
 
     // enter/update
-    traces = traces.enter()
+    traces.enter()
       .append('path')
       .attr('class', 'sequence')
       .merge(traces)