From 4eff48d930fd8aac3ea78fdc808d457e92da239d Mon Sep 17 00:00:00 2001
From: Sicco van Sas <siccovansas@users.noreply.github.com>
Date: Mon, 7 Mar 2022 16:54:58 +0100
Subject: [PATCH] Add toegankelijkheidsfilters; use font awesome webfonts
 instead svg+js which was superslow when called dynamically with some js +
 much bigger; use more icons

---
 app/assets/package.json                |  11 +-
 app/assets/scripts/main.js             |  13 --
 app/assets/scripts/routes/map.js       | 236 +++++++++++++++++++++----
 app/assets/styles/common/_global.scss  |   8 +-
 app/assets/styles/layouts/_footer.scss |   9 -
 app/assets/styles/layouts/_header.scss |   1 -
 app/assets/styles/layouts/_pages.scss  |  40 ++---
 app/assets/styles/main.scss            |   6 +-
 app/assets/webpack.mix.js              |   1 +
 app/assets/yarn.lock                   |  61 ++++---
 app/templates/embed_gemeente.html      |   4 +-
 app/templates/map.html                 | 127 ++++++++++++-
 app/templates/show_alles.html          |   2 +-
 app/templates/show_gemeente.html       |   4 +-
 14 files changed, 391 insertions(+), 132 deletions(-)

