Merge branch 'project/natuurpunt' of https://github.com/pietervdvn/MapComplete into project/natuurpunt

Customizations/JSON/FilterConfig.ts

@@ -0,0 +1,27 @@
+import { TagsFilter } from "../../Logic/Tags/TagsFilter";
+import { Translation } from "../../UI/i18n/Translation";
+import Translations from "../../UI/i18n/Translations";
+import FilterConfigJson from "./FilterConfigJson";
+import { FromJSON } from "./FromJSON";
+
+export default class FilterConfig {
+  readonly options: {
+    question: Translation;
+    osmTags: TagsFilter;
+  }[];
+
+  constructor(json: FilterConfigJson, context: string) {
+    this.options = json.options.map((option, i) => {
+      const question = Translations.T(
+        option.question,
+        context + ".options-[" + i + "].question"
+      );
+      const osmTags = FromJSON.Tag(
+        option.osmTags,
+        `${context}.options-[${i}].osmTags`
+      );
+
+      return { question: question, osmTags: osmTags };
+    });
+  }
+}

Customizations/JSON/FilterConfigJson.ts

@@ -0,0 +1,11 @@
+import { AndOrTagConfigJson } from "./TagConfigJson";
+
+export default interface FilterConfigJson {
+  /**
+   * The options for a filter
+   * If there are multiple options these will be a list of radio buttons
+   * If there is only one option this will be a checkbox
+   * Filtering is done based on the given osmTags that are compared to the objects in that layer.
+   */
+  options: { question: string | any; osmTags: AndOrTagConfigJson | string }[];
+}

Customizations/JSON/LayerConfigJson.ts

@@ -1,6 +1,7 @@
 import {TagRenderingConfigJson} from "./TagRenderingConfigJson";
 import {AndOrTagConfigJson} from "./TagConfigJson";
 import {DeleteConfigJson} from "./DeleteConfigJson";
+import FilterConfigJson from "./FilterConfigJson";
 
 /**
  * Configuration for a single layer
@@ -233,6 +234,12 @@ export interface LayerConfigJson {
      */
     tagRenderings?: (string | TagRenderingConfigJson) [],
 
