New close icon, fix #58, small tweaks to buurtnatuur quests

Customizations/LayerDefinition.ts

@@ -16,6 +16,12 @@ export class LayerDefinition {
      * This name is shown in the 'add XXX button'
      */
     name: string | UIElement;
+
+    /***
+     * This is shown under the 'add new' button to indicate what kind of feature one is adding.
+     */
+    description: string | UIElement
+
     /**
      * These tags are added whenever a new point is added by the user on the map.
      * This is the ideal place to add extra info, such as "fixme=added by MapComplete, geometry should be checked"

Customizations/Layers/Bos.ts

@@ -1,9 +1,7 @@
 import {LayerDefinition} from "../LayerDefinition";
-import {Quests} from "../../Quests";
+import {Or, Tag} from "../../Logic/TagsFilter";
-import {And, Or, Tag} from "../../Logic/TagsFilter";
 import {AccessTag} from "../Questions/AccessTag";
 import {OperatorTag} from "../Questions/OperatorTag";
-import {TagRenderingOptions} from "../TagRendering";
 import {NameQuestion} from "../Questions/NameQuestion";
 import {NameInline} from "../Questions/NameInline";
 import {DescriptionQuestion} from "../Questions/DescriptionQuestion";
@@ -13,8 +11,8 @@ export class Bos extends LayerDefinition {
 
     constructor() {
         super();
-        this.name = "bos";
+        this.name = "Bos";
-        this.icon = "./assets/tree_white_background.svg";
+        this.icon = "";
 
         this.overpassFilter = new Or([
                 new Tag("natural", "wood"),

Customizations/Layers/GhostBike.ts

@@ -12,10 +12,11 @@ export class GhostBike extends LayerDefinition {
         this.name = "ghost bike";
         this.overpassFilter = new Tag("memorial", "ghost_bike")
         this.title = new FixedText("Ghost bike");
+        this.description = "A <b>ghost bike</b> is a memorial for a cyclist who died in a traffic accident," +
+            " in the form of a white bicycle placed permanently near the accident location.";
 
         this.elementsToShow = [
-            new FixedText("A <b>ghost bike</b> is a memorial for a cyclist who died in a traffic accident," +
+            new FixedText(this.description),
-                " in the form of a white bicycle placed permanently near the accident location."),
             new ImageCarouselWithUploadConstructor(),
 
             new TagRenderingOptions({

Customizations/Layers/NatureReserves.ts

@@ -12,8 +12,8 @@ export class NatureReserves extends LayerDefinition {
     
     constructor(moreQuests: boolean = false) {
         super();
-        this.name = "natuurgebied";
+        this.name = "Natuurgebied";
-        this.icon = "./assets/tree_white_background.svg";
+        this.icon = "";
         this.overpassFilter =
             new Or([new Tag("leisure", "nature_reserve"), new Tag("boundary", "protected_area")]);
         this.maxAllowedOverlapPercentage = 10;

Customizations/Layers/Park.ts

@@ -1,5 +1,4 @@
 import {LayerDefinition} from "../LayerDefinition";
-import {Quests} from "../../Quests";
 import {And, Or, Tag} from "../../Logic/TagsFilter";
 import {AccessTag} from "../Questions/AccessTag";
 import {OperatorTag} from "../Questions/OperatorTag";
@@ -47,8 +46,8 @@ export class Park extends LayerDefinition {
 
     constructor() {
         super();
-        this.name = "park";
+        this.name = "Park";
-        this.icon = "";
+        this.icon = undefined;
         this.overpassFilter =
             new Or([new Tag("leisure", "park"), new Tag("landuse", "village_green")]);
         this.newElementTags = [new Tag("leisure", "park"),

Customizations/Layers/Viewpoint.ts

@@ -0,0 +1,6 @@
+import {LayerDefinition} from "../LayerDefinition";
+
+
+export class Viewpoint extends LayerDefinition{
+    
+}

Customizations/Layout.ts

@@ -89,7 +89,6 @@ export class WelcomeMessage extends UIElement {
         this.userDetails = osmConnection.userDetails;
 
         this.description = layout.welcomeMessage;
-        console.log("   >>>>",this.description, "DESCR ")
         this.plzLogIn = layout.gettingStartedPlzLogin;
         this.welcomeBack = layout.welcomeBackMessage;
         this.tail = layout.welcomeTail;

Customizations/Layouts/Groen.ts

@@ -39,10 +39,12 @@ export class Groen extends Layout {
             "<li>Je kan altijd een vraag overslaan als je het antwoord niet weet of niet zeker bent</li>" +
             "<li>Je kan altijd een foto toevoegen</li>" +
             "<li>Je kan ook zelf een gebied toevoegen door op de kaart te klikken</li>" +
+            "<li>Je kan deze website ook openen op je smartphone, zo kan je ter plaatse gaan om vragen te beantwoorden en foto's te maken</li>" +
             "</ul>" +
             "<small>" +
             "<p>" +
             "De oorspronkelijke data komt van <b>OpenStreetMap</b> en je antwoorden worden daar bewaard.<br/> Omdat iedereen vrij kan meewerken aan dit project, kunnen we niet garanderen dat er geen fouten opduiken." +
+            "Kan je hier niet aanpassen wat je wilt, dan kan je dat zelf via OpenStreetMap.org doen. Groen kan geen enkele verantwoordelijkheid nemen over de kaart." +
             "</p>" +
             "Je privacy is belangrijk. We tellen wel hoeveel gebruikers deze website bezoeken. We plaatsen een cookie waar geen persoonlijke informatie in bewaard wordt. " +
             "Als je inlogt, komt er een tweede cookie bij met je inloggegevens." +

Customizations/Questions/AccessTag.ts

@@ -8,7 +8,6 @@ export class AccessTag extends TagRenderingOptions {
     private static options = {
         priority: 20,
         question: "Is dit gebied toegankelijk?",
-        primer: "Dit gebied is ",
         freeform: {
             key: "access:description",
             template: "Iets anders: $$$",
@@ -16,15 +15,15 @@ export class AccessTag extends TagRenderingOptions {
             placeholder: "Specifieer"
         },
         mappings: [
-            {k: new And([new Tag("access", "yes"), new Tag("fee", "")]), txt: "publiek toegankelijk"},
+            {k: new And([new Tag("access", "yes"), new Tag("fee", "")]), txt: "Publiek toegankelijk"},
-            {k: new And([new Tag("access", "no"), new Tag("fee", "")]), txt: "niet toegankelijk"},
+            {k: new And([new Tag("access", "no"), new Tag("fee", "")]), txt: "Niet toegankelijk"},
-            {k: new And([new Tag("access", "private"), new Tag("fee", "")]), txt: "niet toegankelijk, want privegebied"},
+            {k: new And([new Tag("access", "private"), new Tag("fee", "")]), txt: "Niet toegankelijk, want privegebied"},
-            {k: new And([new Tag("access", "permissive"), new Tag("fee", "")]), txt: "toegankelijk, maar het is privegebied"},
+            {k: new And([new Tag("access", "permissive"), new Tag("fee", "")]), txt: "Toegankelijk, maar het is privegebied"},
-            {k: new And([new Tag("access", "guided"), new Tag("fee", "")]), txt: "enkel met gids of op activiteit"},
+            {k: new And([new Tag("access", "guided"), new Tag("fee", "")]), txt: "Enkel met gids of op activiteit"},
             {
                 k: new And([new Tag("access", "yes"),
                     new Tag("fee", "yes")]),
-                txt: "toegankelijk mits betaling",
+                txt: "Toegankelijk mits betaling",
                 priority: 10
             },
         ]

Customizations/Questions/OperatorTag.ts

@@ -12,8 +12,8 @@ export class OperatorTag extends TagRenderingOptions {
         question: "Wie beheert dit gebied?",
         freeform: {
             key: "operator",
-            template: "Dit gebied wordt beheerd door $$$",
+            template: "Beheer door $$$",
-            renderTemplate: "Dit gebied wordt beheerd door {operator}",
+            renderTemplate: "Beheer door {operator}",
             placeholder: "organisatie"
         },
         mappings: [

Logic/Basemap.ts

@@ -5,10 +5,19 @@ import {UIElement} from "../UI/UIElement";
 
 export class BaseLayers {
 
-    public static readonly defaultLayerName = "Kaart van OpenStreetMap";
+    public static readonly defaultLayer: { name: string, layer: any } = {
-    public static readonly baseLayers = {
+        name: "Kaart van OpenStreetMap", layer: L.tileLayer("https://tile.openstreetmap.org/{z}/{x}/{y}.png",
-        ["Luchtfoto Vlaanderen (recentste door AIV)"]:
+            {
-            L.tileLayer("https://tile.informatievlaanderen.be/ws/raadpleegdiensten/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&" +
+                attribution: '',
+                maxZoom: 19,
+                minZoom: 1
+            })
+    };
+    public static readonly baseLayers: { name: string, layer: any } [] = [
+
+        {
+            name: "Luchtfoto Vlaanderen (recentste door AIV)",
+            layer: L.tileLayer("https://tile.informatievlaanderen.be/ws/raadpleegdiensten/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&" +
                 "LAYER=omwrgbmrvl&STYLE=&FORMAT=image/png&tileMatrixSet=GoogleMapsVL&tileMatrix={z}&tileRow={y}&tileCol={x}",
                 {
                     // omwrgbmrvl
@@ -16,28 +25,29 @@ export class BaseLayers {
                     maxZoom: 20,
                     minZoom: 1,
                     wmts: true
-                }),
+                })
-        ["Luchtfoto Vlaanderen (2013-2015, door AIV)"]: L.tileLayer.wms('https://geoservices.informatievlaanderen.be/raadpleegdiensten/OGW/wms?s',
+        },
-            {
+        BaseLayers.defaultLayer,
-                layers: "OGWRGB13_15VL",
+        {
-                attribution: "Luchtfoto's van © AIV Vlaanderen (2013-2015) | "
+            name: "Luchtfoto Vlaanderen (2013-2015, door AIV)",
-            }),
+            layer: L.tileLayer.wms('https://geoservices.informatievlaanderen.be/raadpleegdiensten/OGW/wms?s',
-        [BaseLayers.defaultLayerName]: L.tileLayer("https://tile.openstreetmap.org/{z}/{x}/{y}.png",
+                {
-            {
+                    layers: "OGWRGB13_15VL",
-                attribution: '',
+                    attribution: "Luchtfoto's van © AIV Vlaanderen (2013-2015) | "
-                maxZoom: 19,
+                })
-                minZoom: 1
+        },
-            }),
+        {
-        ["Kaart Grootschalig ReferentieBestand Vlaanderen (GRB) door AIV"]: L.tileLayer("https://tile.informatievlaanderen.be/ws/raadpleegdiensten/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=grb_bsk&STYLE=&FORMAT=image/png&tileMatrixSet=GoogleMapsVL&tileMatrix={z}&tileCol={x}&tileRow={y}",
+            name: "Kaart Grootschalig ReferentieBestand Vlaanderen (GRB) door AIV",
-            {
+            layer: L.tileLayer("https://tile.informatievlaanderen.be/ws/raadpleegdiensten/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=grb_bsk&STYLE=&FORMAT=image/png&tileMatrixSet=GoogleMapsVL&tileMatrix={z}&tileCol={x}&tileRow={y}",
-                attribution: 'Achtergrond <i>Grootschalig ReferentieBestand</i>(GRB) © AGIV',
+                {
-                maxZoom: 20,
+                    attribution: 'Achtergrond <i>Grootschalig ReferentieBestand</i>(GRB) © AGIV',
-                minZoom: 1,
+                    maxZoom: 20,
-                wmts: true
+                    minZoom: 1,
-            }),
+                    wmts: true
-    };
+                })
-
+        }
-    public static readonly defaultLayer = BaseLayers.baseLayers[BaseLayers.defaultLayerName];
+    ]
+    ;
 
 }
 
@@ -50,13 +60,11 @@ export class Basemap {
 
     public Location: UIEventSource<{ zoom: number, lat: number, lon: number }>;
     public LastClickLocation: UIEventSource<{ lat: number, lon: number }> = new UIEventSource<{ lat: number, lon: number }>(undefined)
-    private _previousLayer : L.tileLayer= undefined;
+    private _previousLayer: L.tileLayer = undefined;
     public CurrentLayer: UIEventSource<{
         name: string,
         layer: L.tileLayer
-    }> = new UIEventSource<L.tileLayer>(
+    }> = new UIEventSource<L.tileLayer>(BaseLayers.defaultLayer);
-        {name: BaseLayers.defaultLayerName, layer: BaseLayers.defaultLayer}
-    );
 
 
     constructor(leafletElementId: string,
@@ -65,7 +73,7 @@ export class Basemap {
         this.map = L.map(leafletElementId, {
             center: [location.data.lat, location.data.lon],
             zoom: location.data.zoom,
-            layers: [BaseLayers.defaultLayer],
+            layers: [BaseLayers.defaultLayer.layer],
         });
 
 

UI/Input/DropDown.ts

@@ -10,7 +10,7 @@ export class DropDown<T> extends InputElement<T> {
     private readonly _label: UIElement;
     private readonly _values: { value: T; shown: UIElement }[];
 
-    private readonly _value;
+    private readonly _value : UIEventSource<T>;
 
     constructor(label: string | UIElement,
                 values: { value: T, shown: string | UIElement }[],
@@ -75,8 +75,6 @@ export class DropDown<T> extends InputElement<T> {
     }
 
     protected InnerUpdate(element) {
-       
-
         var e = document.getElementById("dropdown-" + this.id);
         if(e === null){
             return;
@@ -86,13 +84,13 @@ export class DropDown<T> extends InputElement<T> {
             // @ts-ignore
             var index = parseInt(e.selectedIndex);
             self._value.setData(self._values[index].value);
-
         });
 
         var t = this._value.data;
         for (let i = 0; i < this._values.length ; i++) {
-            const value = this._values[i];
+            const value = this._values[i].value;
-            if (value.value == t) {
+            console.log("Checking",value," against ",t, ":", t === value)
+            if (value === t) {
                 // @ts-ignore
                 e.selectedIndex = i;
             }

UI/LayerSelection.ts

@@ -2,6 +2,7 @@ import { UIElement } from "./UIElement";
 import { FilteredLayer } from "../Logic/FilteredLayer";
 import { CheckBox } from "./Input/CheckBox";
 import Combine from "./Base/Combine";
+import {Utils} from "../Utils";
 
 export class LayerSelection extends UIElement{
 

Utils.ts

@@ -14,4 +14,8 @@ export class Utils {
         }
         return undefined;
     }
-}
+    
+    public static Upper(str : string){
+        return str.substr(0,1).toUpperCase() + str.substr(1);
+    }
+}

assets/close.svg

@@ -0,0 +1,85 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="100"
+   height="100"
+   viewBox="0 0 26.458333 26.458334"
+   version="1.1"
+   id="svg8"
+   sodipodi:docname="close.svg"
+   inkscape:version="0.92.4 (5da689c313, 2019-01-14)">
+  <defs
+     id="defs2" />
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0.0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="2.8284271"
+     inkscape:cx="-12.514944"
+     inkscape:cy="118.94409"
+     inkscape:document-units="px"
+     inkscape:current-layer="layer1"
+     showgrid="false"
+     units="px"
+     showguides="true"
+     inkscape:guide-bbox="true"
+     inkscape:window-width="1920"
+     inkscape:window-height="1001"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1">
+    <sodipodi:guide
+       position="13.229167,23.859748"
+       orientation="1,0"
+       id="guide815"
+       inkscape:locked="false" />
+    <sodipodi:guide
+       position="14.944824,13.229167"
+       orientation="0,1"
+       id="guide817"
+       inkscape:locked="false" />
+  </sodipodi:namedview>
+  <metadata
+     id="metadata5">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title />
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(0,-270.54165)">
+    <g
+       id="g836"
+       transform="matrix(1.7481308,0,0,1.7481308,-10.001295,-212.27744)">
+      <path
+         inkscape:connector-curvature="0"
+         id="path815"
+         d="M 18.972892,289.3838 7.7469352,278.15784 v 0"
+         style="fill:none;stroke:#000000;stroke-width:3.4395833;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
+      <path
+         inkscape:connector-curvature="0"
+         id="path815-3"
+         d="M 18.98982,278.10371 7.7638604,289.32967 v 0"
+         style="fill:none;stroke:#000000;stroke-width:3.4395833;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
+    </g>
+  </g>
+</svg>

index.css

@@ -324,7 +324,7 @@ form {
     border-top-left-radius: 0;
     border-bottom-left-radius: 0;
     width: 100%;
-    max-width: 25vw;
+    max-width: 35vw;
 }
 
 #messagesbox {

index.ts

@@ -199,12 +199,7 @@ const closedFilterButton = `<button id="filter__button" class="filter__button fi
 const openFilterButton = `
 <button id="filter__button" class="filter__button">${Img.openFilterButton}</button>`;
 
-let baseLayerOptions = [];
+let baseLayerOptions =  BaseLayers.baseLayers.map((layer) => {return {value: layer, shown: layer.name}});
-for (const key in BaseLayers.baseLayers) {
-    baseLayerOptions.push({value: {name: key, layer: BaseLayers.baseLayers[key]}, shown: key});
-}
-
-
 const backgroundMapPicker = new Combine([new DropDown(`Background map`, baseLayerOptions, bm.CurrentLayer), openFilterButton]);
 const layerSelection = new Combine([`<p class="filter__label">Maplayers</p>`, new LayerSelection(flayers)]);
 let layerControl = backgroundMapPicker;
@@ -279,16 +274,14 @@ new UserBadge(osmConnection.userDetails,
 
 new SearchAndGo(bm).AttachTo("searchbox");
 
-/*
-new CollapseButton("messagesbox")
-    .AttachTo("collapseButton");*/
 const welcome = new WelcomeMessage(layoutToUse, osmConnection).onClick(() => {
 });
 
-const help = new FixedUiElement(`<div class='collapse-button-img'><img src='assets/help.svg'  alt='collapse'></div>`);
+const help = new FixedUiElement(`<div class='collapse-button-img'><img src='assets/help.svg'  alt='help'></div>`);
+const close = new FixedUiElement(`<div class='collapse-button-img'><img src='assets/close.svg'  alt='close'></div>`);
 new CheckBox(
     new Combine([
-        new Combine(["<span class='collapse-button'>", help, "</span>"]),
+        new Combine(["<span class='collapse-button'>", close, "</span>"]),
         welcome]),
     new Combine(["<span class='open-button'>", help, "</span>"])
     , true

test.ts

@@ -0,0 +1,9 @@
+import {DropDown} from "./UI/Input/DropDown";
+import {UIEventSource} from "./UI/UIEventSource";
+
+const source = new UIEventSource(10)
+
+const dd = new DropDown("Test", [
+    {value: 5, shown: "five"},
+    {value: 10, shown: "ten"}
+], source).AttachTo("maindiv")