New close icon, fix #58, small tweaks to buurtnatuur quests
This commit is contained in:
parent
fac7aec20b
commit
7bbc140f05
18 changed files with 180 additions and 72 deletions
|
@ -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"
|
||||
|
|
|
@ -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"),
|
||||
|
|
|
@ -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," +
|
||||
" in the form of a white bicycle placed permanently near the accident location."),
|
||||
new FixedText(this.description),
|
||||
new ImageCarouselWithUploadConstructor(),
|
||||
|
||||
new TagRenderingOptions({
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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"),
|
||||
|
|
6
Customizations/Layers/Viewpoint.ts
Normal file
6
Customizations/Layers/Viewpoint.ts
Normal file
|
@ -0,0 +1,6 @@
|
|||
import {LayerDefinition} from "../LayerDefinition";
|
||||
|
||||
|
||||
export class Viewpoint extends LayerDefinition{
|
||||
|
||||
}
|
|
@ -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;
|
||||
|
|
|
@ -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." +
|
||||
|
|
|
@ -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
|
||||
},
|
||||
]
|
||||
|
|
|
@ -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: [
|
||||
|
|
|
@ -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 <i>Grootschalig ReferentieBestand</i>(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 <i>Grootschalig ReferentieBestand</i>(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<L.tileLayer>(
|
||||
{name: BaseLayers.defaultLayerName, layer: BaseLayers.defaultLayer}
|
||||
);
|
||||
}> = new UIEventSource<L.tileLayer>(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],
|
||||
});
|
||||
|
||||
|
||||
|
|
|
@ -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];
|
||||
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;
|
||||
}
|
||||
|
|
|
@ -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{
|
||||
|
||||
|
|
4
Utils.ts
4
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);
|
||||
}
|
||||
}
|
85
assets/close.svg
Normal file
85
assets/close.svg
Normal file
|
@ -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>
|
After Width: | Height: | Size: 2.7 KiB |
|
@ -324,7 +324,7 @@ form {
|
|||
border-top-left-radius: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
width: 100%;
|
||||
max-width: 25vw;
|
||||
max-width: 35vw;
|
||||
}
|
||||
|
||||
#messagesbox {
|
||||
|
|
15
index.ts
15
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 = [];
|
||||
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([`<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
|
||||
|
|
9
test.ts
9
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")
|
Loading…
Reference in a new issue