+
+    /**
+     * All the extra questions for filtering
+     */
+    filter?: (FilterConfigJson) [],
+
     /**
      * This block defines under what circumstances the delete dialog is shown for objects of this layer.
      * If set, a dialog is shown to the user to (soft) delete the point.

Svg.ts

@@ -54,6 +54,16 @@ export default class Svg {
     public static camera_plus_svg() { return new Img(Svg.camera_plus, true);}
     public static camera_plus_ui() { return new FixedUiElement(Svg.camera_plus_img);}
 
+    public static checkbox_empty = "<svg width=\"18\" height=\"18\" viewBox=\"0 0 18 18\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"> <rect x=\"1\" y=\"1\" width=\"16\" height=\"16\" rx=\"3\" stroke=\"#007759\" stroke-width=\"2\"/> </svg> "
+    public static checkbox_empty_img = Img.AsImageElement(Svg.checkbox_empty)
+    public static checkbox_empty_svg() { return new Img(Svg.checkbox_empty, true);}
+    public static checkbox_empty_ui() { return new FixedUiElement(Svg.checkbox_empty_img);}
+
+    public static checkbox_filled = "<svg width=\"18\" height=\"18\" viewBox=\"0 0 18 18\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"> <rect x=\"1\" y=\"1\" width=\"16\" height=\"16\" rx=\"3\" fill=\"#007759\" stroke=\"#007759\" stroke-width=\"2\"/> <path d=\"M3.5 8L8 13L14 5\" stroke=\"white\" stroke-width=\"2\" stroke-linecap=\"round\"/> </svg> "
+    public static checkbox_filled_img = Img.AsImageElement(Svg.checkbox_filled)
+    public static checkbox_filled_svg() { return new Img(Svg.checkbox_filled, true);}
+    public static checkbox_filled_ui() { return new FixedUiElement(Svg.checkbox_filled_img);}
+
     public static checkmark = "<svg width=\"26\" height=\"18\" viewBox=\"0 0 26 18\"  xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M3 7.28571L10.8261 15L23 3\" stroke=\"black\" stroke-width=\"4\" stroke-linejoin=\"round\" style=\"fill:none !important;\"/></svg>"
     public static checkmark_img = Img.AsImageElement(Svg.checkmark)
     public static checkmark_svg() { return new Img(Svg.checkmark, true);}
@@ -359,4 +369,4 @@ export default class Svg {
     public static wikipedia_svg() { return new Img(Svg.wikipedia, true);}
     public static wikipedia_ui() { return new FixedUiElement(Svg.wikipedia_img);}
 
-public static All = {"SocialImageForeground.svg": Svg.SocialImageForeground,"add.svg": Svg.add,"addSmall.svg": Svg.addSmall,"ampersand.svg": Svg.ampersand,"arrow-left-smooth.svg": Svg.arrow_left_smooth,"arrow-left-thin.svg": Svg.arrow_left_thin,"arrow-right-smooth.svg": Svg.arrow_right_smooth,"back.svg": Svg.back,"bug.svg": Svg.bug,"camera-plus.svg": Svg.camera_plus,"checkmark.svg": Svg.checkmark,"circle.svg": Svg.circle,"clock.svg": Svg.clock,"close.svg": Svg.close,"compass.svg": Svg.compass,"cross_bottom_right.svg": Svg.cross_bottom_right,"crosshair-blue-center.svg": Svg.crosshair_blue_center,"crosshair-blue.svg": Svg.crosshair_blue,"crosshair.svg": Svg.crosshair,"delete_icon.svg": Svg.delete_icon,"direction.svg": Svg.direction,"direction_gradient.svg": Svg.direction_gradient,"direction_masked.svg": Svg.direction_masked,"direction_outline.svg": Svg.direction_outline,"direction_stroke.svg": Svg.direction_stroke,"down.svg": Svg.down,"envelope.svg": Svg.envelope,"filter.svg": Svg.filter,"floppy.svg": Svg.floppy,"gear.svg": Svg.gear,"help.svg": Svg.help,"home.svg": Svg.home,"home_white_bg.svg": Svg.home_white_bg,"josm_logo.svg": Svg.josm_logo,"layers.svg": Svg.layers,"layersAdd.svg": Svg.layersAdd,"location.svg": Svg.location,"logo.svg": Svg.logo,"logout.svg": Svg.logout,"mapcomplete_logo.svg": Svg.mapcomplete_logo,"mapillary.svg": Svg.mapillary,"mapillary_black.svg": Svg.mapillary_black,"min-zoom.svg": Svg.min_zoom,"min.svg": Svg.min,"no_checkmark.svg": Svg.no_checkmark,"or.svg": Svg.or,"osm-copyright.svg": Svg.osm_copyright,"osm-logo-us.svg": Svg.osm_logo_us,"osm-logo.svg": Svg.osm_logo,"pencil.svg": Svg.pencil,"phone.svg": Svg.phone,"pin.svg": Svg.pin,"plus-zoom.svg": Svg.plus_zoom,"plus.svg": Svg.plus,"pop-out.svg": Svg.pop_out,"reload.svg": Svg.reload,"ring.svg": Svg.ring,"search.svg": Svg.search,"send_email.svg": Svg.send_email,"share.svg": Svg.share,"square.svg": Svg.square,"star.svg": Svg.star,"star_half.svg": Svg.star_half,"star_outline.svg": Svg.star_outline,"star_outline_half.svg": Svg.star_outline_half,"statistics.svg": Svg.statistics,"translate.svg": Svg.translate,"up.svg": Svg.up,"wikidata.svg": Svg.wikidata,"wikimedia-commons-white.svg": Svg.wikimedia_commons_white,"wikipedia.svg": Svg.wikipedia};}
+public static All = {"SocialImageForeground.svg": Svg.SocialImageForeground,"add.svg": Svg.add,"addSmall.svg": Svg.addSmall,"ampersand.svg": Svg.ampersand,"arrow-left-smooth.svg": Svg.arrow_left_smooth,"arrow-left-thin.svg": Svg.arrow_left_thin,"arrow-right-smooth.svg": Svg.arrow_right_smooth,"back.svg": Svg.back,"bug.svg": Svg.bug,"camera-plus.svg": Svg.camera_plus,"checkbox-empty.svg": Svg.checkbox_empty,"checkbox-filled.svg": Svg.checkbox_filled,"checkmark.svg": Svg.checkmark,"circle.svg": Svg.circle,"clock.svg": Svg.clock,"close.svg": Svg.close,"compass.svg": Svg.compass,"cross_bottom_right.svg": Svg.cross_bottom_right,"crosshair-blue-center.svg": Svg.crosshair_blue_center,"crosshair-blue.svg": Svg.crosshair_blue,"crosshair.svg": Svg.crosshair,"delete_icon.svg": Svg.delete_icon,"direction.svg": Svg.direction,"direction_gradient.svg": Svg.direction_gradient,"direction_masked.svg": Svg.direction_masked,"direction_outline.svg": Svg.direction_outline,"direction_stroke.svg": Svg.direction_stroke,"down.svg": Svg.down,"envelope.svg": Svg.envelope,"filter.svg": Svg.filter,"floppy.svg": Svg.floppy,"gear.svg": Svg.gear,"help.svg": Svg.help,"home.svg": Svg.home,"home_white_bg.svg": Svg.home_white_bg,"josm_logo.svg": Svg.josm_logo,"layers.svg": Svg.layers,"layersAdd.svg": Svg.layersAdd,"location.svg": Svg.location,"logo.svg": Svg.logo,"logout.svg": Svg.logout,"mapcomplete_logo.svg": Svg.mapcomplete_logo,"mapillary.svg": Svg.mapillary,"mapillary_black.svg": Svg.mapillary_black,"min-zoom.svg": Svg.min_zoom,"min.svg": Svg.min,"no_checkmark.svg": Svg.no_checkmark,"or.svg": Svg.or,"osm-copyright.svg": Svg.osm_copyright,"osm-logo-us.svg": Svg.osm_logo_us,"osm-logo.svg": Svg.osm_logo,"pencil.svg": Svg.pencil,"phone.svg": Svg.phone,"pin.svg": Svg.pin,"plus-zoom.svg": Svg.plus_zoom,"plus.svg": Svg.plus,"pop-out.svg": Svg.pop_out,"reload.svg": Svg.reload,"ring.svg": Svg.ring,"search.svg": Svg.search,"send_email.svg": Svg.send_email,"share.svg": Svg.share,"square.svg": Svg.square,"star.svg": Svg.star,"star_half.svg": Svg.star_half,"star_outline.svg": Svg.star_outline,"star_outline_half.svg": Svg.star_outline_half,"statistics.svg": Svg.statistics,"translate.svg": Svg.translate,"up.svg": Svg.up,"wikidata.svg": Svg.wikidata,"wikimedia-commons-white.svg": Svg.wikimedia_commons_white,"wikipedia.svg": Svg.wikipedia};}

UI/BigComponents/FilterView.ts

@@ -10,6 +10,7 @@ import LayerConfig from "../../Customizations/JSON/LayerConfig";
 import BaseUIElement from "../BaseUIElement";
 import { Translation } from "../i18n/Translation";
 import ScrollableFullScreen from "../Base/ScrollableFullScreen";
+import Svg from "../../Svg";
 
 /**
  * Shows the filter
@@ -26,14 +27,63 @@ export default class FilterView extends ScrollableFullScreen {
   }
 
   private static Generatecontent(): BaseUIElement {
-    let filterPanel: BaseUIElement = new FixedUiElement("more stuff");
+    let filterPanel: BaseUIElement = new FixedUiElement("");
 
     if (State.state.filteredLayers.data.length > 1) {
-      let layers = State.state.filteredLayers;
+      let activeLayers = State.state.filteredLayers;
-      console.log(layers);
-      filterPanel = new Combine(["layerssss", "<br/>", filterPanel]);
-    }
 
-    return filterPanel;
+      if (activeLayers === undefined) {
+        throw "ActiveLayers should be defined...";
+      }
+
+      const checkboxes: BaseUIElement[] = [];
+
+      for (const layer of activeLayers.data) {
+        const iconStyle = "width:1.5rem;height:1.5rem;margin-left:1.25rem";
+
+        const icon = new Combine([Svg.checkbox_filled]).SetStyle(iconStyle);
+        const iconUnselected = new Combine([Svg.checkbox_empty]).SetStyle(
+          iconStyle
+        );
+
+        if (layer.layerDef.name === undefined) {
+          continue;
+        }
+
+        const style = "display:flex;align-items:center;color:#007759";
+
+        const name: Translation = Translations.WT(layer.layerDef.name)?.Clone();
+
+        const styledNameChecked = name
+          .Clone()
+          .SetStyle("font-size:large;padding-left:1.25rem");
+
+        const styledNameUnChecked = name
+          .Clone()
+          .SetStyle("font-size:large;padding-left:1.25rem");
+
+        const layerChecked = new Combine([icon, styledNameChecked]).SetStyle(
+          style
+        );
+
+        const layerNotChecked = new Combine([
+          iconUnselected,
+          styledNameUnChecked,
+        ]).SetStyle(style);
+
+        checkboxes.push(
+          new Toggle(layerChecked, layerNotChecked, layer.isDisplayed)
+            .ToggleOnClick()
+            .SetStyle("margin:0.3em;")
+        );
+      }
+
+      let combinedCheckboxes = new Combine(checkboxes);
+      combinedCheckboxes.SetStyle("display:flex;flex-direction:column;");
+
+      filterPanel = new Combine([combinedCheckboxes]);
+
+      return filterPanel;
+    }
   }
 }

assets/svg/checkbox-empty.svg

@@ -0,0 +1,3 @@
+<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="1" y="1" width="16" height="16" rx="3" stroke="#007759" stroke-width="2"/>
+</svg>

assets/svg/checkbox-filled.svg

@@ -0,0 +1,4 @@
+<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="1" y="1" width="16" height="16" rx="3" fill="#007759" stroke="#007759" stroke-width="2"/>
+<path d="M3.5 8L8 13L14 5" stroke="white" stroke-width="2" stroke-linecap="round"/>
+</svg>

assets/svg/license_info.json

@@ -614,5 +614,29 @@
     "path": "filter.svg",
     "license": "CC0",
     "sources": []
+  },
+  {
+    "authors": [
+      "Hannah Declerck"
+    ],
+    "path": "checkbox-empty.svg",
+    "license": "CC0",
+    "sources": []
+  },
+  {
+    "authors": [
+      "Hannah Declerck"
+    ],
+    "path": "checkbox-filled.svg",
+    "license": "CC0",
+    "sources": []
+  },
+  {
+    "authors": [
+      "Hannah Declerck"
+    ],
+    "path": "arrow-left-thin.svg",
+    "license": "CC0",
+    "sources": []
   }
 ]

assets/themes/natuurpunt/natuurpunt.json

@@ -24,6 +24,7 @@
   "startZoom": 15,
   "widenFactor": 0.05,
   "socialImage": "",
+  "defaultBackgroundId": "CartoDB.Positron",
   "layers": [
     {
       "builtin": [
@@ -35,7 +36,10 @@
             "+and": [
               "operator~.*[nN]atuurpunt.*"
             ]
-          }
+          },
+          "geoJson": "https://pietervdvn.github.io/natuurpunt_cache/natuurpunt_{layer}_{z}_{x}_{y}.geojson",
+          "geoJsonZoomLevel": 12,
+          "isOsmCache": true
         },
         "minzoom": "10",
         "icon": {
@@ -53,7 +57,10 @@
             "+and": [
               "operator~.*[nN]atuurpunt.*"
             ]
-          }
+          },
+          "geoJson": "https://pietervdvn.github.io/natuurpunt_cache/natuurpunt_{layer}_{z}_{x}_{y}.geojson",
+          "geoJsonZoomLevel": 12,
+          "isOsmCache": true
         },
         "minzoom": "10",
         "icon": {
@@ -71,7 +78,10 @@
             "+and": [
               "operator~.*[nN]atuurpunt.*"
             ]
-          }
+          },
+          "geoJson": "https://pietervdvn.github.io/natuurpunt_cache/natuurpunt_{layer}_{z}_{x}_{y}.geojson",
+          "geoJsonZoomLevel": 12,
+          "isOsmCache": true
         },
         "minzoom": "13",
         "icon": {
@@ -95,6 +105,11 @@
       ],
       "override": {
         "minzoom": "15",
+        "source": {
+          "geoJson": "https://pietervdvn.github.io/natuurpunt_cache/natuurpunt_{layer}_{z}_{x}_{y}.geojson",
+          "geoJsonZoomLevel": 12,
+          "isOsmCache": true
+        },
         "icon": {
           "render": "circle:#FE6F32;./assets/themes/natuurpunt/toilets.svg",
           "mappings": [
@@ -116,6 +131,11 @@
       ],
       "override": {
         "minzoom": "15",
+        "source": {
+          "geoJson": "https://pietervdvn.github.io/natuurpunt_cache/natuurpunt_{layer}_{z}_{x}_{y}.geojson",
+          "geoJsonZoomLevel": 12,
+          "isOsmCache": true
+        },
         "icon": {
           "render": "circle:#FE6F32;./assets/themes/natuurpunt/birdhide.svg"
         }
@@ -127,6 +147,11 @@
       ],
       "override": {
         "minzoom": "16",
+        "source": {
+          "geoJson": "https://pietervdvn.github.io/natuurpunt_cache/natuurpunt_{layer}_{z}_{x}_{y}.geojson",
+          "geoJsonZoomLevel": 12,
+          "isOsmCache": true
+        },
         "icon": {
           "render": "circle:#FE6F32;./assets/themes/natuurpunt/picnic_table.svg"
         }
@@ -138,6 +163,11 @@
       ],
       "override": {
         "minzoom": "16",
+        "source": {
+          "geoJson": "https://pietervdvn.github.io/natuurpunt_cache/natuurpunt_{layer}_{z}_{x}_{y}.geojson",
+          "geoJsonZoomLevel": 12,
+          "isOsmCache": true
+        },
         "icon": {
           "render": "circle:#FE6F32;./assets/themes/natuurpunt/drips.svg"
         }
@@ -178,6 +208,11 @@
       ],
       "override": {
         "minzoom": "16",
+        "source": {
+          "geoJson": "https://pietervdvn.github.io/natuurpunt_cache/natuurpunt_{layer}_{z}_{x}_{y}.geojson",
+          "geoJsonZoomLevel": 12,
+          "isOsmCache": true
+        },
         "icon": {
           "render": "circle:#FE6F32;./assets/themes/natuurpunt/information_board.svg"
         }
@@ -189,6 +224,11 @@
       ],
       "override": {
         "minzoom": "18",
+        "source": {
+          "geoJson": "https://pietervdvn.github.io/natuurpunt_cache/natuurpunt_{layer}_{z}_{x}_{y}.geojson",
+          "geoJsonZoomLevel": 12,
+          "isOsmCache": true
+        },
         "icon": {
           "render": "circle:#FE6F32;./assets/themes/natuurpunt/bench.svg"
         }
@@ -200,6 +240,11 @@
       ],
       "override": {
         "minzoom": "18",
+        "source": {
+          "geoJson": "https://pietervdvn.github.io/natuurpunt_cache/natuurpunt_{layer}_{z}_{x}_{y}.geojson",
+          "geoJsonZoomLevel": 12,
+          "isOsmCache": true
+        },
         "icon": {
           "render": "circle:#FE6F32;./assets/themes/natuurpunt/watermill.svg"
         }