feat: adding map filtering

package.json

@@ -13,7 +13,7 @@
         "dist/"
     ],
     "devDependencies": {
-        "@helsingborg-stad/openstreetmap": "^0.40.7",
+        "@helsingborg-stad/openstreetmap": "^0.40.10",
         "autoprefixer": "^10.4.2",
         "clean-webpack-plugin": "^4.0.0",
         "cross-env": "^7.0.3",

source/js/load.ts

@@ -13,7 +13,8 @@ class LoadHiddenField {
         private loadImageOverlaysInstance: LoadOptionDataInterface,
         private loadStartPositionInstance: LoadOptionDataInterface,
         private zoomInstance: Setting,
-        private mapStyleInstance: Setting
+        private mapStyleInstance: Setting,
+        private layerFilterInstance: Setting
     ) {
         let json = this.hiddenField.value;
         this.data = JSON.parse(json ?? '');
@@ -27,6 +28,7 @@ class LoadHiddenField {
         this.loadStartPositionInstance.load(this.data.startPosition as SavedStartPosition);
         this.zoomInstance.load(this.data.zoom);
         this.mapStyleInstance.load(this.data.mapStyle);
+        this.layerFilterInstance.load(this.data.layerFilter);
     }
 }
 

source/js/main.ts

@@ -38,6 +38,7 @@ import LoadImageOverlays from './options/createImageOverlay/loadImageOverlays';
 import SaveImageOverlays from './options/createImageOverlay/saveImageOverlays';
 import Zoom from './options/settings/zoom';
 import MapStyle from './options/settings/mapStyle';
+import LayerFilter from './options/settings/layerFilter';
 
 
 declare const acf: any;
@@ -74,6 +75,7 @@ class Main {
         // Settings
         const zoomInstance        = new Zoom(mapInstance, container);
         const mapStyleInstance    = new MapStyle(tileLayerInstance, attributionInstance, tilesHelperInstance, container);
+        const layerFilterInstance = new LayerFilter(container);
 
         // General
         const createMarkerInstance       = new CreateMarker();
@@ -182,7 +184,8 @@ class Main {
             new LoadImageOverlays(imageOverlayFactoryInstance),
             new LoadStartPosition(OptionSetStartPositionInstance),
             zoomInstance,
-            mapStyleInstance
+            mapStyleInstance,
+            layerFilterInstance
         );
 
         new SaveHiddenField(
@@ -192,7 +195,8 @@ class Main {
             new SaveImageOverlays(),
             new SaveStartPostion(OptionSetStartPositionInstance),
             zoomInstance,
-            mapStyleInstance
+            mapStyleInstance,
+            layerFilterInstance
         );
 
         // After data loaded

source/js/options/settings/layerFilter.ts

@@ -0,0 +1,31 @@
+import { Setting } from "./setting";
+
+class LayerFilter implements Setting {
+    container: HTMLElement|null;
+    setting: HTMLInputElement|undefined|null;
+
+    constructor(
+        container: HTMLElement
+    ) {
+        this.container = container.querySelector('[data-js-setting-layer-filter]');
+        this.setting = this.container?.querySelector('input');
+    }
+
+    public getValue(): "true"|"false" {    
+        return this.setting?.checked ? 'true' : 'false';
+    }
+
+    public save(): "true"|"false" {
+        return this.getValue();
+    }
+
+    public load(value: string): void {
+        if (!this.setting) {
+            return;
+        }
+
+        this.setting.checked = value === "true";
+    }
+}
+
+export default LayerFilter;

source/js/save.ts

@@ -12,7 +12,8 @@ class SaveHiddenField {
         imageOverlays: [],
         startPosition: null,
         zoom: "16",
-        mapStyle: "default"
+        mapStyle: "default",
+        layerFilter: "false"
     };
 
     constructor(
@@ -22,7 +23,8 @@ class SaveHiddenField {
         private saveImageOverlays: SaveOptionDataInterface,
         private saveStartPosition: SaveOptionDataInterface,
         private zoomInstance: Setting,
-        private mapStyleInstance: Setting
+        private mapStyleInstance: Setting,
+        private layerFilterInstance: Setting
     ) {
         acf.add_filter('validation_complete', (values: any, form: any) => {
             this.data.layerGroups = this.saveLayerGroups.save() as SavedLayerGroup;
@@ -31,6 +33,7 @@ class SaveHiddenField {
             this.data.startPosition = this.saveStartPosition.save() as SavedStartPosition;
             this.data.zoom = this.zoomInstance.save() as string;
             this.data.mapStyle = this.mapStyleInstance.save() as MapStyle;
+            this.data.layerFilter = this.layerFilterInstance.save() as "true"|"false";
             const json = JSON.stringify(this.data);
             this.hiddenField.value = json;
 

source/js/types.d.ts

@@ -34,4 +34,5 @@ type SaveData = {
     startPosition: SavedStartPosition;
     zoom: string;
     mapStyle: string;
+    layerFilter: "true"|"false";
 }

source/php/field.php

@@ -95,18 +95,25 @@ private function addSettings($id = '')
         <h2 style="padding: .5rem 0; font-weight: bold;">Settings</h2>
             <div class="acf-openstreetmap__settings">
                 <div class="acf-openstreetmap__setting" data-js-setting-zoom>
-                    <label for="setting-zoom-<?php echo $id; ?>">Initial Zoom</label>
+                    <label class="title" for="setting-zoom-<?php echo $id; ?>">Initial Zoom</label>
                     <input type="range" step="1" min="0" max="19" id="setting-zoom-<?php echo $id; ?>" name="zoom"></input>
                 </div>
                 <div class="acf-openstreetmap__setting" data-js-setting-map-style>
-                    <label for="setting-map-style-<?php echo $id; ?>">Map style</label>
+                    <label class="title" for="setting-map-style-<?php echo $id; ?>">Map style</label>
                     <select id="setting-map-style-<?php echo $id; ?>" name="map-style">
                         <option value="default">Default</option>
                         <option value="dark">Dark</option>
                         <option value="pale">Pale</option>
                         <option value="color">Color</option>
                     </select>
                 </div>
+                <div class="acf-openstreetmap__setting" data-js-setting-layer-filter>
+                    <span class="title">Allow layer filter</span>
+                    <label class="switch" for="setting-layer-filter-<?php echo $id; ?>" title="Allow layer filter">
+                        <input type="checkbox" id="setting-layer-filter-<?php echo $id; ?>">
+                        <span class="slider round"></span>
+                    </label>
+                </div>
             </div>
         <?php
     }

source/sass/setting.scss

@@ -11,4 +11,69 @@
     display: flex;
     flex-direction: column;
     flex: 0 0 12rem;
+
+    .title {
+        margin-bottom: .25rem;
+    }
+}
+
+.acf-openstreetmap__setting .switch {
+    position: relative;
+    display: inline-block;
+    width: 50px;
+    height: 26px;
+
+
+    input { 
+        opacity: 0;
+        width: 0;
+        height: 0;
+    }
+
+    .slider {
+        position: absolute;
+        cursor: pointer;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        background-color: #ccc;
+        -webkit-transition: .4s;
+        transition: .4s;
+    }
+
+    .slider:before {
+        position: absolute;
+        content: "";
+        height: 20px;
+        width: 20px;
+        left: 3px;
+        bottom: 3px;
+        background-color: white;
+        -webkit-transition: .4s;
+        transition: .4s;
+    }
+
+    input:checked + .slider {
+        background-color: #2196F3;
+    }
+
+    input:focus + .slider {
+        box-shadow: 0 0 1px #2196F3;
+    }
+
+    input:checked + .slider:before {
+        -webkit-transform: translateX(24px);
+        -ms-transform: translateX(24px);
+        transform: translateX(24px);
+    }
+
+    /* Rounded sliders */
+    .slider.round {
+        border-radius: 34px;
+    }
+
+    .slider.round:before {
+        border-radius: 50%;
+    }
 }