From 7bbc140f05adfa9a311c58ac3944883151f722e9 Mon Sep 17 00:00:00 2001 From: Pieter Vander Vennet Date: Fri, 24 Jul 2020 14:46:25 +0200 Subject: [PATCH] New close icon, fix #58, small tweaks to buurtnatuur quests --- Customizations/LayerDefinition.ts | 6 ++ Customizations/Layers/Bos.ts | 8 +-- Customizations/Layers/GhostBike.ts | 5 +- Customizations/Layers/NatureReserves.ts | 4 +- Customizations/Layers/Park.ts | 5 +- Customizations/Layers/Viewpoint.ts | 6 ++ Customizations/Layout.ts | 1 - Customizations/Layouts/Groen.ts | 2 + Customizations/Questions/AccessTag.ts | 13 ++-- Customizations/Questions/OperatorTag.ts | 4 +- Logic/Basemap.ts | 70 +++++++++++--------- UI/Input/DropDown.ts | 10 ++- UI/LayerSelection.ts | 1 + Utils.ts | 6 +- assets/close.svg | 85 +++++++++++++++++++++++++ index.css | 2 +- index.ts | 15 ++--- test.ts | 9 +++ 18 files changed, 180 insertions(+), 72 deletions(-) create mode 100644 Customizations/Layers/Viewpoint.ts create mode 100644 assets/close.svg diff --git a/Customizations/LayerDefinition.ts b/Customizations/LayerDefinition.ts index ce3fbe6..4cbe83b 100644 --- a/Customizations/LayerDefinition.ts +++ b/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" diff --git a/Customizations/Layers/Bos.ts b/Customizations/Layers/Bos.ts index a396550..36cf4bf 100644 --- a/Customizations/Layers/Bos.ts +++ b/Customizations/Layers/Bos.ts @@ -1,9 +1,7 @@ import {LayerDefinition} from "../LayerDefinition"; -import {Quests} from "../../Quests"; -import {And, Or, Tag} from "../../Logic/TagsFilter"; +import {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.icon = "./assets/tree_white_background.svg"; + this.name = "Bos"; + this.icon = ""; this.overpassFilter = new Or([ new Tag("natural", "wood"), diff --git a/Customizations/Layers/GhostBike.ts b/Customizations/Layers/GhostBike.ts index 50e2752..751f72f 100644 --- a/Customizations/Layers/GhostBike.ts +++ b/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 ghost bike 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 ghost bike 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."), + new FixedText(this.description), new ImageCarouselWithUploadConstructor(), new TagRenderingOptions({ diff --git a/Customizations/Layers/NatureReserves.ts b/Customizations/Layers/NatureReserves.ts index a0a1d94..15b59aa 100644 --- a/Customizations/Layers/NatureReserves.ts +++ b/Customizations/Layers/NatureReserves.ts @@ -12,8 +12,8 @@ export class NatureReserves extends LayerDefinition { constructor(moreQuests: boolean = false) { super(); - this.name = "natuurgebied"; - this.icon = "./assets/tree_white_background.svg"; + this.name = "Natuurgebied"; + this.icon = ""; this.overpassFilter = new Or([new Tag("leisure", "nature_reserve"), new Tag("boundary", "protected_area")]); this.maxAllowedOverlapPercentage = 10; diff --git a/Customizations/Layers/Park.ts b/Customizations/Layers/Park.ts index ba7a6c5..b8106e7 100644 --- a/Customizations/Layers/Park.ts +++ b/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.icon = ""; + this.name = "Park"; + this.icon = undefined; this.overpassFilter = new Or([new Tag("leisure", "park"), new Tag("landuse", "village_green")]); this.newElementTags = [new Tag("leisure", "park"), diff --git a/Customizations/Layers/Viewpoint.ts b/Customizations/Layers/Viewpoint.ts new file mode 100644 index 0000000..37fa9c7 --- /dev/null +++ b/Customizations/Layers/Viewpoint.ts @@ -0,0 +1,6 @@ +import {LayerDefinition} from "../LayerDefinition"; + + +export class Viewpoint extends LayerDefinition{ + +} \ No newline at end of file diff --git a/Customizations/Layout.ts b/Customizations/Layout.ts index bbeccf4..597c6fd 100644 --- a/Customizations/Layout.ts +++ b/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; diff --git a/Customizations/Layouts/Groen.ts b/Customizations/Layouts/Groen.ts index 991a618..b5094b4 100644 --- a/Customizations/Layouts/Groen.ts +++ b/Customizations/Layouts/Groen.ts @@ -39,10 +39,12 @@ export class Groen extends Layout { "
  • Je kan altijd een vraag overslaan als je het antwoord niet weet of niet zeker bent
    • " + "
  • Je kan altijd een foto toevoegen
    • " + "
  • Je kan ook zelf een gebied toevoegen door op de kaart te klikken
    • " + + "
  • Je kan deze website ook openen op je smartphone, zo kan je ter plaatse gaan om vragen te beantwoorden en foto's te maken
    • " + "" + "" + "

    " + "De oorspronkelijke data komt van OpenStreetMap en je antwoorden worden daar bewaard.
    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." + "

    " + "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." + diff --git a/Customizations/Questions/AccessTag.ts b/Customizations/Questions/AccessTag.ts index b86d243..44b5025 100644 --- a/Customizations/Questions/AccessTag.ts +++ b/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", "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", "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", "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", "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", "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 }, ] diff --git a/Customizations/Questions/OperatorTag.ts b/Customizations/Questions/OperatorTag.ts index 8581a3b..cf98833 100644 --- a/Customizations/Questions/OperatorTag.ts +++ b/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 $$$", - renderTemplate: "Dit gebied wordt beheerd door {operator}", + template: "Beheer door $$$", + renderTemplate: "Beheer door {operator}", placeholder: "organisatie" }, mappings: [ diff --git a/Logic/Basemap.ts b/Logic/Basemap.ts index d4fb2a1..f5c37e9 100644 --- a/Logic/Basemap.ts +++ b/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 baseLayers = { - ["Luchtfoto Vlaanderen (recentste door AIV)"]: - L.tileLayer("https://tile.informatievlaanderen.be/ws/raadpleegdiensten/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&" + + public static readonly defaultLayer: { name: string, layer: any } = { + name: "Kaart van OpenStreetMap", layer: L.tileLayer("https://tile.openstreetmap.org/{z}/{x}/{y}.png", + { + 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', - { - layers: "OGWRGB13_15VL", - attribution: "Luchtfoto's van © AIV Vlaanderen (2013-2015) | " - }), - [BaseLayers.defaultLayerName]: L.tileLayer("https://tile.openstreetmap.org/{z}/{x}/{y}.png", - { - attribution: '', - 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}", - { - attribution: 'Achtergrond Grootschalig ReferentieBestand(GRB) © AGIV', - maxZoom: 20, - minZoom: 1, - wmts: true - }), - }; - - public static readonly defaultLayer = BaseLayers.baseLayers[BaseLayers.defaultLayerName]; + }) + }, + BaseLayers.defaultLayer, + { + name: "Luchtfoto Vlaanderen (2013-2015, door AIV)", + layer: L.tileLayer.wms('https://geoservices.informatievlaanderen.be/raadpleegdiensten/OGW/wms?s', + { + layers: "OGWRGB13_15VL", + attribution: "Luchtfoto's van © AIV Vlaanderen (2013-2015) | " + }) + }, + { + 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 Grootschalig ReferentieBestand(GRB) © AGIV', + maxZoom: 20, + minZoom: 1, + wmts: true + }) + } + ] + ; } @@ -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( - {name: BaseLayers.defaultLayerName, layer: BaseLayers.defaultLayer} - ); + }> = new UIEventSource(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], }); diff --git a/UI/Input/DropDown.ts b/UI/Input/DropDown.ts index 4c53af4..b590e0d 100644 --- a/UI/Input/DropDown.ts +++ b/UI/Input/DropDown.ts @@ -10,7 +10,7 @@ export class DropDown extends InputElement { private readonly _label: UIElement; private readonly _values: { value: T; shown: UIElement }[]; - private readonly _value; + private readonly _value : UIEventSource; constructor(label: string | UIElement, values: { value: T, shown: string | UIElement }[], @@ -75,8 +75,6 @@ export class DropDown extends InputElement { } protected InnerUpdate(element) { - - var e = document.getElementById("dropdown-" + this.id); if(e === null){ return; @@ -86,13 +84,13 @@ export class DropDown extends InputElement { // @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]; - if (value.value == t) { + const value = this._values[i].value; + console.log("Checking",value," against ",t, ":", t === value) + if (value === t) { // @ts-ignore e.selectedIndex = i; } diff --git a/UI/LayerSelection.ts b/UI/LayerSelection.ts index 021ef76..27be49a 100644 --- a/UI/LayerSelection.ts +++ b/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{ diff --git a/Utils.ts b/Utils.ts index 253159d..081cd24 100644 --- a/Utils.ts +++ b/Utils.ts @@ -14,4 +14,8 @@ export class Utils { } return undefined; } -} \ No newline at end of file + + public static Upper(str : string){ + return str.substr(0,1).toUpperCase() + str.substr(1); + } +} diff --git a/assets/close.svg b/assets/close.svg new file mode 100644 index 0000000..82be2b8 --- /dev/null +++ b/assets/close.svg @@ -0,0 +1,85 @@ + + + + + + + + + + + + + image/svg+xml + + + + + + + + + + + + diff --git a/index.css b/index.css index 1897bbe..14d9074 100644 --- a/index.css +++ b/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 { diff --git a/index.ts b/index.ts index a9248e1..42662f2 100644 --- a/index.ts +++ b/index.ts @@ -199,12 +199,7 @@ const closedFilterButton = ``; -let baseLayerOptions = []; -for (const key in BaseLayers.baseLayers) { - baseLayerOptions.push({value: {name: key, layer: BaseLayers.baseLayers[key]}, shown: key}); -} - - +let baseLayerOptions = BaseLayers.baseLayers.map((layer) => {return {value: layer, shown: layer.name}}); const backgroundMapPicker = new Combine([new DropDown(`Background map`, baseLayerOptions, bm.CurrentLayer), openFilterButton]); const layerSelection = new Combine([`

    Maplayers

    `, 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(`
    collapse
    `); +const help = new FixedUiElement(`
    help
    `); +const close = new FixedUiElement(`
    close
    `); new CheckBox( new Combine([ - new Combine(["", help, ""]), + new Combine(["", close, ""]), welcome]), new Combine(["", help, ""]) , true diff --git a/test.ts b/test.ts index e69de29..0ffeb9f 100644 --- a/test.ts +++ b/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")