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

Merge branch 'master' of github.com:pietervdvn/MapComplete

Browse source
This commit is contained in:
Pieter Fiers 2020-07-30 09:33:09 +02:00
commit 416ececb64
55 changed files with 646 additions and 334 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
Customizations/AllKnownLayouts.ts
View file

@ -12,6 +12,7 @@ import {Widths} from "./Layers/Widths";
import {StreetWidth} from "./Layouts/StreetWidth";
import {NatureReserves} from "./Layers/NatureReserves";
import {Natuurpunt} from "./Layouts/Natuurpunt";
import Translations from "../UI/i18n/Translations";
export class AllKnownLayouts {
public static allSets = AllKnownLayouts.AllLayouts();

20
Customizations/LayerDefinition.ts
View file

@ -13,7 +13,7 @@ export class LayerDefinition {
/**
* This name is shown in the 'add XXX button'
* This name is used in the 'hide or show this layer'-buttons
*/
name: string | UIElement;
@ -26,7 +26,12 @@ export class LayerDefinition {
* 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"
*/
newElementTags: Tag[]
presets: {
tags: Tag[],
title: string | UIElement,
description?: string | UIElement,
icon?: string
}[]
/**
* Not really used anymore
* This is meant to serve as icon in the buttons
@ -91,9 +96,14 @@ export class LayerDefinition {
static WAYHANDLING_CENTER_AND_WAY = 2;
constructor(options: {
name: string | UIElement,
name: string,
description: string | UIElement,
newElementTags: Tag[],
presets: {
tags: Tag[],
title: string | UIElement,
description?: string | UIElement,
icon?: string
}[],
icon: string,
minzoom: number,
overpassFilter: TagsFilter,
@ -112,7 +122,7 @@ export class LayerDefinition {
this.name = options.name;
this.description = options.description;
this.maxAllowedOverlapPercentage = options.maxAllowedOverlapPercentage ?? 0;
this.newElementTags = options.newElementTags;
this.presets = options.presets;
this.icon = options.icon;
this.minzoom = options.minzoom;
this.overpassFilter = options.overpassFilter;

15
Customizations/Layers/BikeCafes.ts
View file

@ -9,6 +9,7 @@ import Website from "../Questions/Website";
import CafeRepair from "../Questions/bike/CafeRepair";
import CafeDiy from "../Questions/bike/CafeDiy";
import CafePump from "../Questions/bike/CafePump";
import {EmailQuestion} from "../Questions/EmailQuestion";
export default class BikeCafes extends LayerDefinition {
@ -25,11 +26,18 @@ export default class BikeCafes extends LayerDefinition {
new Tag("pub", "cycling")
])
])
this.newElementTags = [
this.presets = [
{
title: Translations.t.cyclofix.cafe.title,
tags : [
new Tag("amenity", "pub"),
new Tag("pub", "cycling"),
]
this.maxAllowedOverlapPercentage = 10
}
]
this.maxAllowedOverlapPercentage = 10;
this.minzoom = 13
this.style = this.generateStyleFunction()
@ -37,8 +45,9 @@ export default class BikeCafes extends LayerDefinition {
this.elementsToShow = [
new ImageCarouselWithUploadConstructor(),
new CafeName(),
new PhoneNumberQuestion("{name}"),
new Website("{name}"),
new PhoneNumberQuestion("{name}"),
new EmailQuestion("{name}"),
new CafeRepair(),
new CafeDiy(),
new CafePump()

2
Customizations/Layers/BikeOtherShops.ts
View file

@ -27,7 +27,7 @@ export default class BikeOtherShops extends LayerDefinition {
anyValueExcept("shop", "bicycle"),
new Tag(/^service:bicycle:/, "*"),
])
this.newElementTags = undefined
this.presets = []
this.maxAllowedOverlapPercentage = 10
this.wayHandling = LayerDefinition.WAYHANDLING_CENTER_AND_WAY

8
Customizations/Layers/BikeParkings.ts
View file

@ -19,9 +19,13 @@ export default class BikeParkings extends LayerDefinition {
this.name = Translations.t.cyclofix.parking.name;
this.icon = "./assets/bike/parking.svg";
this.overpassFilter = new Tag("amenity", "bicycle_parking");
this.newElementTags = [
this.presets = [{
title: Translations.t.cyclofix.parking.title,
tags: [
new Tag("amenity", "bicycle_parking"),
];
]
}];
this.maxAllowedOverlapPercentage = 10;
this.minzoom = 13;

9
Customizations/Layers/BikeShops.ts
View file

@ -13,6 +13,7 @@ import ShopSecondHand from "../Questions/bike/ShopSecondHand";
import { TagRenderingOptions } from "../TagRendering";
import {PhoneNumberQuestion} from "../Questions/PhoneNumberQuestion";
import Website from "../Questions/Website";
import {EmailQuestion} from "../Questions/EmailQuestion";
export default class BikeShops extends LayerDefinition {
@ -24,9 +25,12 @@ export default class BikeShops extends LayerDefinition {
this.name = Translations.t.cyclofix.shop.name
this.icon = "./assets/bike/repair_shop.svg"
this.overpassFilter = new Tag("shop", "bicycle");
this.newElementTags = [
this.presets = [{
title: Translations.t.cyclofix.shop.title,
tags: [
new Tag("shop", "bicycle"),
]
}]
this.maxAllowedOverlapPercentage = 10
this.wayHandling = LayerDefinition.WAYHANDLING_CENTER_AND_WAY
@ -52,8 +56,9 @@ export default class BikeShops extends LayerDefinition {
this.elementsToShow = [
new ImageCarouselWithUploadConstructor(),
new ShopName(),
new PhoneNumberQuestion("{name}"),
new Website("{name}"),
new PhoneNumberQuestion("{name}"),
new EmailQuestion("{name}"),
new ShopRetail(),
new ShopRental(),
new ShopRepair(),

32
Customizations/Layers/BikeStations.ts
View file

@ -1,5 +1,5 @@
import {LayerDefinition} from "../LayerDefinition";
import {And, Tag, TagsFilter, Or} from "../../Logic/TagsFilter";
import {And, Tag, TagsFilter, Or, Not} from "../../Logic/TagsFilter";
import BikeStationChain from "../Questions/bike/StationChain";
import BikeStationPumpTools from "../Questions/bike/StationPumpTools";
import BikeStationStand from "../Questions/bike/StationStand";
@ -16,10 +16,14 @@ import { TagRenderingOptions } from "../TagRendering";
export default class BikeStations extends LayerDefinition {
private readonly repairStation = new Tag("amenity", "bicycle_repair_station");
private readonly pump = new Tag("service:bicycle:pump", "yes");
private readonly nopump = new Tag("service:bicycle:pump", "no");
private readonly pumpOperationalAny = new Tag("service:bicycle:pump:operational_status", "yes");
private readonly pumpOperationalOk = new Or([new Tag("service:bicycle:pump:operational_status", "yes"), new Tag("service:bicycle:pump:operational_status", "operational"), new Tag("service:bicycle:pump:operational_status", "ok"), new Tag("service:bicycle:pump:operational_status", "")]);
private readonly tools = new Tag("service:bicycle:tools", "yes");
private readonly notools = new Tag("service:bicycle:tools", "no");
private readonly to = Translations.t.cyclofix.station
constructor() {
@ -27,13 +31,27 @@ export default class BikeStations extends LayerDefinition {
this.name = Translations.t.cyclofix.station.name;
this.icon = "./assets/bike/repair_station_pump.svg";
this.overpassFilter = new And([
new Tag("amenity", "bicycle_repair_station")
]);
const tr = Translations.t.cyclofix.station
this.overpassFilter = this.repairStation;
this.presets = [
{
title: tr.titlePump,
description: tr.services.pump,
tags: [this.repairStation, this.pump, this.notools]
},
{
title: tr.titleRepair,
description: tr.services.tools,
tags: [this.repairStation, this.tools, this.nopump]
},
{
title: tr.titlePumpAndRepair,
description: tr.services.both,
tags: [this.repairStation, this.tools, this.pump]
},
]
this.newElementTags = [
new Tag("amenity", "bicycle_repair_station")
];
this.maxAllowedOverlapPercentage = 10;
this.minzoom = 13;

7
Customizations/Layers/Birdhide.ts
View file

@ -18,7 +18,12 @@ export class Birdhide extends LayerDefinition {
icon: "assets/nature/birdhide.svg",
minzoom: 12,
wayHandling: LayerDefinition.WAYHANDLING_CENTER_AND_WAY,
newElementTags: [Birdhide.birdhide],
presets: [
{
title: "Vogelkijkplaats",
tags: [Birdhide.birdhide]
}
],
style(tags: any): { color: string; icon: any } {
return {color: "", icon: undefined};
},

6
Customizations/Layers/Bookcases.ts
View file

@ -12,7 +12,11 @@ export class Bookcases extends LayerDefinition {
super();
this.name = "boekenkast";
this.newElementTags = [new Tag("amenity", "public_bookcase")];
this.presets = [{
tags: [new Tag("amenity", "public_bookcase")],
description: "Add a new bookcase here",
title: Translations.t.bookcases.bookcase,
}];
this.icon = "./assets/bookcase.svg";
this.overpassFilter = new Tag("amenity", "public_bookcase");
this.minzoom = 11;

9
Customizations/Layers/Bos.ts
View file

@ -22,10 +22,15 @@ export class Bos extends LayerDefinition {
);
this.newElementTags = [
this.presets = [{
title: "Bos",
description: "Voeg een ontbrekend bos toe aan de kaart",
icon: undefined,
tags: [
new Tag("landuse", "forest"),
new Tag("fixme", "Toegevoegd met MapComplete, geometry nog uit te tekenen")
];
]
}];
this.maxAllowedOverlapPercentage = 10;
this.minzoom = 13;

7
Customizations/Layers/DrinkingWater.ts
View file

@ -21,9 +21,10 @@ export class DrinkingWater extends LayerDefinition {
]);
this.newElementTags = [
new Tag("amenity", "drinking_water"),
];
this.presets = [{
title: Translations.t.cyclofix.drinking_water.title,
tags: [new Tag("amenity", "drinking_water")]
}];
this.maxAllowedOverlapPercentage = 10;
this.wayHandling = LayerDefinition.WAYHANDLING_CENTER_AND_WAY

9
Customizations/Layers/GhostBike.ts
View file

@ -15,6 +15,15 @@ export class GhostBike extends LayerDefinition {
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.presets = [
{
title: "Ghost bike",
description: "Add a missing ghost bike to the map",
tags: [new Tag("historic", "memorial"), new Tag("memorial", "ghost_bike")]
}
]
this.elementsToShow = [
new FixedText(this.description),
new ImageCarouselWithUploadConstructor(),

2
Customizations/Layers/GrbToFix.ts
View file

@ -8,7 +8,7 @@ export class GrbToFix extends LayerDefinition {
super();
this.name = "grb";
this.newElementTags = undefined;
this.presets = [];
this.icon = "./assets/star.svg";
this.overpassFilter = new Regex("fixme", "GRB");
this.minzoom = 13;

9
Customizations/Layers/InformationBoard.ts
View file

@ -11,7 +11,14 @@ export class InformationBoard extends LayerDefinition {
description: "Een informatiebord of kaart",
minzoom: 12,
overpassFilter: new Tag("tourism", "information"),
newElementTags: [new Tag("tourism", "information")],
presets: [{
title: "Informatiebord",
tags: [new Tag("tourism", "information")]
},
{
title: "Kaart",
tags: [new Tag("tourism", "information"), new Tag("information", "map")]
}],
maxAllowedOverlapPercentage: 0,
icon: "assets/nature/info.png",
});

6
Customizations/Layers/Map.ts
View file

@ -12,13 +12,15 @@ export class Map extends LayerDefinition {
this.minzoom = 12;
this.overpassFilter = new Tag("information", "map");
this.newElementTags = [new Tag("tourism", "information"), new Tag("information", "map")];
this.presets = [{
title: "Map",
tags: [new Tag("tourism", "information"), new Tag("information", "map")]
}];
const isOsmSource = new Tag("map_source", "OpenStreetMap");
this.style = (properties) => {
let icon = "assets/map.svg";
if (isOsmSource.matchesProperties(properties)) {

7
Customizations/Layers/NatureReserves.ts
View file

@ -18,8 +18,13 @@ export class NatureReserves extends LayerDefinition {
new Or([new Tag("leisure", "nature_reserve"), new Tag("boundary", "protected_area")]);
this.maxAllowedOverlapPercentage = 10;
this.newElementTags = [new Tag("leisure", "nature_reserve"),
this.presets = [{
title: "Natuurreservaat",
description: "Voeg een ontbrekend, erkend natuurreservaat toe, bv. een gebied dat beheerd wordt door het ANB of natuurpunt",
tags: [new Tag("leisure", "nature_reserve"),
new Tag("fixme", "Toegevoegd met MapComplete, geometry nog uit te tekenen")]
}
];
this.minzoom = 13;
this.title = new NameInline("natuurreservaat");
this.style = this.generateStyleFunction();

9
Customizations/Layers/Park.ts
View file

@ -50,8 +50,13 @@ export class Park extends LayerDefinition {
this.icon = undefined;
this.overpassFilter =
new Or([new Tag("leisure", "park"), new Tag("landuse", "village_green")]);
this.newElementTags = [new Tag("leisure", "park"),
new Tag("fixme", "Toegevoegd met MapComplete, geometry nog uit te tekenen")];
this.presets = [{
title: "Park",
description: "Voeg een ontbrekend park toe. Een park is een groene ruimte die openbaar is." +
"Typisch vind je er banken, vuilbakken, standbeelden, ... ",
tags: [new Tag("leisure", "park"),
new Tag("fixme", "Toegevoegd met MapComplete, geometry nog uit te tekenen")]
}];
this.maxAllowedOverlapPercentage = 25;
this.minzoom = 13;

7
Customizations/Layers/Viewpoint.ts
View file

@ -11,7 +11,12 @@ export class Viewpoint extends LayerDefinition {
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")],
presets: [{
title: "Bezienswaardigheid (andere)",
description: "Wens je een foto toe te voegen dat geen park, bos of (erkend) natuurreservaat is? Dit kan hiermee",
tags: [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 => {

12
Customizations/Layout.ts
View file

@ -96,12 +96,12 @@ export class WelcomeMessage extends UIElement {
constructor(layout: Layout,
languagePicker: UIElement,
osmConnection: OsmConnection) {
super(osmConnection.userDetails);
super(osmConnection?.userDetails);
this.languagePicker = languagePicker;
this.ListenTo(Locale.language);
this.osmConnection = osmConnection;
this.layout = layout;
this.userDetails = osmConnection.userDetails;
this.userDetails = osmConnection?.userDetails;
this.description = layout.welcomeMessage;
this.plzLogIn = layout.gettingStartedPlzLogin;
@ -110,9 +110,15 @@ export class WelcomeMessage extends UIElement {
}
InnerRender(): string {
let loginStatus = "";
if (this.userDetails !== undefined) {
loginStatus = (this.userDetails.data.loggedIn ? this.welcomeBack : this.plzLogIn).Render();
}
return "<span>" +
this.description.Render() +
(this.userDetails.data.loggedIn ? this.welcomeBack : this.plzLogIn).Render() +
loginStatus +
this.tail.Render() +
"<br/>" +
this.languagePicker.Render() +

18
Customizations/Questions/EmailQuestion.ts Normal file
View file

@ -0,0 +1,18 @@
import {TagRenderingOptions} from "../TagRendering";
import {UIElement} from "../../UI/UIElement";
import Translations from "../../UI/i18n/Translations";
export class EmailQuestion extends TagRenderingOptions {
constructor(category: string | UIElement) {
super({
question: Translations.t.general.questions.emailOf.Subs({category: category}),
freeform: {
renderTemplate: Translations.t.general.questions.emailIs.Subs({category: category}),
template: "$email$",
key: "email"
}
});
}
}

4
Customizations/Questions/Website.ts
View file

@ -9,8 +9,8 @@ export default class Website extends TagRenderingOptions {
question: Translations.t.general.questions.websiteOf.Subs({category: category}),
freeform: {
renderTemplate: Translations.t.general.questions.websiteIs,
template: "$phone$",
key: "phone"
template: "website",
key: "website"
}
});
}

4
Customizations/TagRendering.ts
View file

@ -360,7 +360,9 @@ class TagRendering extends UIElement implements TagDependantUIElement {
return undefined;
}
const prepost = Translations.W(freeform.template).InnerRender().split("$");
const prepost = Translations.W(freeform.template).InnerRender()
.replace("$$$","$string$")
.split("$");
const type = prepost[1];
let isValid = TagRenderingOptions.inputValidation[type];

3
Helpers.ts
View file

@ -1,6 +1,5 @@
import {OsmConnection} from "./Logic/OsmConnection";
import {Changes} from "./Logic/Changes";
import {UIEventSource} from "./UI/UIEventSource";
import {Changes} from "./Logic/Osm/Changes";
export class Helpers {

105
InitUiElements.ts
View file

@ -6,25 +6,30 @@ import {ShareScreen} from "./UI/ShareScreen";
import {FixedUiElement} from "./UI/Base/FixedUiElement";
import {CheckBox} from "./UI/Input/CheckBox";
import Combine from "./UI/Base/Combine";
import {OsmConnection} from "./Logic/OsmConnection";
import {Basemap} from "./Logic/Basemap";
import {UIEventSource} from "./UI/UIEventSource";
import {UIElement} from "./UI/UIElement";
import {MoreScreen} from "./UI/MoreScreen";
import {Tag} from "./Logic/TagsFilter";
import {FilteredLayer} from "./Logic/FilteredLayer";
import {FeatureInfoBox} from "./UI/FeatureInfoBox";
import {ElementStorage} from "./Logic/ElementStorage";
import {Preset} from "./UI/SimpleAddUI";
import {Changes} from "./Logic/Osm/Changes";
import {OsmConnection} from "./Logic/Osm/OsmConnection";
import {Basemap} from "./Logic/Leaflet/Basemap";
export class InitUiElements {
static OnlyIf(featureSwitch: UIEventSource<string>, callback: () => void) {
static OnlyIf(featureSwitch: UIEventSource<boolean>, callback: () => void) {
featureSwitch.addCallback(() => {
if (featureSwitch.data === "false") {
return;
}
if (featureSwitch.data) {
callback();
}
});
if (featureSwitch.data !== "false") {
if (featureSwitch.data) {
callback();
}
@ -33,13 +38,15 @@ export class InitUiElements {
private static CreateWelcomePane(layoutToUse: Layout, osmConnection: OsmConnection, bm: Basemap) {
const welcome = new WelcomeMessage(layoutToUse, Locale.CreateLanguagePicker(layoutToUse, Translations.t.general.pickLanguage), osmConnection)
const welcome = new WelcomeMessage(layoutToUse,
Locale.CreateLanguagePicker(layoutToUse, Translations.t.general.pickLanguage),
osmConnection)
const fullOptions = new TabbedComponent([
{header: `<img src='${layoutToUse.icon}'>`, content: welcome},
{header: `<img src='${'./assets/osm-logo.svg'}'>`, content: Translations.t.general.openStreetMapIntro},
{header: `<img src='${'./assets/share.svg'}'>`, content: new ShareScreen(layoutToUse, bm.Location)},
{header: `<img src='${'./assets/add.svg'}'>`, content: new MoreScreen(bm.Location)}
{header: `<img src='${'./assets/add.svg'}'>`, content: new MoreScreen(layoutToUse.name, bm.Location)}
])
return fullOptions;
@ -54,7 +61,7 @@ export class InitUiElements {
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(
const checkbox = new CheckBox(
new Combine([
"<span class='collapse-button'>", close, "</span>",
"<span id='welcomeMessage'>", fullOptions.onClick(() => {
@ -62,6 +69,14 @@ export class InitUiElements {
new Combine(["<span class='open-button'>", help, "</span>"])
, true
).AttachTo("messagesbox");
let dontCloseYet = true;
bm.Location.addCallback(() => {
if(dontCloseYet){
dontCloseYet = false;
return;
}
checkbox.isEnabled.setData(false);
})
const fullOptions2 = this.CreateWelcomePane(layoutToUse, osmConnection, bm);
@ -73,4 +88,74 @@ export class InitUiElements {
}
static InitLayers(layoutToUse: Layout, osmConnection: OsmConnection,
changes: Changes,
allElements: ElementStorage,
bm: Basemap,
fullScreenMessage: UIEventSource<UIElement>,
selectedElement: UIEventSource<any>): {
minZoom: number
flayers: FilteredLayer[],
presets: Preset[]
} {
const addButtons:Preset[]
= [];
const flayers: FilteredLayer[] = []
let minZoom = 0;
for (const layer of layoutToUse.layers) {
const generateInfo = (tagsES, feature) => {
return new FeatureInfoBox(
feature,
tagsES,
layer.title,
layer.elementsToShow,
changes,
osmConnection.userDetails
)
};
minZoom = Math.max(minZoom, layer.minzoom);
const flayer = FilteredLayer.fromDefinition(layer, bm, allElements, changes, osmConnection.userDetails, selectedElement, generateInfo);
for (const preset of layer.presets ?? []) {
if (preset.icon === undefined) {
const tags = {};
for (const tag of preset.tags) {
const k = tag.key;
if (typeof (k) === "string") {
tags[k] = tag.value;
}
}
preset.icon = layer.style(tags)?.icon?.iconUrl;
}
const addButton = {
name: preset.title,
description: preset.description,
icon: preset.icon,
tags: preset.tags,
layerToAddTo: flayer
}
addButtons.push(addButton);
}
flayers.push(flayer);
}
return {
minZoom: minZoom,
flayers: flayers,
presets: addButtons
}
}
}

6
Logic/Bounds.ts Normal file
View file

@ -0,0 +1,6 @@
export interface Bounds {
north: number,
east: number,
south: number,
west: number
}

35
Logic/LayerUpdater.ts
View file

@ -1,9 +1,9 @@
import {Basemap} from "./Basemap";
import {Overpass} from "./Overpass";
import {Or, TagsFilter} from "./TagsFilter";
import {UIEventSource} from "../UI/UIEventSource";
import {FilteredLayer} from "./FilteredLayer";
import {Bounds} from "./Bounds";
import {Overpass} from "./Osm/Overpass";
import {Basemap} from "./Leaflet/Basemap";
export class LayerUpdater {
private _map: Basemap;
@ -14,7 +14,7 @@ export class LayerUpdater {
/**
* The previous bounds for which the query has been run
*/
private previousBounds: { north: number, east: number, south: number, west: number };
private previousBounds: Bounds;
private _overpass: Overpass;
private _minzoom: number;
@ -93,10 +93,21 @@ export class LayerUpdater {
if (this.runningQuery.data) {
console.log("Still running a query, skip");
}
var bbox = this.buildBboxFor();
const bounds = this._map.map.getBounds();
const diff =0.07;
const n = bounds.getNorth() + diff;
const e = bounds.getEast() + diff;
const s = bounds.getSouth() - diff;
const w = bounds.getWest() - diff;
this.previousBounds = {north: n, east: e, south: s, west: w};
this.runningQuery.setData(true);
const self = this;
this._overpass.queryGeoJson(bbox,
this._overpass.queryGeoJson(this.previousBounds,
function (data) {
self.handleData(data)
},
@ -107,19 +118,7 @@ export class LayerUpdater {
}
private buildBboxFor(): string {
const b = this._map.map.getBounds();
const diff =0.07;
const n = b.getNorth() + diff;
const e = b.getEast() + diff;
const s = b.getSouth() - diff;
const w = b.getWest() - diff;
this.previousBounds = {north: n, east: e, south: s, west: w};
return "[bbox:" + s + "," + w + "," + n + "," + e + "]";
}
private IsInBounds(): boolean {

4
Logic/Basemap.ts → Logic/Leaflet/Basemap.ts
View file

@ -1,6 +1,6 @@
import L from "leaflet"
import {UIEventSource} from "../UI/UIEventSource";
import {UIElement} from "../UI/UIElement";
import {UIEventSource} from "../../UI/UIEventSource";
import {UIElement} from "../../UI/UIElement";
export class BaseLayers {

10
Logic/GeoLocationHandler.ts → Logic/Leaflet/GeoLocationHandler.ts
View file

@ -1,8 +1,8 @@
import {Basemap} from "./Basemap";
import {UIEventSource} from "../UI/UIEventSource";
import {UIElement} from "../UI/UIElement";
import L from "leaflet";
import {Helpers} from "../Helpers";
import {UIEventSource} from "../../UI/UIEventSource";
import {UIElement} from "../../UI/UIElement";
import {Helpers} from "../../Helpers";
export class GeoLocationHandler extends UIElement {
@ -65,8 +65,8 @@ export class GeoLocationHandler extends UIElement {
self._marker = newMarker;
});
navigator.permissions.query({name: 'geolocation'})
.then(function (status) {
navigator?.permissions?.query({name: 'geolocation'})
?.then(function (status) {
console.log("Geolocation is already", status)
if (status.state === "granted") {
self.StartGeolocating();

4
Logic/StrayClickHandler.ts → Logic/Leaflet/StrayClickHandler.ts
View file

@ -1,7 +1,7 @@
import {Basemap} from "./Basemap";
import L from "leaflet";
import {UIEventSource} from "../UI/UIEventSource";
import {UIElement} from "../UI/UIElement";
import {UIEventSource} from "../../UI/UIEventSource";
import {UIElement} from "../../UI/UIElement";
/**
* The stray-click-hanlders adds a marker to the map if no feature was clicked.

13
Logic/Changes.ts → Logic/Osm/Changes.ts
View file

@ -2,11 +2,11 @@
* Handles all changes made to OSM.
* Needs an authenticator via OsmConnection
*/
import {UIEventSource} from "../../UI/UIEventSource";
import {OsmConnection} from "./OsmConnection";
import {OsmNode, OsmObject} from "./OsmObject";
import {ElementStorage} from "./ElementStorage";
import {UIEventSource} from "../UI/UIEventSource";
import {And, Tag, TagsFilter} from "./TagsFilter";
import {And, Tag, TagsFilter} from "../TagsFilter";
import {ElementStorage} from "../ElementStorage";
export class Changes {
@ -261,11 +261,4 @@ console.log("Received change",key, value)
});
}
public asQuestions(qs : QuestionDefinition[]){
let ls = [];
for (var i in qs){
ls.push(new Question(this, qs[i]));
}
return ls;
}
}

6
Logic/Geocoding.ts → Logic/Osm/Geocoding.ts
View file

@ -1,7 +1,5 @@
import * as $ from "jquery"
import {UIEventSource} from "../UI/UIEventSource";
import {Basemap} from "./Basemap";
import {Basemap} from "../Leaflet/Basemap";
import $ from "jquery"
export class Geocoding {
private static readonly host = "https://nominatim.openstreetmap.org/search?";

9
Logic/Osm/Notes.ts Normal file
View file

@ -0,0 +1,9 @@
import {Bounds} from "../Bounds";
export class Notes {
queryGeoJson(bounds: Bounds, continuation: ((any) => void), onFail: ((reason) => void)): void {
}
}

37
Logic/OsmConnection.ts → Logic/Osm/OsmConnection.ts
View file

@ -1,6 +1,6 @@
// @ts-ignore
import osmAuth from "osm-auth";
import {UIEventSource} from "../UI/UIEventSource";
import {UIEventSource} from "../../UI/UIEventSource";
export class UserDetails {
@ -17,21 +17,41 @@ export class UserDetails {
export class OsmConnection {
private auth = new osmAuth({
oauth_consumer_key: 'hivV7ec2o49Two8g9h8Is1VIiVOgxQ1iYexCbvem',
oauth_secret: 'wDBRTCem0vxD7txrg1y6p5r8nvmz8tAhET7zDASI',
auto: true // show a login form if the user is not authenticated and
// you try to do a call
});
public auth;
public userDetails: UIEventSource<UserDetails>;
private _dryRun: boolean;
constructor(dryRun: boolean) {
constructor(dryRun: boolean, oauth_token: UIEventSource<string>) {
this.auth = new osmAuth({
oauth_consumer_key: 'hivV7ec2o49Two8g9h8Is1VIiVOgxQ1iYexCbvem',
oauth_secret: 'wDBRTCem0vxD7txrg1y6p5r8nvmz8tAhET7zDASI',
singlepage: true,
landing: window.location.href,
auto: true // show a login form if the user is not authenticated and
// you try to do a call
});
this.userDetails = new UIEventSource<UserDetails>(new UserDetails());
this.userDetails.data.osmConnection = this;
this.userDetails.data.dryRun = dryRun;
this._dryRun = dryRun;
if(oauth_token.data !== undefined){
console.log(oauth_token.data)
const self = this;
this.auth.bootstrapToken(oauth_token.data,
(x) => {
console.log("Called back: ", x)
self.AttemptLogin();
}, this.auth);
oauth_token.setData(undefined);
}
if (this.auth.authenticated()) {
this.AttemptLogin(); // Also updates the user badge
} else {
@ -43,6 +63,7 @@ export class OsmConnection {
console.log("DRYRUN ENABLED");
}
}
public LogOut() {

6
Logic/OsmImageUploadHandler.ts → Logic/Osm/OsmImageUploadHandler.ts
View file

@ -1,11 +1,11 @@
/**
* Helps in uplaoding, by generating the rigth title, decription and by adding the tag to the changeset
*/
import {UIEventSource} from "../UI/UIEventSource";
import {ImageUploadFlow} from "../UI/ImageUploadFlow";
import {Changes} from "./Changes";
import {UIEventSource} from "../../UI/UIEventSource";
import {ImageUploadFlow} from "../../UI/ImageUploadFlow";
import {UserDetails} from "./OsmConnection";
import {SlideShow} from "../UI/SlideShow";
import {SlideShow} from "../../UI/SlideShow";
export class OsmImageUploadHandler {
private _tags: UIEventSource<any>;

0
Logic/OsmObject.ts → Logic/Osm/OsmObject.ts
View file

20
Logic/Overpass.ts → Logic/Osm/Overpass.ts
View file

@ -1,11 +1,11 @@
import {TagsFilter} from "./TagsFilter";
import * as OsmToGeoJson from "osmtogeojson";
import * as $ from "jquery";
/**
* Interfaces overpass to get all the latest data
*/
import {Bounds} from "../Bounds";
import {TagsFilter} from "../TagsFilter";
import $ from "jquery"
import * as OsmToGeoJson from "osmtogeojson";
export class Overpass {
private _filter: TagsFilter
public static testUrl: string = null
@ -14,21 +14,21 @@ export class Overpass {
this._filter = filter
}
public buildQuery(bbox: string): string {
private buildQuery(bbox: string): string {
const filters = this._filter.asOverpass()
console.log(filters)
let filter = ""
for (const filterOr of filters) {
filter += 'nwr' + filterOr + ';'
}
const query =
'[out:json][timeout:25]' + bbox + ';(' + filter + ');out body;>;out skel qt;'
console.log(query)
return "https://overpass-api.de/api/interpreter?data=" + encodeURIComponent(query)
}
queryGeoJson(bbox: string, continuation: ((any) => void), onFail: ((reason) => void)): void {
let query = this.buildQuery(bbox)
queryGeoJson(bounds: Bounds, continuation: ((any) => void), onFail: ((reason) => void)): void {
let query = this.buildQuery( "[bbox:" + bounds.south + "," + bounds.west + "," + bounds.north + "," + bounds.east + "]")
if(Overpass.testUrl !== null){
console.log("Using testing URL")

13
Logic/TagsFilter.ts
View file

@ -55,8 +55,8 @@ export class Regex extends TagsFilter {
export class Tag extends TagsFilter {
public key: string | RegExp
public value: string | RegExp
public key: string
public value: string
public invertValue: boolean
constructor(key: string | RegExp, value: string | RegExp, invertValue = false) {
@ -69,7 +69,9 @@ export class Tag extends TagsFilter {
}
super()
// @ts-ignore
this.key = key
// @ts-ignore
this.value = value
this.invertValue = invertValue
}
@ -107,10 +109,14 @@ export class Tag extends TagsFilter {
}
asOverpass(): string[] {
// @ts-ignore
const keyIsRegex = this.key instanceof RegExp
// @ts-ignore
const key = keyIsRegex ? (this.key as RegExp).source : this.key
// @ts-ignore
const valIsRegex = this.value instanceof RegExp
// @ts-ignore
const val = valIsRegex ? (this.value as RegExp).source : this.value
const regexKeyPrefix = keyIsRegex ? '~' : ''
@ -276,7 +282,8 @@ export class TagUtils {
static ApplyTemplate(template: string, tags: any): string {
for (const k in tags) {
while (template.indexOf("{" + k + "}") >= 0) {
template = template.replace("{" + k + "}", tags[k]);
const escaped = tags[k].replace(/</g, '&lt;').replace(/>/g, '&gt;');
template = template.replace("{" + k + "}", escaped);
}
}
return template;

6
README.md
View file

@ -17,10 +17,10 @@ Furthermore, it shows images present in the `image` tag or, if a `wikidata` or `
## Examples
- [Buurtnatuur.be](http://buurntatuur.be), developed for the Belgian [Green party](https://www.groen.be/). They also funded the initial development!
- [Cyclofix](https://pietervdvn.github.io/MapComplete/index.html?quests=pomp), further development on [Open Summer of Code](https://summerofcode.be/) funded by [Brussels Mobility](https://mobilite-mobiliteit.brussels/en)
- [Buurtnatuur.be](http://buurtnatuur.be), developed for the Belgian [Green party](https://www.groen.be/). They also funded the initial development!
- [Cyclofix](https://pietervdvn.github.io/MapComplete/index.html?layout=cyclofix), further development on [Open Summer of Code](https://summerofcode.be/) funded by [Brussels Mobility](https://mobilite-mobiliteit.brussels/en). Landing page at https://cyclofix.osm.be/
- [Bookcases](https://pietervdvn.github.io/MapComplete/index.html?quests=bookcases#element) cause I like to collect them.
- [Map of Maps](https://pietervdvn.github.io/MapComplete/index.html?layout=metamap#element), after a tweet
- [Map of Maps](https://pietervdvn.github.io/MapComplete/index.html?layout=metamap&z=14&lat=50.650&lon=4.2668#element), after a tweet
Have a theme idea? Drop it in the [issues](https://github.com/pietervdvn/MapComplete/issues)

17
UI/Base/SubtleButton.ts
View file

@ -1,23 +1,36 @@
import {UIElement} from "../UIElement";
import Translations from "../i18n/Translations";
import Combine from "./Combine";
import {link} from "fs";
export class SubtleButton extends UIElement{
private imageUrl: string;
private message: UIElement;
private linkTo: { url: string, newTab?: boolean } = undefined;
constructor(imageUrl: string, message: string | UIElement) {
constructor(imageUrl: string, message: string | UIElement, linkTo: { url: string, newTab?: boolean } = undefined) {
super(undefined);
this.linkTo = linkTo;
this.message = Translations.W(message);
this.imageUrl = imageUrl;
}
InnerRender(): string {
if(this.linkTo != undefined){
return new Combine([
`<a class="subtle-button" href="${this.linkTo.url}" ${this.linkTo.newTab ? 'target="_blank"' : ""}>`,
this.imageUrl !== undefined ? `<img src='${this.imageUrl}'>` : "",
this.message,
'</a>'
]).Render();
}
return new Combine([
'<span class="subtle-button">',
`<img src='${this.imageUrl}'>`,
this.imageUrl !== undefined ? `<img src='${this.imageUrl}'>` : "",
this.message,
'</span>'
]).Render();

7
UI/FeatureInfoBox.ts
View file

@ -1,10 +1,6 @@
import {UIElement} from "./UIElement";
import {UIEventSource} from "./UIEventSource";
import {QuestionPicker} from "./QuestionPicker";
import {OsmImageUploadHandler} from "../Logic/OsmImageUploadHandler";
import {ImageCarousel} from "./Image/ImageCarousel";
import {Changes} from "../Logic/Changes";
import {UserDetails} from "../Logic/OsmConnection";
import {VerticalCombine} from "./Base/VerticalCombine";
import {TagRenderingOptions} from "../Customizations/TagRendering";
import {OsmLink} from "../Customizations/Questions/OsmLink";
@ -12,6 +8,8 @@ import {WikipediaLink} from "../Customizations/Questions/WikipediaLink";
import {And} from "../Logic/TagsFilter";
import {TagDependantUIElement, TagDependantUIElementConstructor} from "../Customizations/UIElementConstructor";
import Translations from "./i18n/Translations";
import {Changes} from "../Logic/Osm/Changes";
import {UserDetails} from "../Logic/Osm/OsmConnection";
export class FeatureInfoBox extends UIElement {
@ -33,7 +31,6 @@ export class FeatureInfoBox extends UIElement {
private _infoboxes: TagDependantUIElement[];
private _questions: QuestionPicker;
private _oneSkipped = Translations.t.general.oneSkippedQuestion.Clone();
private _someSkipped = Translations.t.general.skippedQuestions.Clone();

4
UI/Image/ImageCarousel.ts
View file

@ -4,11 +4,11 @@ import {UIEventSource} from "../UIEventSource";
import {SlideShow} from "../SlideShow";
import {FixedUiElement} from "../Base/FixedUiElement";
import {VerticalCombine} from "../Base/VerticalCombine";
import {Changes} from "../../Logic/Changes";
import {VariableUiElement} from "../Base/VariableUIElement";
import {ConfirmDialog} from "../ConfirmDialog";
import {UserDetails} from "../../Logic/OsmConnection";
import {TagDependantUIElement, TagDependantUIElementConstructor} from "../../Customizations/UIElementConstructor";
import {Changes} from "../../Logic/Osm/Changes";
import {UserDetails} from "../../Logic/Osm/OsmConnection";
export class ImageCarouselConstructor implements TagDependantUIElementConstructor{
IsKnown(properties: any): boolean {

5
UI/Image/ImageCarouselWithUpload.ts
View file

@ -1,10 +1,9 @@
import {TagDependantUIElement, TagDependantUIElementConstructor} from "../../Customizations/UIElementConstructor";
import {ImageCarousel} from "./ImageCarousel";
import {OsmImageUploadHandler} from "../../Logic/OsmImageUploadHandler";
import {UIEventSource} from "../UIEventSource";
import {Changes} from "../../Logic/Changes";
import {UserDetails} from "../../Logic/OsmConnection";
import {ImageUploadFlow} from "../ImageUploadFlow";
import {Changes} from "../../Logic/Osm/Changes";
import {OsmImageUploadHandler} from "../../Logic/Osm/OsmImageUploadHandler";
export class ImageCarouselWithUploadConstructor implements TagDependantUIElementConstructor{
IsKnown(properties: any): boolean {

2
UI/LayerSelection.ts
View file

@ -26,7 +26,7 @@ export class LayerSelection extends UIElement{
this._checkboxes.push(new CheckBox(
new Combine([checkbox, icon, name]),
new Combine([
Img.checkmark,
Img.no_checkmark,
icon,
layer.layerDef.name]),
layer.isDisplayed));

13
UI/MoreScreen.ts
View file

@ -13,9 +13,11 @@ import {SubtleButton} from "./Base/SubtleButton";
export class MoreScreen extends UIElement {
private currentLocation: UIEventSource<{ zoom: number, lat: number, lon: number }>;
private currentLayout: string;
constructor(currentLocation: UIEventSource<{ zoom: number, lat: number, lon: number }>) {
constructor(currentLayout: string, currentLocation: UIEventSource<{ zoom: number, lat: number, lon: number }>) {
super(currentLocation);
this.currentLayout = currentLayout;
this.currentLocation = currentLocation;
}
@ -28,22 +30,21 @@ export class MoreScreen extends UIElement {
if (layout.hideFromOverview) {
continue
}
if (layout.name === this.currentLayout) {
continue;
}
const linkText =
`https://pietervdvn.github.io/MapComplete/${layout.name}.html?z=${this.currentLocation.data.zoom}&lat=${this.currentLocation.data.lat}&lon=${this.currentLocation.data.lon}`
const link =
new SubtleButton(layout.icon,
new Combine([
`<a href="${linkText}" target="_blank">`,
"<div>",
"<b>",
Translations.W(layout.title),
"</b>",
"<br/>",
Translations.W(layout.description),
"</div>",
"</a>"
]));
]), {url: linkText, newTab: false});
els.push(link)
}

2
UI/PendingChanges.ts
View file

@ -1,6 +1,6 @@
import {UIElement} from "./UIElement";
import {UIEventSource} from "./UIEventSource";
import {Changes} from "../Logic/Changes";
import {Changes} from "../Logic/Osm/Changes";
export class PendingChanges extends UIElement {
private _pendingChangesCount: UIEventSource<number>;

47
UI/QuestionPicker.ts
View file

@ -1,47 +0,0 @@
import {UIElement} from "./UIElement";
import {Question} from "../Logic/Question";
import {UIEventSource} from "./UIEventSource";
export class QuestionPicker extends UIElement {
private readonly _questions: Question[];
private readonly tags: any;
private source: UIEventSource<any>;
constructor(questions: Question[],
tags: UIEventSource<any>) {
super(tags);
this._questions = questions;
this.tags = tags.data;
this.source = tags;
}
protected InnerRender(): string {
let t = this.tags;
let highestPriority = Number.MIN_VALUE;
let highestQ: Question;
for (const q of this._questions) {
if (!q.Applicable(t)) {
continue;
}
const priority = q.question.severity;
if (priority > highestPriority) {
highestPriority = priority;
highestQ = q;
}
}
if (highestQ === undefined) {
return "Er zijn geen vragen meer!";
}
return "<div class='question'>" +
highestQ.CreateHtml(this.source).Render() +
"</div>";
}
}

16
UI/SearchAndGo.ts
View file

@ -1,13 +1,13 @@
import {UIElement} from "./UIElement";
import {TextField} from "./Input/TextField";
import {UIEventSource} from "./UIEventSource";
import {FixedUiElement} from "./Base/FixedUiElement";
import {Geocoding} from "../Logic/Geocoding";
import {Basemap} from "../Logic/Basemap";
import {VariableUiElement} from "./Base/VariableUIElement";
import Translation from "./i18n/Translation";
import Locale from "./i18n/Locale";
import {UIEventSource} from "./UIEventSource";
import {UIElement} from "./UIElement";
import Translation from "./i18n/Translation";
import {VariableUiElement} from "./Base/VariableUIElement";
import {FixedUiElement} from "./Base/FixedUiElement";
import {TextField} from "./Input/TextField";
import {Geocoding} from "../Logic/Osm/Geocoding";
import Translations from "./i18n/Translations";
import {Basemap} from "../Logic/Leaflet/Basemap";
export class SearchAndGo extends UIElement {

113
UI/SimpleAddUI.ts
View file

@ -2,12 +2,23 @@ import {UIElement} from "./UIElement";
import {UIEventSource} from "./UIEventSource";
import {Tag} from "../Logic/TagsFilter";
import {FilteredLayer} from "../Logic/FilteredLayer";
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";
import {SubtleButton} from "./Base/SubtleButton";
import {VerticalCombine} from "./Base/VerticalCombine";
import Locale from "./i18n/Locale";
import {Changes} from "../Logic/Osm/Changes";
import {UserDetails} from "../Logic/Osm/OsmConnection";
export interface Preset {
description: string | UIElement,
name: string | UIElement,
icon: string,
tags: Tag[],
layerToAddTo: FilteredLayer
}
/**
* Asks to add a feature at the last clicked location, at least if zoom is sufficient
@ -21,15 +32,23 @@ export class SimpleAddUI extends UIElement {
private _dataIsLoading: UIEventSource<boolean>;
private _userDetails: UIEventSource<UserDetails>;
private _confirmPreset: UIEventSource<Preset>
= new UIEventSource<Preset>(undefined);
private confirmButton: UIElement = undefined;
private cancelButton: UIElement;
private goToInboxButton: UIElement = new SubtleButton("./assets/envelope.svg",
Translations.t.general.goToInbox, {url:"https://www.openstreetmap.org/messages/inbox", newTab: false});
constructor(zoomlevel: UIEventSource<{ zoom: number }>,
lastClickLocation: UIEventSource<{ lat: number, lon: number }>,
changes: Changes,
selectedElement: UIEventSource<{ feature: any }>,
dataIsLoading: UIEventSource<boolean>,
userDetails: UIEventSource<UserDetails>,
addButtons: { name: UIElement; icon: string; tags: Tag[]; layerToAddTo: FilteredLayer }[],
addButtons: { description: string | UIElement, name: string | UIElement; icon: string; tags: Tag[]; layerToAddTo: FilteredLayer }[],
) {
super(zoomlevel);
this.ListenTo(Locale.language);
this._zoomlevel = zoomlevel;
this._lastClickLocation = lastClickLocation;
this._changes = changes;
@ -39,18 +58,47 @@ export class SimpleAddUI extends UIElement {
this.ListenTo(userDetails);
this.ListenTo(dataIsLoading);
this._addButtons = [];
this.ListenTo(this._confirmPreset);
this.clss = "add-ui"
const self = this;
for (const option of addButtons) {
// <button type='button'> looks SO retarded
// the default type of button is 'submit', which performs a POST and page reload
const button =
new Button(Translations.t.general.add.addNew.Subs({category: option.name}),
this.CreatePoint(option));
new SubtleButton(
option.icon,
new Combine([
"<b>",
option.name,
"</b><br/>",
option.description !== undefined ? option.description : ""])
).onClick(
() => {
self.confirmButton = new SubtleButton(option.icon,
new Combine([
"<b>",
option.name,
"</b><br/>",
option.description !== undefined ? option.description : ""]));
self.confirmButton.onClick(self.CreatePoint(option));
self._confirmPreset.setData(option);
}
)
this._addButtons.push(button);
}
this.cancelButton = new SubtleButton(
"./assets/close.svg",
Translations.t.general.cancel
).onClick(() => {
self._confirmPreset.setData(undefined);
})
}
private CreatePoint(option: {icon: string; tags: Tag[]; layerToAddTo: FilteredLayer }) {
private CreatePoint(option: { tags: Tag[]; layerToAddTo: FilteredLayer }) {
const self = this;
return () => {
@ -62,12 +110,60 @@ export class SimpleAddUI extends UIElement {
}
InnerRender(): string {
const header = Translations.t.general.add.header;
if (this._confirmPreset.data !== undefined) {
if(this._userDetails.data.dryRun){
this.CreatePoint(this._confirmPreset.data)();
return;
}
return new Combine([
Translations.t.general.add.confirmIntro.Subs({title: this._confirmPreset.data.name}),
this._userDetails.data.dryRun ? "<span class='alert'>TESTING - changes won't be saved</span>":"",
this.confirmButton,
this.cancelButton
]).Render();
}
let header: UIElement = Translations.t.general.add.header;
if(this._userDetails === undefined){
return header.Render();
}
if (!this._userDetails.data.loggedIn) {
return new Combine([header, Translations.t.general.add.pleaseLogin]).Render()
}
if (this._userDetails.data.unreadMessages > 0) {
return new Combine([header, "<span class='alert'>",
Translations.t.general.readYourMessages,
"</span>",
this.goToInboxButton
]).Render();
}
if (this._userDetails.data.dryRun) {
header = new Combine([header,
"<span class='alert'>",
"Test mode - changes won't be saved",
"</span>"
]);
}
if (this._userDetails.data.csCount < 5) {
return new Combine([header, "<span class='alert'>",
Translations.t.general.fewChangesBefore,
"</span>"]).Render();
}
if (this._zoomlevel.data.zoom < 19) {
return new Combine([header, Translations.t.general.add.zoomInFurther]).Render()
}
@ -76,10 +172,13 @@ export class SimpleAddUI extends UIElement {
return new Combine([header, Translations.t.general.add.stillLoading]).Render()
}
var html = "";
for (const button of this._addButtons) {
html += button.Render();
}
return header.Render() + html;
}

3
UI/UIElement.ts
View file

@ -7,6 +7,7 @@ export abstract class UIElement extends UIEventSource<string>{
public readonly id: string;
public readonly _source: UIEventSource<any>;
public clss : string = ""
private _hideIfEmpty = false;
@ -103,7 +104,7 @@ export abstract class UIElement extends UIEventSource<string>{
}
Render(): string {
return "<span class='uielement' id='" + this.id + "'>" + this.InnerRender() + "</span>"
return `<span class='uielement ${this.clss}' id='${this.id}'>${this.InnerRender()}</span>`
}
AttachTo(divId: string) {

4
UI/UserBadge.ts
View file

@ -1,11 +1,11 @@
import {UIElement} from "./UIElement";
import {UserDetails} from "../Logic/OsmConnection";
import {UIEventSource} from "./UIEventSource";
import {Basemap} from "../Logic/Basemap";
import L from "leaflet";
import {FixedUiElement} from "./Base/FixedUiElement";
import {VariableUiElement} from "./Base/VariableUIElement";
import Translations from "./i18n/Translations";
import {UserDetails} from "../Logic/Osm/OsmConnection";
import {Basemap} from "../Logic/Leaflet/Basemap";
/**
* Handles and updates the user badge

55
UI/i18n/Translations.ts
View file

@ -136,12 +136,12 @@ export default class Translations {
}),
yes: new T({
en: "This parking has room for cargo bikes",
nl: "Deze parking is overdekt (er is een afdak)",
nl: "Deze parking heeft plaats voor bakfietsen",
fr: "TODO: fr"
}),
designated: new T({
en: "This parking has designated (official) spots for cargo bikes.",
nl: "Deze parking is overdekt (er is een afdak)",
nl: "Er zijn speciale plaatsen voorzien voor bakfietsen",
fr: "TODO: fr"
}),
no: new T({
@ -282,9 +282,9 @@ export default class Translations {
fr: "Il y a seulement une pompe"
}),
tools: new T({
en: "There are only tools (screwdrivers, pliers...) aanwezig",
en: "There are only tools (screwdrivers, pliers...) present",
nl: "Er is enkel gereedschap aanwezig (schroevendraaier, tang...)",
fr: "Il y a seulement des outils (tournevis, pinces..."
fr: "Il y a seulement des outils (tournevis, pinces...)"
}),
both: new T({
en: "There are both tools and a pump present",
@ -298,9 +298,17 @@ export default class Translations {
nl: "Heeft dit herstelpunt een haak of standaard om je fiets op te hangen/zetten?",
fr: "Est-ce que cette station vélo à un crochet pour suspendre son velo ou une accroche pour l'élevé?"
}),
yes: new T({en: "There is a hook or stand", nl: "Er is een haak of standaard", fr: "Oui il y a un crochet ou une accroche"}),
no: new T({en: "There is no hook or stand", nl: "Er is geen haak of standaard", fr: "Non il n'y pas de crochet ou d'accroche"}),
}
yes: new T({
en: "There is a hook or stand",
nl: "Er is een haak of standaard",
fr: "Oui il y a un crochet ou une accroche"
}),
no: new T({
en: "There is no hook or stand",
nl: "Er is geen haak of standaard",
fr: "Non il n'y pas de crochet ou d'accroche"
}),
},
},
shop: {
name: new T({en: "bike repair/shop", nl: "fietszaak", fr: "magasin ou réparateur de vélo"}),
@ -418,8 +426,8 @@ export default class Translations {
}
},
cafe: {
name: new T({en: "bike cafe", nl: "fietscafé", fr: "TODO: fr"}),
title: new T({en: "Bike cafe", nl: "fietscafé", fr: "TODO: fr"}),
name: new T({en: "Bike cafe", nl: "Fietscafé", fr: "TODO: fr"}),
title: new T({en: "Bike cafe", nl: "Fietscafé", fr: "TODO: fr"}),
qName: {
question: new T({en: "What is the name of this bike cafe?", nl: "Wat is de naam van dit fietscafé?", fr: "TODO: fr"}),
render: new T({en: "This bike cafe is called {name}", nl: "Dit fietscafé heet <b>{name}</b>", fr: "TODO: fr"}),
@ -702,6 +710,10 @@ export default class Translations {
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."
}),
confirmIntro: new T({
en: "<h3>Add a {title} here?</h3>The point you create here will be visible for everyone. Please, only add things on to the map if they truly exist. A lot of applications use this data.",
nl: "<h3>Voeg hier een {title} toe?</h3>Het punt dat je hier toevoegt, is zichtbaar voor iedereen. Veel applicaties gebruiken deze data, voeg dus enkel punten toe die echt bestaan."
})
},
pickLanguage: new T({
@ -736,7 +748,16 @@ export default class Translations {
websiteIs: new T({
en: "Website: <a href='{website}' target='_blank'>{website}</a>",
nl: "Website: <a href='{website}' target='_blank'>{website}</a>"
})
}),
emailOf: new T({
en: "What is the email address of {category}?",
nl: "Wat is het email-adres van {category}?"
}
),
emailIs: new T({
en: "The email address of this {category} is <a href='mailto:{email}' target='_blank'>{email}</a>",
nl: "Het email-adres van {category} is <a href='mailto:{email}' target='_blank'>{email}</a>"
}),
},
openStreetMapIntro: new T({
@ -774,7 +795,19 @@ export default class Translations {
streetcomplete: new T({
en: "Another, similar application is <a href='https://play.google.com/store/apps/details?id=de.westnordost.streetcomplete' target='_blank'>StreetComplete</a>"
})
}
},
readYourMessages: new T({
en: "Please, read all your OpenStreetMap-messages before adding a new point.",
nl: "Gelieve eerst je berichten op OpenStreetMap te lezen alvorens nieuwe punten toe te voegen."
}),
fewChangesBefore: new T({
en: "Please, answer a few questions of existing points before adding a new point.",
nl: "Gelieve eerst enkele vragen van bestaande punten te beantwoorden vooraleer zelf punten toe te voegen."
}),
goToInbox: new T({
en: "Open inbox",
nl: "Ga naar de berichten"
})
}
}

16
index.css
View file

@ -4,10 +4,6 @@ html, body {
padding: 0;
}
a {
text-decoration: unset;
color:unset;
}
body {
font-family: 'Helvetica Neue', Arial, sans-serif;
@ -1206,9 +1202,21 @@ form {
}
.subtle-button a {
text-decoration: unset !important;
color:unset !important;
display: block ruby;
}
.subtle-button img{
width: 3em;
max-height: 3em;
margin-right: 0.5em;
padding: 0.5em;
}
.add-ui {
font-size: large;
}

2
index.html
View file

@ -47,7 +47,7 @@
<div id="leafletDiv"></div>
<script src="./index.ts"></script>
<script src="vendor/Leaflet.AccuratePosition.js"></script>
<script src="./vendor/Leaflet.AccuratePosition.js"></script>
<script data-goatcounter="https://pietervdvn.goatcounter.com/count"
async src="//gc.zgo.at/count.js"></script>

116
index.ts
View file

@ -1,20 +1,14 @@
import {OsmConnection} from "./Logic/OsmConnection";
import {Changes} from "./Logic/Changes";
import {ElementStorage} from "./Logic/ElementStorage";
import {UIEventSource} from "./UI/UIEventSource";
import {UserBadge} from "./UI/UserBadge";
import {Basemap, BaseLayers} from "./Logic/Basemap";
import {PendingChanges} from "./UI/PendingChanges";
import {CenterMessageBox} from "./UI/CenterMessageBox";
import {Helpers} from "./Helpers";
import {Tag, TagUtils} from "./Logic/TagsFilter";
import {FilteredLayer} from "./Logic/FilteredLayer";
import {TagUtils} from "./Logic/TagsFilter";
import {LayerUpdater} from "./Logic/LayerUpdater";
import {UIElement} from "./UI/UIElement";
import {FullScreenMessageBoxHandler} from "./UI/FullScreenMessageBoxHandler";
import {FeatureInfoBox} from "./UI/FeatureInfoBox";
import {GeoLocationHandler} from "./Logic/GeoLocationHandler";
import {StrayClickHandler} from "./Logic/StrayClickHandler";
import {SimpleAddUI} from "./UI/SimpleAddUI";
import {VariableUiElement} from "./UI/Base/VariableUIElement";
import {SearchAndGo} from "./UI/SearchAndGo";
@ -22,7 +16,7 @@ import {AllKnownLayouts} from "./Customizations/AllKnownLayouts";
import {CheckBox} from "./UI/Input/CheckBox";
import Translations from "./UI/i18n/Translations";
import Locale from "./UI/i18n/Locale";
import {Layout, WelcomeMessage} from "./Customizations/Layout";
import {Layout} from "./Customizations/Layout";
import {DropDown} from "./UI/Input/DropDown";
import {FixedUiElement} from "./UI/Base/FixedUiElement";
import {LayerSelection} from "./UI/LayerSelection";
@ -31,10 +25,12 @@ import {Img} from "./UI/Img";
import {QueryParameters} from "./Logic/QueryParameters";
import {Utils} from "./Utils";
import {LocalStorageSource} from "./Logic/LocalStorageSource";
import {Button} from "./UI/Base/Button";
import {TabbedComponent} from "./UI/Base/TabbedComponent";
import {ShareScreen} from "./UI/ShareScreen";
import {InitUiElements} from "./InitUiElements";
import {StrayClickHandler} from "./Logic/Leaflet/StrayClickHandler";
import {BaseLayers, Basemap} from "./Logic/Leaflet/Basemap";
import {GeoLocationHandler} from "./Logic/Leaflet/GeoLocationHandler";
import {OsmConnection} from "./Logic/Osm/OsmConnection";
import {Changes} from "./Logic/Osm/Changes";
// --------------------- Special actions based on the parameters -----------------
@ -105,19 +101,25 @@ const fullScreenMessage = new UIEventSource<UIElement>(undefined);
// The latest element that was selected - used to generate the right UI at the right place
const selectedElement = new UIEventSource<{ feature: any }>(undefined);
const zoom = QueryParameters.GetQueryParameter("z", "" + layoutToUse.startzoom)
const zoom = QueryParameters.GetQueryParameter("z", undefined)
.syncWith(LocalStorageSource.Get("zoom"));
const lat = QueryParameters.GetQueryParameter("lat", "" + layoutToUse.startLat)
const lat = QueryParameters.GetQueryParameter("lat", undefined)
.syncWith(LocalStorageSource.Get("lat"));
const lon = QueryParameters.GetQueryParameter("lon", "" + layoutToUse.startLon)
const lon = QueryParameters.GetQueryParameter("lon", undefined)
.syncWith(LocalStorageSource.Get("lon"));
const featureSwitchUserbadge = QueryParameters.GetQueryParameter("fs-userbadge", ""+layoutToUse.enableUserBadge);
const featureSwitchSearch = QueryParameters.GetQueryParameter("fs-search", ""+layoutToUse.enableSearch);
const featureSwitchWelcomeMessage = QueryParameters.GetQueryParameter("fs-welcome-message", "true");
const featureSwitchLayers = QueryParameters.GetQueryParameter("fs-layers", ""+layoutToUse.enableLayers);
const featureSwitchAddNew = QueryParameters.GetQueryParameter("fs-add-new", ""+layoutToUse.enableAdd);
const featureSwitchIframe = QueryParameters.GetQueryParameter("fs-iframe", "false");
function featSw(key: string, deflt: boolean): UIEventSource<boolean> {
return QueryParameters.GetQueryParameter("fs-userbadge", "" + deflt).map((str) => {
return str !== "false";
});
}
const featureSwitchUserbadge = featSw("fs-userbadge", layoutToUse.enableUserBadge);
const featureSwitchSearch = featSw("fs-search", layoutToUse.enableSearch);
const featureSwitchLayers = featSw("fs-layers", layoutToUse.enableLayers);
const featureSwitchAddNew = featSw("fs-add-new", layoutToUse.enableAdd);
const featureSwitchWelcomeMessage = featSw("fs-welcome-message", true);
const featureSwitchIframe = featSw("fs-iframe", false);
const locationControl = new UIEventSource<{ lat: number, lon: number, zoom: number }>({
@ -134,9 +136,9 @@ locationControl.addCallback((latlonz) => {
// ----------------- Prepare the important objects -----------------
const osmConnection = new OsmConnection(
QueryParameters.GetQueryParameter("test", "false").data === "true"
const osmConnection: OsmConnection = new OsmConnection(
QueryParameters.GetQueryParameter("test", "false").data === "true",
QueryParameters.GetQueryParameter("oauth_token", undefined)
);
@ -148,8 +150,8 @@ window.setLanguage = function (language: string) {
}
Locale.language.addCallback((currentLanguage) => {
console.log("REsetting languate to", layoutToUse.supportedLanguages[0])
if (layoutToUse.supportedLanguages.indexOf(currentLanguage) < 0) {
console.log("Resetting languate to", layoutToUse.supportedLanguages[0], "as", currentLanguage, " is unsupported")
// The current language is not supported -> switch to a supported one
Locale.language.setData(layoutToUse.supportedLanguages[0]);
}
@ -181,47 +183,10 @@ const bm = new Basemap("leafletDiv", locationControl, new VariableUiElement(
// ------------- Setup the layers -------------------------------
const addButtons: {
name: UIElement,
icon: string,
tags: Tag[],
layerToAddTo: FilteredLayer
}[]
= [];
const flayers: FilteredLayer[] = []
const layerSetup = InitUiElements.InitLayers(layoutToUse, osmConnection, changes, allElements, bm, fullScreenMessage, selectedElement);
let minZoom = 0;
for (const layer of layoutToUse.layers) {
const generateInfo = (tagsES, feature) => {
return new FeatureInfoBox(
feature,
tagsES,
layer.title,
layer.elementsToShow,
changes,
osmConnection.userDetails
)
};
minZoom = Math.max(minZoom, layer.minzoom);
const flayer = FilteredLayer.fromDefinition(layer, bm, allElements, changes, osmConnection.userDetails, selectedElement, generateInfo);
const addButton = {
name: Translations.W(layer.name),
icon: layer.icon,
tags: layer.newElementTags,
layerToAddTo: flayer
}
addButtons.push(addButton);
flayers.push(flayer);
}
const layerUpdater = new LayerUpdater(bm, minZoom, flayers);
const layerUpdater = new LayerUpdater(bm, layerSetup.minZoom, layerSetup.flayers);
// --------------- Setting up layer selection ui --------
@ -233,14 +198,20 @@ const openFilterButton = `
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)]);
const layerSelection = new Combine([`<p class="filter__label">Maplayers</p>`, new LayerSelection(layerSetup.flayers)]);
let layerControl = backgroundMapPicker;
if (flayers.length > 1) {
if (layerSetup.flayers.length > 1) {
layerControl = new Combine([layerSelection, backgroundMapPicker]);
}
InitUiElements.OnlyIf(featureSwitchLayers, () => {
new CheckBox(layerControl, closedFilterButton).AttachTo("filter__selection");
const checkbox = new CheckBox(layerControl, closedFilterButton);
checkbox.AttachTo("filter__selection");
bm.Location.addCallback(() => {
checkbox.isEnabled.setData(false);
});
});
@ -261,7 +232,7 @@ InitUiElements.OnlyIf(featureSwitchAddNew, () => {
selectedElement,
layerUpdater.runningQuery,
osmConnection.userDetails,
addButtons);
layerSetup.presets);
}
);
});
@ -272,6 +243,9 @@ InitUiElements.OnlyIf(featureSwitchAddNew, () => {
* This is given to the div which renders fullscreen on mobile devices
*/
selectedElement.addCallback((feature) => {
if (feature?.feature?.properties === undefined) {
return;
}
const data = feature.feature.properties;
// Which is the applicable set?
for (const layer of layoutToUse.layers) {
@ -317,17 +291,17 @@ new FullScreenMessageBoxHandler(fullScreenMessage, () => {
}).update();
InitUiElements.OnlyIf(featureSwitchWelcomeMessage, () => {
InitUiElements.InitWelcomeMessage(layoutToUse, osmConnection, bm, fullScreenMessage)
InitUiElements.InitWelcomeMessage(layoutToUse,
featureSwitchUserbadge.data ? osmConnection : undefined, bm, fullScreenMessage)
});
if ((window != window.top && featureSwitchWelcomeMessage.data === "false") || featureSwitchIframe.data !== "false") {
console.log("WELCOME? ",featureSwitchWelcomeMessage.data)
if ((window != window.top && !featureSwitchWelcomeMessage.data) || featureSwitchIframe.data) {
new FixedUiElement(`<a href='${window.location}' target='_blank'><span class='iframe-escape'><img src='assets/pop-out.svg'></span></a>`).AttachTo("top-right")
}
new CenterMessageBox(
minZoom,
layerSetup.minZoom,
centerMessage,
osmConnection,
locationControl,

4
test.ts
View file

@ -1,4 +0,0 @@
import {MoreScreen} from "./UI/MoreScreen";
import {UIEventSource} from "./UI/UIEventSource";
new MoreScreen(new UIEventSource<{zoom: number, lat: number, lon: number}>({zoom: 16, lat: 51.3, lon: 3.2})).AttachTo("maindiv")