diff --git a/app/assets/package.json b/app/assets/package.json
index f239eda..4d0f68e 100644
--- a/app/assets/package.json
+++ b/app/assets/package.json
@@ -13,16 +13,17 @@
   "dependencies": {
     "@fontsource/montserrat": "^4.5.1",
     "@fontsource/source-code-pro": "^4.5.1",
-    "@fortawesome/fontawesome-svg-core": "^1.2.36",
-    "@fortawesome/free-brands-svg-icons": "^5.15.4",
-    "@fortawesome/free-regular-svg-icons": "^5.15.4",
-    "@fortawesome/free-solid-svg-icons": "^5.15.4",
+    "@fortawesome/fontawesome-svg-core": "^1.3.0",
+    "@fortawesome/fontawesome-free": "^6.0.0",
+    "@fortawesome/free-brands-svg-icons": "^6.0.0",
+    "@fortawesome/free-regular-svg-icons": "^6.0.0",
+    "@fortawesome/free-solid-svg-icons": "^6.0.0",
     "bootstrap-filestyle": "1.2.1",
     "bootstrap-sass": "3.3.6",
     "bootstrap-select": "^1.13.5",
     "bootstrap-table": "1.19.1",
     "cross-env": "^5.2.1",
-    "fuse.js": "^3.2.0",
+    "fuse.js": "^6.5.3",
     "jquery": "2.2.4",
     "leaflet": "1.3.4",
     "leaflet.awesome-markers": "2.0.5",
diff --git a/app/assets/scripts/main.js b/app/assets/scripts/main.js
index 7a5b85a..8bbe9ba 100644
--- a/app/assets/scripts/main.js
+++ b/app/assets/scripts/main.js
@@ -16,19 +16,6 @@ import home from './routes/home';
 import map from './routes/map';
 
 
-// Import the needed Font Awesome functionality
-import { config, library, dom } from '@fortawesome/fontawesome-svg-core';
-// Import required icons
-import { faPencilAlt, faEnvelope, faExternalLinkAlt, faQuestionCircle, faWheelchair, faBan, faCode, faMapMarkerAlt, faSearch, faCheck, faQuestion, faVolumeMute } from '@fortawesome/free-solid-svg-icons';
-import { faTwitter, faLinkedin, faFacebookF, faGithub } from '@fortawesome/free-brands-svg-icons';
-import { faEnvelope as faEnvelopeR } from '@fortawesome/free-regular-svg-icons';
-
-// Add the imported icons to the library
-library.add(faPencilAlt, faEnvelope, faExternalLinkAlt, faQuestionCircle, faWheelchair, faBan, faCode, faLinkedin, faTwitter, faFacebookF, faGithub, faEnvelopeR, faMapMarkerAlt, faSearch, faCheck, faQuestion, faVolumeMute);
-
-// Tell FontAwesome to watch the DOM and add the SVGs when it detects icon markup
-dom.watch();
-
 // Allows us to use jQuery in <script> elements in the .html files
 global.$ = global.jQuery = require('jquery');
 
diff --git a/app/assets/scripts/routes/map.js b/app/assets/scripts/routes/map.js
index 0f150d7..8a3e729 100644
--- a/app/assets/scripts/routes/map.js
+++ b/app/assets/scripts/routes/map.js
@@ -1,22 +1,22 @@
 import Fuse from 'fuse.js';
 
 var weelchair_labels = {
-  'ja': '<span class="fa-stack" title="Toegankelijk voor mensen met een lichamelijke beperking"><i class="fa fa-wheelchair fa-stack-1x" aria-hidden="true"></i></span><span class="sr-only">Toegankelijk voor mensen met een lichamelijke beperking</span>&nbsp;',
-  'nee': '<span class="fa-stack" title="Niet toegankelijk voor mensen met een lichamelijke beperking"><i class="fa fa-wheelchair fa-stack-1x" aria-hidden="true"></i><i class="fa fa-ban fa-stack-1x" style="color: Tomato; opacity: 0.6;"></i></span><span class="sr-only">Niet toegankelijk voor mensen met een lichamelijke beperking</span>&nbsp;'
+  'ja': '<span class="fa-stack" title="Toegankelijk voor mensen met een lichamelijke beperking"><i class="fa fa-wheelchair fa-stack-2x" aria-hidden="true"></i></span><span class="sr-only">Toegankelijk voor mensen met een lichamelijke beperking</span>&nbsp;',
+  'nee': '<span class="fa-stack" title="Niet toegankelijk voor mensen met een lichamelijke beperking"><i class="fa fa-wheelchair fa-stack-2x" aria-hidden="true"></i><i class="fa fa-ban fa-stack-2x" style="color: Tomato; opacity: 0.6;"></i></span><span class="sr-only">Niet toegankelijk voor mensen met een lichamelijke beperking</span>&nbsp;'
 }
 
 var akoestiek_labels = {
-  'ja': '<span class="fa-stack" title="Akoestiek geschikt voor slechthorenden"><i class="fa fa-volume-mute fa-stack-1x" aria-hidden="true"></i></span><span class="sr-only">Akoestiek geschikt voor slechthorenden</span>&nbsp;',
-  'nee': '<span class="fa-stack" title="Akoestiek niet geschikt voor slechthorenden"><i class="fa fa-volume-mute fa-stack-1x" aria-hidden="true"></i><i class="fa fa-ban fa-stack-1x" style="color: Tomato; opacity: 0.6;"></i></span><span class="sr-only">Akoestiek niet geschikt voor slechthorenden</span>&nbsp;',
-  '': '<span class="fa-stack" title="Onbekend of akoestiek geschikt is voor slechthorenden"><i class="fa fa-volume-mute fa-stack-1x" aria-hidden="true"></i><i class="fa fa-question fa-stack-1x" style="color: orange; opacity: 0.9;"></i></span><span class="sr-only">Onbekend of akoestiek niet geschikt is voor slechthorenden</span>&nbsp;',
-  'undefined': '<span class="fa-stack" title="Onbekend of akoestiek niet geschikt is voor slechthorenden"><i class="fa fa-volume-mute fa-stack-1x" aria-hidden="true"></i><i class="fa fa-question fa-stack-1x" style="color: orange; opacity: 0.9;"></i></span><span class="sr-only">Onbekend of akoestiek niet geschikt is voor slechthorenden</span>&nbsp;',
+  'ja': '<span class="fa-stack" title="Akoestiek geschikt voor slechthorenden"><i class="fa fa-volume-mute fa-stack-2x" aria-hidden="true"></i></span><span class="sr-only">Akoestiek geschikt voor slechthorenden</span>&nbsp;',
+  'nee': '<span class="fa-stack" title="Akoestiek niet geschikt voor slechthorenden"><i class="fa fa-volume-mute fa-stack-2x" aria-hidden="true"></i><i class="fa fa-ban fa-stack-2x" style="color: Tomato; opacity: 0.6;"></i></span><span class="sr-only">Akoestiek niet geschikt voor slechthorenden</span>&nbsp;',
+  '': '<span class="fa-stack" title="Onbekend of akoestiek geschikt is voor slechthorenden"><i class="fa fa-volume-mute fa-stack-2x" aria-hidden="true"></i><i class="fa fa-question fa-stack-2x" style="color: orange; opacity: 0.9;"></i></span><span class="sr-only">Onbekend of akoestiek niet geschikt is voor slechthorenden</span>&nbsp;',
+  'undefined': '<span class="fa-stack" title="Onbekend of akoestiek niet geschikt is voor slechthorenden"><i class="fa fa-volume-mute fa-stack-2x" aria-hidden="true"></i><i class="fa fa-question fa-stack-2x" style="color: orange; opacity: 0.9;"></i></span><span class="sr-only">Onbekend of akoestiek niet geschikt is voor slechthorenden</span>&nbsp;',
 }
 
 var gehandicaptentoilet_labels = {
-  'ja': '<span class="fa-stack" title="Gehandicaptentoilet"><i class="fa fa-wheelchair fa-stack-1x" aria-hidden="true"></i></span><span class="wc" title="Geen gehandicaptentoilet" style="position: relative; top: -21px; left: -19px; color: dimgrey;" aria-hidden="true">WC</span><span class="sr-only">Gehandicaptentoilet</span>&nbsp;',
-  'nee': '<span class="fa-stack" title="Geen gehandicaptentoilet"><i class="fa fa-wheelchair fa-stack-1x" aria-hidden="true"></i><i class="fa fa-ban fa-stack-1x stack" style="color: Tomato; opacity: 0.6;"></i></span><span class="wc" title="Geen gehandicaptentoilet" style="position: relative; top: -21px; left: -19px; color: dimgrey;" aria-hidden="true">WC</span><span class="sr-only">Geen gehandicaptentoilet</span>&nbsp;',
-  '': '<span class="fa-stack" title="Onbekend of er een gehandicaptentoilet is"><i class="fa fa-wheelchair fa-stack-1x" aria-hidden="true"></i><i class="fa fa-question fa-stack-1x stack" style="color: orange; opacity: 0.9;"></i></span><span class="wc" title="Onbekend of er een gehandicaptentoilet is" style="position: relative; top: -21px; left: -19px; color: dimgrey;" aria-hidden="true">WC</span><span class="sr-only">Onbekend of er een gehandicaptentoilet is</span>&nbsp;',
-  'undefined': '<span class="fa-stack" title="Onbekend of er een gehandicaptentoilet is"><i class="fa fa-wheelchair fa-stack-1x" aria-hidden="true"></i><i class="fa fa-question fa-stack-1x stack" style="color: orange; opacity: 0.9;"></i></span><span class="wc" title="Onbekend of er een gehandicaptentoilet is" style="position: relative; top: -21px; left: -19px; color: dimgrey;" aria-hidden="true">WC</span><span class="sr-only">Onbekend of er een gehandicaptentoilet is</span>&nbsp;',
+  'ja': '<span class="fa-stack" title="Gehandicaptentoilet"><i class="fa fa-wheelchair fa-stack-2x" aria-hidden="true"></i></span><span class="wc" title="Geen gehandicaptentoilet" aria-hidden="true">WC</span><span class="sr-only">Gehandicaptentoilet</span>&nbsp;',
+  'nee': '<span class="fa-stack" title="Geen gehandicaptentoilet"><i class="fa fa-wheelchair fa-stack-2x" aria-hidden="true"></i><i class="fa fa-ban fa-stack-2x stack" style="color: Tomato; opacity: 0.6;"></i></span><span class="wc" title="Geen gehandicaptentoilet" aria-hidden="true">WC</span><span class="sr-only">Geen gehandicaptentoilet</span>&nbsp;',
+  '': '<span class="fa-stack" title="Onbekend of er een gehandicaptentoilet is"><i class="fa fa-wheelchair fa-stack-2x" aria-hidden="true"></i><i class="fa fa-question fa-stack-2x stack" style="color: orange; opacity: 0.9;"></i></span><span class="wc" title="Onbekend of er een gehandicaptentoilet is" aria-hidden="true">WC</span><span class="sr-only">Onbekend of er een gehandicaptentoilet is</span>&nbsp;',
+  'undefined': '<span class="fa-stack" title="Onbekend of er een gehandicaptentoilet is"><i class="fa fa-wheelchair fa-stack-2x" aria-hidden="true"></i><i class="fa fa-question fa-stack-2x stack" style="color: orange; opacity: 0.9;"></i></span><span class="wc" title="Onbekend of er een gehandicaptentoilet is" aria-hidden="true">WC</span><span class="sr-only">Onbekend of er een gehandicaptentoilet is</span>&nbsp;',
 }
 
 export default {
@@ -36,27 +36,27 @@ export default {
       for (var i=0; i < matches.length; i++) {
 
         // Deal with alternative municipality names
-        var gemeente_uri = matches[i]['gemeente_naam']
-        if (matches[i]['gemeente_naam'] == 'Den Haag') {
+        var gemeente_uri = matches[i]['item']['gemeente_naam']
+        if (matches[i]['item']['gemeente_naam'] == 'Den Haag') {
           gemeente_uri = "'s-Gravenhage"
         }
-        else if (matches[i]['gemeente_naam'] == 'Den Bosch') {
+        else if (matches[i]['item']['gemeente_naam'] == 'Den Bosch') {
           gemeente_uri = "'s-Hertogenbosch"
         }
-        else if (matches[i]['gemeente_naam'] == 'De Friese Meren') {
+        else if (matches[i]['item']['gemeente_naam'] == 'De Friese Meren') {
           gemeente_uri = "De Fryske Marren"
         }
-        else if (matches[i]['gemeente_naam'] == 'Noordoost-Friesland') {
+        else if (matches[i]['item']['gemeente_naam'] == 'Noordoost-Friesland') {
           gemeente_uri = "Noardeast-Fryslân"
         }
-        else if (matches[i]['gemeente_naam'] == 'Zuidwest-Friesland') {
+        else if (matches[i]['item']['gemeente_naam'] == 'Zuidwest-Friesland') {
           gemeente_uri = "Súdwest-Fryslân"
         }
 
         var target = StembureausApp.links_external ? ' target="_blank" rel="noopener"' : '';
         $('#results-search-gemeenten').append($(
           '<ul>' +
-          '<li><h3><a href="/s/' + gemeente_uri + '"' + target + ">" + matches[i]['gemeente_naam'] + '</a><h3></li>' +
+          '<li><h3><a href="/s/' + gemeente_uri + '"' + target + ">" + matches[i]['item']['gemeente_naam'] + '</a><h3></li>' +
           '</ul>'
         ))
       }
@@ -175,7 +175,15 @@ export default {
       //console.log('matches:');
       //console.dir(stembureau_matches);
 
-      StembureausApp.show(stembureau_matches, query);
+      // Flatten the matches array a bit by removing the 'item' level;
+      // this is needed to match our 'filtered_locations' array which we
+      // also pass to the 'StembureausApp.show' function
+      var cleaned_stembureau_matches = [];
+      stembureau_matches.forEach(function(match) {
+        cleaned_stembureau_matches.push(match['item']);
+      });
+
+      StembureausApp.show(cleaned_stembureau_matches, query);
     };
 
     StembureausApp.init = function() {
@@ -240,11 +248,6 @@ export default {
       return opinfo_output;
     }
 
-    // Get the value of currently selected dag for the map filter
-    var get_dag = function() {
-      return $('#dag-filter').val();
-    }
-
     var get_query = function() {
       return $('#form-search input[type="text"]').val();
     }
@@ -273,12 +276,12 @@ export default {
       var dag;
 
       // Apply filters to the map
-      StembureausApp.filter_map = function (dag) {
+      StembureausApp.filter_map = function (filters) {
         if (StembureausApp.clustermarkers) {
           StembureausApp.map.removeLayer(StembureausApp.clustermarkers);
         }
         StembureausApp.clustermarkers = L.markerClusterGroup({maxClusterRadius: 50});
-        StembureausApp.filter_locations(dag);
+        StembureausApp.filter_locations(filters);
         // Save markers to filtered_markers as we use it later to fit bounds
         StembureausApp.filtered_markers = [];
         StembureausApp.filtered_locations.forEach(function (loc) {
@@ -303,24 +306,143 @@ export default {
           marker.addTo(StembureausApp.clustermarkers);
         });
         StembureausApp.map.addLayer(StembureausApp.clustermarkers);
+
       };
 
       // Filter locations
-      StembureausApp.filter_locations = function (dag) {
+      StembureausApp.filter_locations = function (filters) {
         StembureausApp.filtered_locations = [];
+
+        // Filter: dag
         StembureausApp.stembureaus.forEach(function (loc) {
-          // When you only view a single location, there is no dag filter as
-          // all the information is shown on the page
+          var dag = filters['dag'];
           if (dag) {
-            if (dag == 'alles') {
+            if (dag === '') {
               StembureausApp.filtered_locations.push(loc);
             } else if (loc['Openingstijden ' + dag + '-03-2022'].split(' tot ')[0].trim()) {
               StembureausApp.filtered_locations.push(loc);
             }
           } else {
+            // When you only view a single location, there is no dag filter as
+            // all the information is shown on the page
             StembureausApp.filtered_locations.push(loc);
           }
         });
+
+        // Filter: openingstijden
+        var temp_filtered_locations = [];
+        StembureausApp.filtered_locations.forEach(function (loc) {
+          var openingstijden = filters['openingstijden'];
+          var dag = filters['dag'];
+          if (openingstijden) {
+            if (openingstijden === '') {
+              temp_filtered_locations.push(loc);
+            } else if (openingstijden === 'regulier') {
+              if (dag) {
+                if (loc['Openingstijden ' + dag + '-03-2022'] === '2022-03-' + dag + 'T07:30:00 tot 2022-03-' + dag + 'T21:00:00') {
+                  temp_filtered_locations.push(loc);
+                }
+              } else {
+                if (loc['Openingstijden 14-03-2022'] !== '' && loc['Openingstijden 14-03-2022'] === '2022-03-14T07:30:00 tot 2022-03-14T21:00:00' || loc['Openingstijden 15-03-2022'] !== '' && loc['Openingstijden 15-03-2022'] === '2022-03-15T07:30:00 tot 2022-03-15T21:00:00' || loc['Openingstijden 16-03-2022'] !== '' && loc['Openingstijden 16-03-2022'] === '2022-03-16T07:30:00 tot 2022-03-16T21:00:00') {
+                  temp_filtered_locations.push(loc);
+                }
+              }
+            } else if (openingstijden === 'afwijkend') {
+              if (dag) {
+                if (loc['Openingstijden ' + dag + '-03-2022'] !== '2022-03-' + dag + 'T07:30:00 tot 2022-03-' + dag + 'T21:00:00') {
+                  temp_filtered_locations.push(loc);
+                }
+              } else {
+                if (loc['Openingstijden 14-03-2022'] !== '' && loc['Openingstijden 14-03-2022'] !== '2022-03-14T07:30:00 tot 2022-03-14T21:00:00' || loc['Openingstijden 15-03-2022'] !== '' && loc['Openingstijden 15-03-2022'] !== '2022-03-15T07:30:00 tot 2022-03-15T21:00:00' || loc['Openingstijden 16-03-2022'] !== '' && loc['Openingstijden 16-03-2022'] !== '2022-03-16T07:30:00 tot 2022-03-16T21:00:00') {
+                  temp_filtered_locations.push(loc);
+                }
+              }
+            }
+          } else {
+            temp_filtered_locations.push(loc);
+          }
+        });
+        StembureausApp.filtered_locations = temp_filtered_locations;
+
+        // Filter: toegankelijk voor mensen met een lichamelijke beperking
+        var temp_filtered_locations = [];
+        StembureausApp.filtered_locations.forEach(function (loc) {
+          var toegankelijk = filters['toegankelijk'];
+          if (toegankelijk) {
+            if (toegankelijk === '') {
+              temp_filtered_locations.push(loc);
+            } else if (loc['Toegankelijk voor mensen met een lichamelijke beperking'] === toegankelijk) {
+              temp_filtered_locations.push(loc);
+            }
+          } else {
+            temp_filtered_locations.push(loc);
+          }
+        });
+        StembureausApp.filtered_locations = temp_filtered_locations;
+
+        // Filter: visuele hulpmiddelen
+        var temp_filtered_locations = [];
+        StembureausApp.filtered_locations.forEach(function (loc) {
+          var this_filter = filters['visuele-hulpmiddelen'];
+          if (this_filter) {
+            if (this_filter === '') {
+              temp_filtered_locations.push(loc);
+            } else if (loc['Visuele hulpmiddelen']) {
+              temp_filtered_locations.push(loc);
+            }
+          } else {
+            temp_filtered_locations.push(loc);
+          }
+        });
+        StembureausApp.filtered_locations = temp_filtered_locations;
+
+        // Filter: auditieve hulpmiddelen
+        var temp_filtered_locations = [];
+        StembureausApp.filtered_locations.forEach(function (loc) {
+          var this_filter = filters['auditieve-hulpmiddelen'];
+          if (this_filter) {
+            if (this_filter === '') {
+              temp_filtered_locations.push(loc);
+            } else if (loc['Auditieve hulpmiddelen']) {
+              temp_filtered_locations.push(loc);
+            }
+          } else {
+            temp_filtered_locations.push(loc);
+          }
+        });
+        StembureausApp.filtered_locations = temp_filtered_locations;
+
+        // Filter: gehandicaptentoilet
+        var temp_filtered_locations = [];
+        StembureausApp.filtered_locations.forEach(function (loc) {
+          var this_filter = filters['gehandicaptentoilet'];
+          if (this_filter) {
+            if (this_filter === '') {
+              temp_filtered_locations.push(loc);
+            } else if (loc['Gehandicaptentoilet'] === this_filter) {
+              temp_filtered_locations.push(loc);
+            }
+          } else {
+            temp_filtered_locations.push(loc);
+          }
+        });
+        StembureausApp.filtered_locations = temp_filtered_locations;
+
+        // Filter: akoestiek
+        var temp_filtered_locations = [];
+        StembureausApp.filtered_locations.forEach(function (loc) {
+          var this_filter = filters['akoestiek'];
+          if (this_filter) {
+            if (this_filter === '') {
+              temp_filtered_locations.push(loc);
+            } else if (loc['Akoestiek'] === this_filter) {
+              temp_filtered_locations.push(loc);
+            }
+          } else {
+            temp_filtered_locations.push(loc);
+          }
+        });
+        StembureausApp.filtered_locations = temp_filtered_locations;
       };
 
       var datums = [
@@ -445,18 +567,56 @@ export default {
         }
       });
 
-      // Apply updates to the map if the dag filter is clicked
-      $('#dag-filter').change(function() {
-        StembureausApp.filter_map(
-          dag=this.value
-        );
+      // Initialize the filters
+      var filters = {
+        'dag': $('#dag-filter').val(),
+        'openingstijden': $('#openingstijden-filter').val(),
+        'toegankelijk': $('.toegankelijk-filter').val(),
+        'visuele-hulpmiddelen': $('.visuele-hulpmiddelen-filter').val(),
+        'auditieve-hulpmiddelen': $('.auditieve-hulpmiddelen-filter').val(),
+        'gehandicapten': $('.gehandicapten-filter').val(),
+        'akoestiek': $('.akoestiek-filter').val(),
+      };
+
+      // The toegankelijkheidsfilter fields exist twice because of
+      // responsiveness (one is always hidden); make sure that both fields
+      // have the same value when one of them is changed.
+      $(".toegankelijk-filter").change(function() {
+        $(".toegankelijk-filter").val($(this).val());
+      });
+
+      $(".visuele-hulpmiddelen-filter").change(function() {
+        $(".visuele-hulpmiddelen-filter").val($(this).val());
+      });
+
+      $(".auditieve-hulpmiddelen-filter").change(function() {
+        $(".auditieve-hulpmiddelen-filter").val($(this).val());
+      });
+
+      $(".gehandicaptentoilet-filter").change(function() {
+        $(".gehandicaptentoilet-filter").val($(this).val());
+      });
+
+      $(".akoestiek-filter").change(function() {
+        $(".akoestiek-filter").val($(this).val());
+      });
+
+      // Apply updates to the map if a filter is clicked
+      $('.filter').change(function() {
+        filters['dag'] = $('#dag-filter').val();
+        filters['openingstijden'] = $('#openingstijden-filter').val();
+        filters['toegankelijk'] = $('.toegankelijk-filter').val();
+        filters['visuele-hulpmiddelen'] = $('.visuele-hulpmiddelen-filter').val();
+        filters['auditieve-hulpmiddelen'] = $('.auditieve-hulpmiddelen-filter').val();
+        filters['gehandicaptentoilet'] = $('.gehandicaptentoilet-filter').val();
+        filters['akoestiek'] = $('.akoestiek-filter').val();
+
+        StembureausApp.filter_map(filters);
         StembureausApp.search(get_query());
       });
 
-      // Default view: show all stembureaus on the 16th of March
-      StembureausApp.filter_map(
-        dag=get_dag()
-      );
+      // Default view: based on which option is selected by default in map.html
+      StembureausApp.filter_map(filters);
 
       // Select the location to fit the bounds of the map to; use all locations if
       // there are less than 50 (useful for debugging), otherwise only show
diff --git a/app/assets/styles/common/_global.scss b/app/assets/styles/common/_global.scss
index bcda8f2..7f90482 100644
--- a/app/assets/styles/common/_global.scss
+++ b/app/assets/styles/common/_global.scss
@@ -29,7 +29,7 @@ a {
   text-decoration: underline;
 }
 
-#dag-filter {
+.filter {
   display: inline-block;
   width: 180px !important;
 }
@@ -58,6 +58,10 @@ a {
   color: $orange;
 }
 
+.text-green {
+  color: green;
+}
+
 .text-white {
   color: white;
 }
@@ -169,7 +173,7 @@ dd {
     font-size: 12px;
   }
 
-  #dag-filter {
+  .filter {
     margin: 7px 0;
     padding: 6px 0;
     width: 160px !important;
diff --git a/app/assets/styles/layouts/_footer.scss b/app/assets/styles/layouts/_footer.scss
index 51587ae..96405f0 100644
--- a/app/assets/styles/layouts/_footer.scss
+++ b/app/assets/styles/layouts/_footer.scss
@@ -13,15 +13,6 @@ footer {
     margin: 0;
     padding-left: 5px;
   }
-  ul.dashed {
-    list-style-type: none;
-  }
-  ul.dashed > li {
-    text-indent: -5px;
-  }
-  ul.dashed > li:before {
-    content: "- ";
-  }
 
   .osf-logo {
     width: 115px;
diff --git a/app/assets/styles/layouts/_header.scss b/app/assets/styles/layouts/_header.scss
index 8275039..c03e580 100644
--- a/app/assets/styles/layouts/_header.scss
+++ b/app/assets/styles/layouts/_header.scss
@@ -55,7 +55,6 @@ nav {
 }
 
 .lead-text {
-  font-family: $font-family-monospace;
   font-size: 24px;
   line-height: 28px;
 }
diff --git a/app/assets/styles/layouts/_pages.scss b/app/assets/styles/layouts/_pages.scss
index 2b3a25e..3d5518b 100644
--- a/app/assets/styles/layouts/_pages.scss
+++ b/app/assets/styles/layouts/_pages.scss
@@ -45,36 +45,26 @@
   }
 }
 
-.stembureau-info-icons {
-  .svg-inline--fa {
-    font-size: 20px;
-    color: dimgrey;
-    width: 26px;
-    margin: 1px 4.5px;
-  }
-
-  .fa-wheelchair {
-    top: 2px;
-  }
-
-  .fa-ban, .fa-question {
-    font-size: 26px;
-  }
+.stembureau-info-icons .fa {
+  color: dimgrey;
+}
 
-  .wc {
-    font-family: $font-family-title;
-    font-size: 14px;
-    line-height: 20px;
-  }
+.fa-stack {
+  z-index: 10;
+}
 
-  .stack {
-    z-index: 10;
-  }
+.wc {
+  color: dimgrey;
+  font-family: $font-family-title;
+  font-size: 14px;
+  position: relative;
+  top: -9px !important;
+  left: -18px !important;
 }
 
 .leaflet-popup .wc {
-  top: -17px !important;
-  left: -14px !important;
+  top: -8px !important;
+  left: -16px !important;
 }
 
 #form-search, #form-gemeente-search {
diff --git a/app/assets/styles/main.scss b/app/assets/styles/main.scss
index 8833f37..82a2eae 100644
--- a/app/assets/styles/main.scss
+++ b/app/assets/styles/main.scss
@@ -9,11 +9,15 @@
 // @import "~some-node-module";
 @import "~bootstrap-sass/assets/stylesheets/_bootstrap.scss";
 @import "~bootstrap-table/dist/bootstrap-table.min.css";
-@import "~bootstrap-table/dist/extensions/sticky-header/bootstrap-table-sticky-header.css";
+@import "~bootstrap-table/dist/extensions/sticky-header/bootstrap-table-sticky-header.min.css";
 @import "leaflet";
 @import "~leaflet.markercluster/dist/MarkerCluster.css";
 @import "~leaflet.markercluster/dist/MarkerCluster.Default.css";
 @import "~leaflet.awesome-markers/dist/leaflet.awesome-markers.css";
+@import "~@fortawesome/fontawesome-free/css/fontawesome.min.css";
+@import "~@fortawesome/fontawesome-free/css/brands.min.css";
+@import "~@fortawesome/fontawesome-free/css/solid.min.css";
+@import "~@fortawesome/fontawesome-free/css/regular.min.css";
 
 @import "common/_global";
 @import "components/_buttons";
diff --git a/app/assets/webpack.mix.js b/app/assets/webpack.mix.js
index 24aec1f..2233466 100644
--- a/app/assets/webpack.mix.js
+++ b/app/assets/webpack.mix.js
@@ -16,6 +16,7 @@ require('laravel-mix-imagemin');
 mix.setPublicPath('../static/dist');
 
 mix.copyDirectory('node_modules/bootstrap-sass/assets/fonts/bootstrap/', '../static/dist/fonts/');
+mix.copyDirectory('node_modules/@fortawesome/fontawesome-free/webfonts/', '../static/dist/webfonts/');
 
 mix.js('scripts/main.js', '../static/dist/scripts/');
 
diff --git a/app/assets/yarn.lock b/app/assets/yarn.lock
index bf5855f..d0b9fea 100644
--- a/app/assets/yarn.lock
+++ b/app/assets/yarn.lock
@@ -898,38 +898,43 @@
   resolved "https://registry.yarnpkg.com/@fontsource/source-code-pro/-/source-code-pro-4.5.1.tgz#7be223bf73e489330e5ad97de430251cda4ff0fb"
   integrity sha512-NVTR9MBd5Dkzd6JDolLft0KM92RISbw0rhNKUuywGMxovAD7LypE5Cb4u0+lAylV3tRzQkLAsspCwMLzclscdQ==
 
-"@fortawesome/fontawesome-common-types@^0.2.36":
-  version "0.2.36"
-  resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-0.2.36.tgz#b44e52db3b6b20523e0c57ef8c42d315532cb903"
-  integrity sha512-a/7BiSgobHAgBWeN7N0w+lAhInrGxksn13uK7231n2m8EDPE3BMCl9NZLTGrj9ZXfCmC6LM0QLqXidIizVQ6yg==
+"@fortawesome/fontawesome-common-types@^0.3.0":
+  version "0.3.0"
+  resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-0.3.0.tgz#949995a05c0d8801be7e0a594f775f1dbaa0d893"
+  integrity sha512-CA3MAZBTxVsF6SkfkHXDerkhcQs0QPofy43eFdbWJJkZiq3SfiaH1msOkac59rQaqto5EqWnASboY1dBuKen5w==
+
+"@fortawesome/fontawesome-free@^6.0.0":
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-free/-/fontawesome-free-6.0.0.tgz#6f3bd8e42997c7d536a1246877ed8bcd4f005a54"
+  integrity sha512-6LB4PYBST1Rx40klypw1SmSDArjFOcfBf2LeX9Zg5EKJT2eXiyiJq+CyBYKeXyK0sXS2FsCJWSPr/luyhuvh0Q==
 
-"@fortawesome/fontawesome-svg-core@^1.2.36":
-  version "1.2.36"
-  resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-1.2.36.tgz#4f2ea6f778298e0c47c6524ce2e7fd58eb6930e3"
-  integrity sha512-YUcsLQKYb6DmaJjIHdDWpBIGCcyE/W+p/LMGvjQem55Mm2XWVAP5kWTMKWLv9lwpCVjpLxPyOMOyUocP1GxrtA==
+"@fortawesome/fontawesome-svg-core@^1.3.0":
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-1.3.0.tgz#343fac91fa87daa630d26420bfedfba560f85885"
+  integrity sha512-UIL6crBWhjTNQcONt96ExjUnKt1D68foe3xjEensLDclqQ6YagwCRYVQdrp/hW0ALRp/5Fv/VKw+MqTUWYYvPg==
   dependencies:
-    "@fortawesome/fontawesome-common-types" "^0.2.36"
+    "@fortawesome/fontawesome-common-types" "^0.3.0"
 
-"@fortawesome/free-brands-svg-icons@^5.15.4":
-  version "5.15.4"
-  resolved "https://registry.yarnpkg.com/@fortawesome/free-brands-svg-icons/-/free-brands-svg-icons-5.15.4.tgz#ec8a44dd383bcdd58aa7d1c96f38251e6fec9733"
-  integrity sha512-f1witbwycL9cTENJegcmcZRYyawAFbm8+c6IirLmwbbpqz46wyjbQYLuxOc7weXFXfB7QR8/Vd2u5R3q6JYD9g==
+"@fortawesome/free-brands-svg-icons@^6.0.0":
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/@fortawesome/free-brands-svg-icons/-/free-brands-svg-icons-6.0.0.tgz#c69830ec2fad38c95945867f4e6927bf33cce6f8"
+  integrity sha512-BIhsy2YeGuk8+KQwpqmyayQDWo1lvGMHsMIE+z5ApPRgV7T+zGhmNzYVoBT4IrJMC6ep5WpGrxoHX+IvNxHnkw==
   dependencies:
-    "@fortawesome/fontawesome-common-types" "^0.2.36"
+    "@fortawesome/fontawesome-common-types" "^0.3.0"
 
-"@fortawesome/free-regular-svg-icons@^5.15.4":
-  version "5.15.4"
-  resolved "https://registry.yarnpkg.com/@fortawesome/free-regular-svg-icons/-/free-regular-svg-icons-5.15.4.tgz#b97edab436954333bbeac09cfc40c6a951081a02"
-  integrity sha512-9VNNnU3CXHy9XednJ3wzQp6SwNwT3XaM26oS4Rp391GsxVYA+0oDR2J194YCIWf7jNRCYKjUCOduxdceLrx+xw==
+"@fortawesome/free-regular-svg-icons@^6.0.0":
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/@fortawesome/free-regular-svg-icons/-/free-regular-svg-icons-6.0.0.tgz#f3cb91dac643472fe8138024b93fbfbdf05675cc"
+  integrity sha512-lYK6oyQL8HwZUAVWGqF7TGuwQBVfphNBVTdvPSD3h4gmQfGazm/xcwg3kmtcRycu3y6QspOC7hPXSoJbVqSYCw==
   dependencies:
-    "@fortawesome/fontawesome-common-types" "^0.2.36"
+    "@fortawesome/fontawesome-common-types" "^0.3.0"
 
-"@fortawesome/free-solid-svg-icons@^5.15.4":
-  version "5.15.4"
-  resolved "https://registry.yarnpkg.com/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-5.15.4.tgz#2a68f3fc3ddda12e52645654142b9e4e8fbb6cc5"
-  integrity sha512-JLmQfz6tdtwxoihXLg6lT78BorrFyCf59SAwBM6qV/0zXyVeDygJVb3fk+j5Qat+Yvcxp1buLTY5iDh1ZSAQ8w==
+"@fortawesome/free-solid-svg-icons@^6.0.0":
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-6.0.0.tgz#bed4a501b631c6cfa35c09830f7cb63ffca1589d"
+  integrity sha512-o4FZ1XbndcgeWNb8Wh0y+Hgf73CjmyOQowUSaqQCtgIIdS+XliSBSOwCl330wER+I6CGYE96hT27bHBPmzX2Gg==
   dependencies:
-    "@fortawesome/fontawesome-common-types" "^0.2.36"
+    "@fortawesome/fontawesome-common-types" "^0.3.0"
 
 "@mrmlnc/readdir-enhanced@^2.2.1":
   version "2.2.1"
@@ -3684,10 +3689,10 @@ function-bind@^1.1.1:
   resolved "https://registry.yarnpkg.com/function-bind/-/function-bind-1.1.1.tgz#a56899d3ea3c9bab874bb9773b7c5ede92f4895d"
   integrity sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A==
 
-fuse.js@^3.2.0:
-  version "3.6.1"
-  resolved "https://registry.yarnpkg.com/fuse.js/-/fuse.js-3.6.1.tgz#7de85fdd6e1b3377c23ce010892656385fd9b10c"
-  integrity sha512-hT9yh/tiinkmirKrlv4KWOjztdoZo1mx9Qh4KvWqC7isoXwdUY3PNWUxceF4/qO9R6riA2C29jdTOeQOIROjgw==
+fuse.js@^6.5.3:
+  version "6.5.3"
+  resolved "https://registry.yarnpkg.com/fuse.js/-/fuse.js-6.5.3.tgz#7446c0acbc4ab0ab36fa602e97499bdb69452b93"
+  integrity sha512-sA5etGE7yD/pOqivZRBvUBd/NaL2sjAu6QuSaFoe1H2BrJSkH/T/UXAJ8CdXdw7DvY3Hs8CXKYkDWX7RiP5KOg==
 
 gensync@^1.0.0-beta.2:
   version "1.0.0-beta.2"
diff --git a/app/templates/embed_gemeente.html b/app/templates/embed_gemeente.html
index 3738818..3ce5185 100644
--- a/app/templates/embed_gemeente.html
+++ b/app/templates/embed_gemeente.html
@@ -13,7 +13,7 @@
     <div class="row">
       <div class="col-xs-12">
         <div class="text-center">
-          <h1>Gemeente {{ gemeente }}</h1>
+          <h1><i class="fa fa-users text-blue"></i> Gemeente {{ gemeente }}</h1>
         </div>
       </div>
     </div>
@@ -39,7 +39,7 @@ <h1>Gemeente {{ gemeente }}</h1>
         <div class="col-xs-12 col-sm-12 col-md-3">
           {% if show_search %}
           <hr class="visible-xs-block visible-sm-block">
-          <h2>Stembureaus</h2>
+          <h2><i class="fa fa-pencil-alt text-red"></i> Stembureaus</h2>
           <div class="row">
             <div class="col-xs-12">
               <form action="" method="get" class="form-inline" id="form-search">
diff --git a/app/templates/map.html b/app/templates/map.html
index c0f0586..aae6a78 100644
--- a/app/templates/map.html
+++ b/app/templates/map.html
@@ -1,20 +1,137 @@
 <div class="row">
   <div class="col-xs-12 col-md-4 col-lg-3 filters">
-    <h2>Filters</h2>
+    <h2><i class="fa fa-filter text-orange"></i> Filters</h2>
     <div style="padding-left: 10px">
+      <h3>Datum & tijdstip</h3>
       <label>
-        Geopend op
-        <select class="form-control" id="dag-filter">
-          <option value="alles" selected>(toon alle dagen)</option>
+        Verkiezingsdag
+        <select class="form-control filter" id="dag-filter">
+          <option value="" selected>(toon alle dagen)</option>
           <option value="14">maandag 14 maart</option>
           <option value="15">dinsdag 15 maart</option>
           <option value="16">woensdag 16 maart</option>
         </select>
       </label>
+      <label>
+        Openingstijden
+        <select class="form-control filter" id="openingstijden-filter">
+          <option value="" selected>(toon alles)</option>
+          <option value="regulier">Regulier (07:30 - 21:00)</option>
+          <option value="afwijkend">Afwijkend</option>
+        </select>
+      </label>
+      <br>
+
+      <div class="visible-md-block visible-lg-block">
+        <h3>Toegankelijkheid</h3>
+        <label>
+          Toegankelijk voor mensen met een lichamelijke beperking
+          <br>
+          <select class="form-control filter toegankelijk-filter">
+            <option value="" selected></option>
+            <option value="ja">Ja</option>
+            <option value="nee">Nee</option>
+          </select>
+        </label>
+        <br>
+        <label>
+          Visuele hulpmiddelen
+          <br>
+          <select class="form-control filter visuele-hulpmiddelen-filter">
+            <option value="" selected></option>
+            <option value="ja">Ja</option>
+          </select>
+        </label>
+        <br>
+        <label>
+          Auditieve hulpmiddelen
+          <br>
+          <select class="form-control filter auditieve-hulpmiddelen-filter">
+            <option value="" selected></option>
+            <option value="ja">Ja</option>
+          </select>
+        </label>
+        <br>
+        <label>
+          Akoestiek
+          <br>
+          <select class="form-control filter akoestiek-filter">
+            <option value="" selected></option>
+            <option value="ja">Ja</option>
+            <option value="nee">Nee</option>
+          </select>
+        </label>
+        <br>
+        <label>
+          Gehandicaptentoilet
+          <br>
+          <select class="form-control filter gehandicaptentoilet-filter">
+            <option value="" selected></option>
+            <option value="ja">Ja</option>
+            <option value="nee">Nee</option>
+          </select>
+        </label>
+      </div>
+
+      <div class="visible-xs-block visible-sm-block">
+        <button class="btn btn-default btn-xs" type="button" data-toggle="collapse" data-target="#collapseFilter" aria-expanded="false" aria-controls="collapseFilter">
+          Meer filters
+        </button>
+        <div class="collapse" id="collapseFilter">
+          <h3>Toegankelijkheid</h3>
+          <label>
+            Toegankelijk voor mensen met een lichamelijke beperking
+            <br>
+            <select class="form-control filter toegankelijk-filter">
+              <option value="" selected></option>
+              <option value="ja">Ja</option>
+              <option value="nee">Nee</option>
+            </select>
+          </label>
+          <br>
+          <label>
+            Visuele hulpmiddelen
+            <br>
+            <select class="form-control filter visuele-hulpmiddelen-filter">
+              <option value="" selected></option>
+              <option value="ja">Ja</option>
+            </select>
+          </label>
+          <br>
+          <label>
+            Auditieve hulpmiddelen
+            <br>
+            <select class="form-control filter auditieve-hulpmiddelen-filter">
+              <option value="" selected></option>
+              <option value="ja">Ja</option>
+            </select>
+          </label>
+          <br>
+          <label>
+            Akoestiek
+            <br>
+            <select class="form-control filter akoestiek-filter">
+              <option value="" selected></option>
+              <option value="ja">Ja</option>
+              <option value="nee">Nee</option>
+            </select>
+          </label>
+          <br>
+          <label>
+            Gehandicaptentoilet
+            <br>
+            <select class="form-control filter gehandicaptentoilet-filter">
+              <option value="" selected></option>
+              <option value="ja">Ja</option>
+              <option value="nee">Nee</option>
+            </select>
+          </label>
+        </div>
+      </div>
     </div>
   </div>
   <div class="col-xs-12 col-md-8 col-lg-9">
-    <h2>Kaart</h2>
+    <h2><i class="fa fa-map-marked-alt text-green"></i> Kaart</h2>
     <div style="padding-bottom: 20px;">
       <a href="#" id ="btn-location">
         <i class="fa fa-map-marker-alt" aria-hidden="true"></i> Gebruik mijn locatie
diff --git a/app/templates/show_alles.html b/app/templates/show_alles.html
index 1bc4d97..809a5fc 100644
--- a/app/templates/show_alles.html
+++ b/app/templates/show_alles.html
@@ -9,7 +9,7 @@ <h1>Alle stembureaus in Nederland</h1>
   {% if show_search %}
   <div class="col-xs-12 col-sm-12 col-md-3">
     <hr class="visible-xs-block visible-sm-block">
-    <h2>Zoek uw gemeente</h2>
+    <h2><i class="fa fa-users text-blue"></i> Zoek uw gemeente</h2>
     <div class="row">
       <div class="col-xs-12">
         <form action="" method="get" class="form-inline" id="form-gemeente-search">
diff --git a/app/templates/show_gemeente.html b/app/templates/show_gemeente.html
index 98049c0..046014b 100644
--- a/app/templates/show_gemeente.html
+++ b/app/templates/show_gemeente.html
@@ -19,7 +19,7 @@
     <div class="row">
       <div class="col-xs-12">
         <div class="text-center">
-          <h1>Gemeente {{ gemeente }}</h1>
+          <h1><i class="fa fa-users text-blue"></i> Gemeente {{ gemeente }}</h1>
         </div>
       </div>
     </div>
@@ -51,7 +51,7 @@ <h1>Gemeente {{ gemeente }}</h1>
         </div>
         <div class="col-xs-12 col-sm-12 col-md-3">
           <hr class="visible-xs-block visible-sm-block">
-          <h2>Stembureaus</h2>
+          <h2><i class="fa fa-pencil-alt text-red"></i> Stembureaus</h2>
           <div class="row">
             <div class="col-xs-12">
               <form action="" method="get" class="form-inline" id="form-search">