midgard/mapcomplete
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Add viewpoint for buurtnatuur, add translation of AddPointPoi

Browse source
This commit is contained in:
Pieter Vander Vennet 2020-07-24 15:52:21 +02:00
parent 7bbc140f05
commit c3d04c79b9
13 changed files with 271 additions and 71 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
Customizations/LayerDefinition.ts
View file

@ -88,7 +88,8 @@ export class LayerDefinition {
static WAYHANDLING_CENTER_AND_WAY = 2;
constructor(options: {
name: string,
name: string | UIElement,
description: string | UIElement,
newElementTags: Tag[],
icon: string,
minzoom: number,
@ -106,6 +107,7 @@ export class LayerDefinition {
return;
}
this.name = options.name;
this.description = options.description;
this.maxAllowedOverlapPercentage = options.maxAllowedOverlapPercentage ?? 0;
this.newElementTags = options.newElementTags;
this.icon = options.icon;
@ -119,7 +121,7 @@ export class LayerDefinition {
asLayer(basemap: Basemap, allElements: ElementStorage, changes: Changes, userDetails: UIEventSource<UserDetails>,
selectedElement: UIEventSource<{feature: any}>,
showOnPopup: (tags: UIEventSource<(any)>, feature: any) => UIElement):
showOnPopup: (tags: UIEventSource<any>, feature: any) => UIElement):
FilteredLayer {
return new FilteredLayer(
this,

42
Customizations/Layers/Viewpoint.ts
View file

@ -1,6 +1,46 @@
import {LayerDefinition} from "../LayerDefinition";
import L from "leaflet"
import {FixedUiElement} from "../../UI/Base/FixedUiElement";
import FixedText from "../Questions/FixedText";
import {Tag} from "../../Logic/TagsFilter";
import {ImageCarouselWithUploadConstructor} from "../../UI/Image/ImageCarouselWithUpload";
import {TagRenderingOptions} from "../TagRendering";
export class Viewpoint extends LayerDefinition {
export class Viewpoint extends LayerDefinition{
constructor() {
super({
name: "Bezienswaardigheid",
description: "Wil je een foto toevoegen van iets dat geen park, bos of natuurgebied is? Dit kan hiermee",
newElementTags: [new Tag("tourism", "viewpoint"), new Tag("fixme", "Added with mapcomplete. This viewpoint should probably me merged with some existing feature")],
icon: "assets/viewpoint.svg",
wayHandling: LayerDefinition.WAYHANDLING_CENTER_ONLY,
style: tags => {
return {
color: undefined, icon: new L.icon({
iconUrl: "assets/viewpoint.svg",
iconSize: [20, 20]
})
}
},
maxAllowedOverlapPercentage: 0,
overpassFilter: new Tag("tourism", "viewpoint"),
minzoom: 13,
title: new FixedText("Bezienswaardigheid")
});
this.elementsToShow = [
new FixedText(this.description),
new ImageCarouselWithUploadConstructor(),
new TagRenderingOptions({
question: "Zijn er bijzonderheden die je wilt toevoegen?",
freeform:{
key: "description:0",
template: "$$$",
renderTemplate: "<h3>Bijzonderheden</h3>{description:0}"
}
})
]
}
}

7
Customizations/Layouts/Groen.ts
View file

@ -2,6 +2,7 @@ import {NatureReserves} from "../Layers/NatureReserves";
import {Park} from "../Layers/Park";
import {Bos} from "../Layers/Bos";
import {Layout} from "../Layout";
import {Viewpoint} from "../Layers/Viewpoint";
export class Groen extends Layout {
@ -9,7 +10,7 @@ export class Groen extends Layout {
super("buurtnatuur",
["nl"],
"Buurtnatuur",
[new NatureReserves(), new Park(), new Bos()],
[new NatureReserves(), new Park(), new Bos(), new Viewpoint()],
10,
50.8435,
4.3688,
@ -39,12 +40,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>" +
"<li>Open buurtnatuur.be <b>op je smartphone</b> om al wandelend foto's te maken en vragen te beantwoorden</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." +
"Kan je hier niet aanpassen wat je wilt, dan kan je dat zelf via OpenStreetMap.org doen. Groen kan <b>geen enkele verantwoordelijkheid</b> 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." +

2
Logic/FilteredLayer.ts
View file

@ -49,7 +49,7 @@ export class FilteredLayer {
map: Basemap, storage: ElementStorage,
changes: Changes,
selectedElement: UIEventSource<any>,
showOnPopup: ((tags: UIEventSource<any>) => UIElement)
showOnPopup: ((tags: UIEventSource<any>, feature: any) => UIElement)
) {
this.layerDef = layerDef;

4
Logic/LayerUpdater.ts
View file

@ -57,12 +57,14 @@ export class LayerUpdater {
}
}
private _failCount = 0;
private handleFail(reason: any) {
console.log("QUERY FAILED (retrying in 1 sec)", reason);
this.previousBounds = undefined;
const self = this;
this._failCount++;
window.setTimeout(
function(){self.update()}, 1000
function(){self.update()}, this._failCount * 1000
)
}

5
UI/Base/Button.ts
View file

@ -1,4 +1,5 @@
import {UIElement} from "../UIElement";
import Locale from "../i18n/Locale";
export class Button extends UIElement {
private _text: UIElement;
@ -6,7 +7,7 @@ export class Button extends UIElement {
private _clss: string;
constructor(text: UIElement, onclick: (() => void), clss: string = "") {
super(undefined);
super(Locale.language);
this._text = text;
this._onclick = onclick;
if (clss !== "") {
@ -28,9 +29,7 @@ export class Button extends UIElement {
InnerUpdate(htmlElement: HTMLElement) {
super.InnerUpdate(htmlElement);
const self = this;
console.log("Update for ", htmlElement)
document.getElementById("button-"+this.id).onclick = function(){
console.log("Clicked");
self._onclick();
}
}

1
UI/Input/DropDown.ts
View file

@ -89,7 +89,6 @@ export class DropDown<T> extends InputElement<T> {
var t = this._value.data;
for (let i = 0; i < this._values.length ; i++) {
const value = this._values[i].value;
console.log("Checking",value," against ",t, ":", t === value)
if (value === t) {
// @ts-ignore
e.selectedIndex = i;

16
UI/SimpleAddUI.ts
View file

@ -6,6 +6,8 @@ import {Changes} from "../Logic/Changes";
import {FixedUiElement} from "./Base/FixedUiElement";
import {Button} from "./Base/Button";
import {UserDetails} from "../Logic/OsmConnection";
import Translations from "./i18n/Translations";
import Combine from "./Base/Combine";
/**
* Asks to add a feature at the last clicked location, at least if zoom is sufficient
@ -42,7 +44,7 @@ export class SimpleAddUI extends UIElement {
// <button type='button'> looks SO retarded
// the default type of button is 'submit', which performs a POST and page reload
const button =
new Button(new FixedUiElement("Add a " + option.name.Render() + " here"),
new Button(Translations.t.general.add.addNew.Subs({category: option.name}),
this.CreatePoint(option));
this._addButtons.push(button);
}
@ -60,25 +62,25 @@ export class SimpleAddUI extends UIElement {
}
InnerRender(): string {
const header = "<h2>No data here</h2>" +
"You clicked somewhere where no data is known yet.<br/>";
const header = Translations.t.general.add.header;
if (!this._userDetails.data.loggedIn) {
return header + "<a class='activate-osm-authentication'>Please log in to add a new point</a>"
return new Combine([header, Translations.t.general.add.pleaseLogin]).Render()
}
if (this._zoomlevel.data.zoom < 19) {
return header + "Zoom in further to add a point.";
return new Combine([header, Translations.t.general.add.zoomInFurther]).Render()
}
if (this._dataIsLoading.data) {
return header + "The data is still loading. Please wait a bit before you add a new point";
return new Combine([header, Translations.t.general.add.stillLoading]).Render()
}
var html = "";
for (const button of this._addButtons) {
html += button.Render();
}
return header + html;
return header.Render() + html;
}
InnerUpdate(htmlElement: HTMLElement) {

44
UI/i18n/Translation.ts
View file

@ -1,11 +1,48 @@
import { UIElement } from "../UIElement"
import {UIElement} from "../UIElement"
import Locale from "./Locale"
import {FixedUiElement} from "../Base/FixedUiElement";
import {TagUtils} from "../../Logic/TagsFilter";
import Combine from "../Base/Combine";
export default class Translation extends UIElement {
private static forcedLanguage = undefined;
public Subs(text: any /*Map<string, string | UIElement>*/) {
const newTranslations = {};
for (const lang in this.translations) {
let template: string = this.translations[lang];
for (const k in text) {
const combined = [];
const parts = template.split("{" + k + "}");
const el: string | UIElement = text[k];
let rtext: string = "";
console.log(parts)
if (typeof (el) === "string") {
rtext = el;
} else {
Translation.forcedLanguage = lang; // This is a very dirty hack - it'll bite me one day
rtext = el.InnerRender();
console.log(rtext)
}
for (let i = 0; i < parts.length - 1; i++) {
combined.push(parts[i]);
combined.push(rtext)
}
combined.push(parts[parts.length - 1]);
template = new Combine(combined).InnerRender();
}
newTranslations[lang] = template;
}
Translation.forcedLanguage = undefined;
return new Translation(newTranslations);
}
get txt(): string {
const txt = this.translations[Locale.language.data];
const txt = this.translations[Translation.forcedLanguage ?? Locale.language.data];
if (txt !== undefined) {
return txt;
}
@ -36,8 +73,9 @@ export default class Translation extends UIElement {
return new Translation(this.translations).Render();
}
public Clone(){
public Clone() {
return new Translation(this.translations)
}
}

24
UI/i18n/Translations.ts
View file

@ -391,9 +391,33 @@ export default class Translations {
number: new T({
en: "number",
nl: "getal"
}),
add: {
addNew: new T({
en: "Add a new {category} here",
nl: "Voeg hier een {category} toe"
}),
header: new T({
en: "<h2>No data</h2>You clicked somewhere where no data is known yet.<br/>",
nl: "<h2>Geen selectie</h2>Je klikte ergens waar er nog geen data is.<br/>"
}),
pleaseLogin: new T({
en: "<a class='activate-osm-authentication'>Please log in to add a new point</a>",
nl: "<a class='activate-osm-authentication'>Gelieve je aan te melden om een punt to te voegen</a>"
}),
zoomInFurther: new T({
en: "Zoom in further to add a point.",
nl: "Gelieve verder in te zoomen om een punt toe te voegen"
}),
stillLoading: new T({
en: "The data is still loading. Please wait a bit before you add a new point",
nl: "De data wordt nog geladen. Nog even geduld en dan kan je een punt toevoegen."
})
}
}
}
public static W(s: string | UIElement): UIElement {
if (s instanceof UIElement) {

82
assets/viewpoint.svg Normal file
View file

@ -0,0 +1,82 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<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"
version="1.1"
width="16"
height="16"
viewBox="0 0 16 16"
id="svg2"
sodipodi:docname="viewpoint.svg"
inkscape:version="0.92.4 (5da689c313, 2019-01-14)">
<sodipodi:namedview
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1"
objecttolerance="10"
gridtolerance="10"
guidetolerance="10"
inkscape:pageopacity="0"
inkscape:pageshadow="2"
inkscape:window-width="1920"
inkscape:window-height="1001"
id="namedview7"
showgrid="false"
inkscape:zoom="14.75"
inkscape:cx="8"
inkscape:cy="4.0750604"
inkscape:window-x="0"
inkscape:window-y="0"
inkscape:window-maximized="1"
inkscape:current-layer="layer2" />
<metadata
id="metadata8">
<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>
<defs
id="defs6" />
<g
inkscape:groupmode="layer"
id="layer2"
inkscape:label="background">
<circle
style="fill:#ffffff;fill-opacity:1;stroke:#ffffff;stroke-width:75;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
id="path817"
cx="8"
cy="8"
r="8" />
</g>
<rect
width="16"
height="16"
x="0"
y="0"
id="canvas"
style="fill:none;stroke:none;visibility:hidden" />
<g
inkscape:groupmode="layer"
id="layer1"
inkscape:label="icon"
sodipodi:insensitive="true"
style="display:inline">
<path
d="m 9.65625,0.59375 c -0.3024732,0.0462641 -0.5739493,0.24857188 -0.75,0.5 C 8.4915325,1.6542533 8.3846231,2.3479287 8.1875,3 7.9662603,3.8420605 7.7522058,4.7006473 7.625,5.5625 7.6044,5.8106582 7.7926492,5.8644805 8.03125,5.625 8.8564261,4.8565483 9.6689927,4.0447405 10.46875,3.25 10.66307,3.0435127 10.857947,2.8397801 11,2.59375 c 0.22114,-0.3696454 0.325018,-0.8581921 0.09375,-1.25 -0.238762,-0.3960416 -0.675926,-0.6652283 -1.125,-0.75 -0.1037376,-0.0197567 -0.2116756,-0.0154214 -0.3125,0 z m -5.4375,0.0625 C 3.756376,0.664435 3.298377,0.9038402 3,1.25 2.7236959,1.5695061 2.7337489,2.0351336 2.90625,2.40625 3.1835185,3.0459969 3.721958,3.5026801 4.1875,4 4.8053738,4.6133884 5.4428785,5.2080755 6.125,5.75 6.3294366,5.8921706 6.4627003,5.7639689 6.375,5.4375 6.1234386,4.3383434 5.8495515,3.246582 5.5625,2.15625 5.4811703,1.8846207 5.3917386,1.5899614 5.25,1.34375 5.0409086,0.9671579 4.6737053,0.6524279 4.21875,0.65625 Z M 1,5.65625 C 0.6728589,5.7133884 0.35581084,5.8906685 0.1875,6.1875 -0.03684961,6.5918816 -0.05657638,7.0996758 0.09375,7.53125 0.23204898,7.9303783 0.65487609,8.1823302 1.0625,8.21875 1.7551236,8.2989321 2.398939,8.029096 3.0625,7.875 3.9027885,7.6471232 4.7519195,7.4130156 5.5625,7.09375 5.787908,6.9879268 5.7327889,6.7749958 5.40625,6.6875 4.3287785,6.3551066 3.2438454,6.0472518 2.15625,5.75 1.8803888,5.6844434 1.596594,5.6567822 1.3125,5.65625 1.2048302,5.6543848 1.109047,5.6372039 1,5.65625 Z m 11.6875,0 C 12.403405,5.6567822 12.119611,5.684443 11.84375,5.75 10.756155,6.0472518 9.6712203,6.3551066 8.59375,6.6875 8.2672114,6.7749958 8.21209,6.9879301 8.4375,7.09375 c 0.8105812,0.3192656 1.659711,0.5533732 2.5,0.78125 0.663559,0.154096 1.307371,0.4239353 2,0.34375 0.407624,-0.03642 0.830451,-0.2883717 0.96875,-0.6875 C 14.056568,7.0996758 14.036852,6.5918816 13.8125,6.1875 13.588087,5.7917247 13.118179,5.64879 12.6875,5.65625 Z M 6.28125,8.0625 C 6.24107,8.0647215 6.1761092,8.0894573 6.125,8.125 5.4428785,8.6669264 4.8053738,9.2928641 4.1875,9.90625 3.721958,10.403571 3.1835185,10.829001 2.90625,11.46875 2.7337489,11.839865 2.7236959,12.305494 3,12.625 3.298377,12.97116 3.756376,13.241771 4.21875,13.25 4.6737053,13.253823 5.0409086,12.90784 5.25,12.53125 5.3917386,12.285037 5.48117,12.02163 5.5625,11.75 5.8495515,10.659668 6.1234386,9.5366567 6.375,8.4375 6.4407752,8.1926478 6.4017899,8.0558356 6.28125,8.0625 Z M 7.75,8.125 C 7.676409,8.138699 7.6147,8.21967 7.625,8.34375 c 0.1272058,0.8618534 0.3412603,1.689188 0.5625,2.53125 0.1971231,0.652072 0.3040361,1.376995 0.71875,1.9375 0.2347344,0.335235 0.6475495,0.54778 1.0625,0.46875 0.449074,-0.08477 0.886238,-0.353959 1.125,-0.75 C 11.325022,12.139441 11.22114,11.650893 11,11.28125 10.857947,11.035219 10.66307,10.831485 10.46875,10.625 9.6689927,9.8302564 8.8564261,9.0496977 8.03125,8.28125 7.9119496,8.1615102 7.8235913,8.1113005 7.75,8.125 Z"
id="viewpoint"
style="fill:#734a08;fill-opacity:1"
transform="translate(1,1)"
inkscape:connector-curvature="0" />
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 5 KiB

96
index.css
View file

@ -252,10 +252,6 @@ form {
margin: 0.5em;
}
.collapse-button {
height: calc(100% - 3.5em) !important;
}
}
@ -285,7 +281,7 @@ form {
border-top-left-radius: 2em;
border-bottom-left-radius: 2em;
display: inline-block;
height:calc(100% - 8em);
height:100%;
}
.collapse-button .collapse-button-img{
@ -329,6 +325,7 @@ form {
#messagesbox {
/*Only shown on big screens*/
position: relative;
padding: 0;
pointer-events: all;
}
@ -429,6 +426,33 @@ form {
border-radius: 15px 15px 0 0;
}
#centermessage {
position: absolute;
top: 30%;
left: 25%;
width: 50%;
font-size: large;
padding: 2em;
border-radius: 2em;
z-index: 4000;
pointer-events: none;
opacity: 1;
background-color: white;
transition: opacity 500ms linear;
text-align: center;
horiz-align: center;
font-weight: bold;
}
@media only screen and (max-width: 600px), only screen and (max-height: 300px) {
#messagesbox-wrapper {
display: none;
@ -447,6 +471,13 @@ form {
display: none;
}
#centermessage {
top: 30%;
left: 15%;
width: 60%;
}
#messagesboxmobilewrapper {
position: absolute;
padding: 0;
@ -476,6 +507,19 @@ form {
border-radius: 1em;
background-color: white;
}
#welcomeMessage {
display: inline-block;
background-color: white;
padding: 1em;
border-radius: 0;
width: 100%;
max-width: 100%;
margin: 0;
box-sizing: border-box;
}
}
@ -541,45 +585,11 @@ form {
}
#logo {
position: relative;
display: flex;
float: right;
.logo {
float:right;
margin: 1em;
margin-top: 0;
margin-right: -0.5em;
padding: 0;
right: 1em;
top: 1em;
border-radius: 0;
}
#centermessage {
position: absolute;
display: block ruby;
margin: auto;
top: 30%;
left: 50%;
margin-left: -15%;
width: 30%;
font-size: large;
padding: 2em;
border-radius: 2em;
z-index: 5000;
pointer-events: none;
opacity: 1;
background-color: white;
transition: opacity 500ms linear;
text-align: center;
horiz-align: center;
font-weight: bold;
width: 10em;
height: auto;
}
#bottomRight {

7
index.ts
View file

@ -274,8 +274,7 @@ new UserBadge(osmConnection.userDetails,
new SearchAndGo(bm).AttachTo("searchbox");
const welcome = new WelcomeMessage(layoutToUse, osmConnection).onClick(() => {
});
const welcome = new WelcomeMessage(layoutToUse, osmConnection).onClick(() => {});
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>`);
@ -291,6 +290,8 @@ new CheckBox(
new FullScreenMessageBoxHandler(fullScreenMessage, () => {
selectedElement.setData(undefined)
}).update();
fullScreenMessage.setData(new WelcomeMessage(layoutToUse, osmConnection))
new CenterMessageBox(
minZoom,
@ -310,5 +311,5 @@ osmConnection.registerActivateOsmAUthenticationClass();
new GeoLocationHandler(bm).AttachTo("geolocate-button");
locationControl.ping()