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

Themes: various fixes to velopark, see #1783

Browse source
This commit is contained in:
Pieter Vander Vennet 2024-02-14 12:20:29 +01:00
parent 3b549a5a0b
commit 2583feef65
7 changed files with 261 additions and 202 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
assets/layers/bike_parking/bike_parking.json
View file

@ -64,7 +64,8 @@
"iconSize": "40,40", "iconSize": "40,40",
"location": [ "location": [
"point", "point",
"centroid" "projected_centerpoint",
"polygon_centroid"
], ],
"anchor": "bottom", "anchor": "bottom",
"marker": [ "marker": [

25
assets/themes/velopark/velopark.json
View file

@ -11,6 +11,9 @@
"en": "<p><a href='https://velopark.be' target='_blank'>Velopark.be</a> is a website collecting data about bicycle parkings in a semi-crowdsourced way. However, only 'authorized' instances are allowed to make changes there, in practice the operator of the bicycle parking such as SNCB, de Lijn or the municipality. They have now decided to synchronize their dataset with OpenStreetMap, and this MapComplete-instance is set up to help link and import their data into OpenStreetMap.</p> How to use: <ul><li>A velopark-icon on the map (yellow with bicycle silhouette) represents a bicycle known by Velopark but not yet known by OpenStreetMap</li><li>Blue pins are bicycle parkings known by OpenStreetMap</li><li>Light blue pins are bicycle parkings known by OpenStreetMap with a reference to Velopark.be (<span class='literal-code'>ref-velopark=*</span>)</li><li>Click a velopark item, you can either link it with a nearby OSM-bicycle parking or create a new bicycle parking. Note that the geometry of Velopark is often incorrect and can be a few up till 100 meters away from the actual bicycle parking. Use aerial imagery, linked images and streetview to determine the correct location</li><li>Once linked, you can compare the Velopark- and OSM-attributes and apply correct attributes</li><li>If Velopark has an image, you can also link the image</li></ul> That's it! Thanks for helping to import this!", "en": "<p><a href='https://velopark.be' target='_blank'>Velopark.be</a> is a website collecting data about bicycle parkings in a semi-crowdsourced way. However, only 'authorized' instances are allowed to make changes there, in practice the operator of the bicycle parking such as SNCB, de Lijn or the municipality. They have now decided to synchronize their dataset with OpenStreetMap, and this MapComplete-instance is set up to help link and import their data into OpenStreetMap.</p> How to use: <ul><li>A velopark-icon on the map (yellow with bicycle silhouette) represents a bicycle known by Velopark but not yet known by OpenStreetMap</li><li>Blue pins are bicycle parkings known by OpenStreetMap</li><li>Light blue pins are bicycle parkings known by OpenStreetMap with a reference to Velopark.be (<span class='literal-code'>ref-velopark=*</span>)</li><li>Click a velopark item, you can either link it with a nearby OSM-bicycle parking or create a new bicycle parking. Note that the geometry of Velopark is often incorrect and can be a few up till 100 meters away from the actual bicycle parking. Use aerial imagery, linked images and streetview to determine the correct location</li><li>Once linked, you can compare the Velopark- and OSM-attributes and apply correct attributes</li><li>If Velopark has an image, you can also link the image</li></ul> That's it! Thanks for helping to import this!",
"nl": "<p><a href='https://velopark.be' target='_blank'>Velopark.be</a> is een website die data verzamelt over fietsenstallingen in een semi-crowdsource manier. Hierbij kunnen enkel geautorizeerde gebruikers data bijdragen, in de praktijk de uitbaters van de fietsenstallingen zoals de bevoegde gemeentebesturen, de NMBS of de Lijn. Velopark.be heeft nu beslist om hun data met OpenStreetMap te synchronizeren. Deze website is de tool om van Velopark.be naar OpenStreetMap te gaan en hun data te importeren.</p> Hoe te gebruiken? <ul><li>Een velopark-logo op de kaart (geel met een fietssilhouette) duidt een fietsenstalling aan die gekend is in Velopark maar nog niet gekend (of gelinkt) is aan een fietsenstalling in OpenStreetMap</li><li>Een blauwe pin duidt een fietsenstalling aan die gekend is in OpenStreetMap</li><li>Een licht-blauwe pin duidt een fietsenstalling aan uit OpenStreetMap die een link heeft naar Velopark.be (<span class='literal-code'>ref-velopark=*</span>)</li><li>Als je op een velopark-item klikt op, kan je deze linken met een fietsenstalling in de buurt (<25m) of een nieuwe fietstalling aan OpenStreetMap toevoegen. Let op: de geometrie van Velopark is zelden correct en wijkt makkelijk 10 meter of meer af van de echte locatie - in uitzonderlijke gevallen zelfs tot meer dan 100 meter. Gebruik de meest recente luchtfoto's, de gelinkte foto's en mapillary om de correcte locatie te bepalen</li><li>Eens gelinkt, kan je de Velopark- en OSM-attributen vergelijken en de correcte attributen toepassen in OpenStreetMap</li><li>Indien velopark een foto heeft, kan je die ook nog linken</li></ul> Dat is het! Bedankt om mee te helpen!" "nl": "<p><a href='https://velopark.be' target='_blank'>Velopark.be</a> is een website die data verzamelt over fietsenstallingen in een semi-crowdsource manier. Hierbij kunnen enkel geautorizeerde gebruikers data bijdragen, in de praktijk de uitbaters van de fietsenstallingen zoals de bevoegde gemeentebesturen, de NMBS of de Lijn. Velopark.be heeft nu beslist om hun data met OpenStreetMap te synchronizeren. Deze website is de tool om van Velopark.be naar OpenStreetMap te gaan en hun data te importeren.</p> Hoe te gebruiken? <ul><li>Een velopark-logo op de kaart (geel met een fietssilhouette) duidt een fietsenstalling aan die gekend is in Velopark maar nog niet gekend (of gelinkt) is aan een fietsenstalling in OpenStreetMap</li><li>Een blauwe pin duidt een fietsenstalling aan die gekend is in OpenStreetMap</li><li>Een licht-blauwe pin duidt een fietsenstalling aan uit OpenStreetMap die een link heeft naar Velopark.be (<span class='literal-code'>ref-velopark=*</span>)</li><li>Als je op een velopark-item klikt op, kan je deze linken met een fietsenstalling in de buurt (<25m) of een nieuwe fietstalling aan OpenStreetMap toevoegen. Let op: de geometrie van Velopark is zelden correct en wijkt makkelijk 10 meter of meer af van de echte locatie - in uitzonderlijke gevallen zelfs tot meer dan 100 meter. Gebruik de meest recente luchtfoto's, de gelinkte foto's en mapillary om de correcte locatie te bepalen</li><li>Eens gelinkt, kan je de Velopark- en OSM-attributen vergelijken en de correcte attributen toepassen in OpenStreetMap</li><li>Indien velopark een foto heeft, kan je die ook nog linken</li></ul> Dat is het! Bedankt om mee te helpen!"
}, },
"descriptionTail": {
"*": "<h3>Maintainer tools</h3><ul><li><a class='link-underline' href='https://maproulette.org/api/v2/challenge/view/43282' download='Velopark_sync_2024-01-15.geojson'>Download the first sync results</a></li></ul>"
},
"hideFromOverview": true, "hideFromOverview": true,
"icon": "./assets/themes/velopark/velopark.svg", "icon": "./assets/themes/velopark/velopark.svg",
"mustHaveLanguage": [ "mustHaveLanguage": [
@ -30,6 +33,7 @@
"startLon": 3.71025, "startLon": 3.71025,
"startZoom": 18, "startZoom": 18,
"defaultBackgroundId": "photo", "defaultBackgroundId": "photo",
"enableNoteImports": false,
"layers": [ "layers": [
{ {
"id": "velopark_maproulette", "id": "velopark_maproulette",
@ -94,6 +98,14 @@
} }
} }
}, },
{
"id": "login",
"render": {
"special": {
"type": "login_button"
}
}
},
{ {
"id": "closest_parkings", "id": "closest_parkings",
"render": { "render": {
@ -137,7 +149,7 @@
"type": "maproulette_set_status", "type": "maproulette_set_status",
"message": { "message": {
"en": "Mark this item as linked manually. Use this if you did apply the reference via copy-paste or via another editor", "en": "Mark this item as linked manually. Use this if you did apply the reference via copy-paste or via another editor",
"nl": "Markeer als gelinkt. Gebruik deze optie indien je de ID plakte in een fietsenstalling of via een andere editor toevoegdemap" "nl": "Markeer als gelinkt. Gebruik deze optie indien je de ID plakte in een fietsenstalling of via een andere editor toevoegd"
}, },
"status": 1 "status": 1
} }
@ -150,10 +162,15 @@
"type": "maproulette_set_status", "type": "maproulette_set_status",
"message": { "message": {
"en": "Mark this item as incorrect or too hard to solve (duplicate, does not exist anymore, contradictory data, not placeable from aerial imagery)", "en": "Mark this item as incorrect or too hard to solve (duplicate, does not exist anymore, contradictory data, not placeable from aerial imagery)",
"nl": "Markeer dit object als incorrect of te moeillijk (duplicaat, incorrect of tegenstrijdige data, niet eenduidig te plaatsen adhv luchtfoto's, ...)" "nl": "Markeer dit object als incorrecte velopark data of te moeillijk (duplicaat, incorrect of tegenstrijdige data, niet eenduidig te plaatsen adhv luchtfoto's, ...)"
}, },
"image": "invalid", "image": "invalid",
"status": 6 "status": 6,
"ask_feedback": {
"en": "Is this point incorrect or is it difficult to solve? Please provide some feedback below",
"nl": "Is dit punt foutief of te moeilijk? Gelieve wat feedback te geven"
}
} }
} }
}, },
@ -248,7 +265,7 @@
{ {
"marker": [ "marker": [
{ {
"color": "#0088ff" "color": "#2cf200"
} }
] ]
} }

59
src/Logic/GeoOperations.ts
View file

@ -156,7 +156,7 @@ export class GeoOperations {
const intersection = GeoOperations.calculateIntersection( const intersection = GeoOperations.calculateIntersection(
feature, feature,
otherFeature, otherFeature,
featureBBox featureBBox,
) )
if (intersection === null) { if (intersection === null) {
continue continue
@ -195,7 +195,7 @@ export class GeoOperations {
console.error( console.error(
"Could not correctly calculate the overlap of ", "Could not correctly calculate the overlap of ",
feature, feature,
": unsupported type" ": unsupported type",
) )
return result return result
} }
@ -224,7 +224,7 @@ export class GeoOperations {
*/ */
public static inside( public static inside(
pointCoordinate: [number, number] | Feature<Point>, pointCoordinate: [number, number] | Feature<Point>,
feature: Feature feature: Feature,
): boolean { ): boolean {
// ray-casting algorithm based on // ray-casting algorithm based on
// http://www.ecse.rpi.edu/Homepages/wrf/Research/Short_Notes/pnpoly.html // http://www.ecse.rpi.edu/Homepages/wrf/Research/Short_Notes/pnpoly.html
@ -302,7 +302,7 @@ export class GeoOperations {
*/ */
public static nearestPoint( public static nearestPoint(
way: Feature<LineString>, way: Feature<LineString>,
point: [number, number] point: [number, number],
): Feature< ): Feature<
Point, Point,
{ {
@ -324,11 +324,11 @@ export class GeoOperations {
public static forceLineString(way: Feature<LineString | Polygon>): Feature<LineString> public static forceLineString(way: Feature<LineString | Polygon>): Feature<LineString>
public static forceLineString( public static forceLineString(
way: Feature<MultiLineString | MultiPolygon> way: Feature<MultiLineString | MultiPolygon>,
): Feature<MultiLineString> ): Feature<MultiLineString>
public static forceLineString( public static forceLineString(
way: Feature<LineString | MultiLineString | Polygon | MultiPolygon> way: Feature<LineString | MultiLineString | Polygon | MultiPolygon>,
): Feature<LineString | MultiLineString> { ): Feature<LineString | MultiLineString> {
if (way.geometry.type === "Polygon") { if (way.geometry.type === "Polygon") {
way = { ...way } way = { ...way }
@ -352,8 +352,8 @@ export class GeoOperations {
const headerValuesOrdered: string[] = [] const headerValuesOrdered: string[] = []
function addH(key: string) { function addH(key: string) {
if(options?.ignoreTags){ if (options?.ignoreTags) {
if(key.match(options.ignoreTags)){ if (key.match(options.ignoreTags)) {
return return
} }
} }
@ -455,7 +455,7 @@ export class GeoOperations {
*/ */
public static LineIntersections( public static LineIntersections(
feature: Feature<LineString | MultiLineString | Polygon | MultiPolygon>, feature: Feature<LineString | MultiLineString | Polygon | MultiPolygon>,
otherFeature: Feature<LineString | MultiLineString | Polygon | MultiPolygon> otherFeature: Feature<LineString | MultiLineString | Polygon | MultiPolygon>,
): [number, number][] { ): [number, number][] {
return turf return turf
.lineIntersect(feature, otherFeature) .lineIntersect(feature, otherFeature)
@ -492,7 +492,7 @@ export class GeoOperations {
locations: locations:
| Feature<LineString> | Feature<LineString>
| Feature<Point, { date?: string; altitude?: number | string }>[], | Feature<Point, { date?: string; altitude?: number | string }>[],
title?: string title?: string,
) { ) {
title = title?.trim() title = title?.trim()
if (title === undefined || title === "") { if (title === undefined || title === "") {
@ -513,7 +513,7 @@ export class GeoOperations {
type: "Point", type: "Point",
coordinates: p, coordinates: p,
}, },
} },
) )
} }
for (const l of locationsWithMeta) { for (const l of locationsWithMeta) {
@ -528,7 +528,7 @@ export class GeoOperations {
trackPoints.push(trkpt) trackPoints.push(trkpt)
} }
const header = const header =
'<gpx version="1.1" creator="mapcomplete.org" xmlns="http://www.topografix.com/GPX/1/1" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://www.topografix.com/GPX/1/1 http://www.topografix.com/GPX/1/1/gpx.xsd">' "<gpx version=\"1.1\" creator=\"mapcomplete.org\" xmlns=\"http://www.topografix.com/GPX/1/1\" xmlns:xsi=\"http://www.w3.org/2001/XMLSchema-instance\" xsi:schemaLocation=\"http://www.topografix.com/GPX/1/1 http://www.topografix.com/GPX/1/1/gpx.xsd\">"
return ( return (
header + header +
"\n<name>" + "\n<name>" +
@ -546,7 +546,7 @@ export class GeoOperations {
*/ */
public static toGpxPoints( public static toGpxPoints(
locations: Feature<Point, { date?: string; altitude?: number | string }>[], locations: Feature<Point, { date?: string; altitude?: number | string }>[],
title?: string title?: string,
) { ) {
title = title?.trim() title = title?.trim()
if (title === undefined || title === "") { if (title === undefined || title === "") {
@ -567,7 +567,7 @@ export class GeoOperations {
trackPoints.push(trkpt) trackPoints.push(trkpt)
} }
const header = const header =
'<gpx version="1.1" creator="mapcomplete.org" xmlns="http://www.topografix.com/GPX/1/1" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://www.topografix.com/GPX/1/1 http://www.topografix.com/GPX/1/1/gpx.xsd">' "<gpx version=\"1.1\" creator=\"mapcomplete.org\" xmlns=\"http://www.topografix.com/GPX/1/1\" xmlns:xsi=\"http://www.w3.org/2001/XMLSchema-instance\" xsi:schemaLocation=\"http://www.topografix.com/GPX/1/1 http://www.topografix.com/GPX/1/1/gpx.xsd\">"
return ( return (
header + header +
"\n<name>" + "\n<name>" +
@ -655,7 +655,7 @@ export class GeoOperations {
}, },
}, },
distanceMeter, distanceMeter,
{ units: "meters" } { units: "meters" },
).geometry.coordinates ).geometry.coordinates
} }
@ -690,7 +690,7 @@ export class GeoOperations {
*/ */
static completelyWithin( static completelyWithin(
feature: Feature<Geometry, any>, feature: Feature<Geometry, any>,
possiblyEnclosingFeature: Feature<Polygon | MultiPolygon, any> possiblyEnclosingFeature: Feature<Polygon | MultiPolygon, any>,
): boolean { ): boolean {
return booleanWithin(feature, possiblyEnclosingFeature) return booleanWithin(feature, possiblyEnclosingFeature)
} }
@ -746,7 +746,7 @@ export class GeoOperations {
*/ */
public static featureToCoordinateWithRenderingType( public static featureToCoordinateWithRenderingType(
feature: Feature, feature: Feature,
location: "point" | "centroid" | "start" | "end" | "projected_centerpoint" | string location: "point" | "centroid" | "start" | "end" | "projected_centerpoint" | "polygon_centerpoint" | string,
): [number, number] | undefined { ): [number, number] | undefined {
switch (location) { switch (location) {
case "point": case "point":
@ -759,6 +759,11 @@ export class GeoOperations {
return undefined return undefined
} }
return GeoOperations.centerpointCoordinates(feature) return GeoOperations.centerpointCoordinates(feature)
case "polygon_centerpoint":
if (feature.geometry.type === "Polygon") {
return GeoOperations.centerpointCoordinates(feature)
}
return undefined
case "projected_centerpoint": case "projected_centerpoint":
if ( if (
feature.geometry.type === "LineString" || feature.geometry.type === "LineString" ||
@ -767,7 +772,7 @@ export class GeoOperations {
const centerpoint = GeoOperations.centerpointCoordinates(feature) const centerpoint = GeoOperations.centerpointCoordinates(feature)
const projected = GeoOperations.nearestPoint( const projected = GeoOperations.nearestPoint(
<Feature<LineString>>feature, <Feature<LineString>>feature,
centerpoint centerpoint,
) )
return <[number, number]>projected.geometry.coordinates return <[number, number]>projected.geometry.coordinates
} }
@ -944,7 +949,7 @@ export class GeoOperations {
* GeoOperations.bearingToHuman(46) // => "NE" * GeoOperations.bearingToHuman(46) // => "NE"
*/ */
public static bearingToHuman( public static bearingToHuman(
bearing: number bearing: number,
): "N" | "NE" | "E" | "SE" | "S" | "SW" | "W" | "NW" { ): "N" | "NE" | "E" | "SE" | "S" | "SW" | "W" | "NW" {
while (bearing < 0) { while (bearing < 0) {
bearing += 360 bearing += 360
@ -970,7 +975,7 @@ export class GeoOperations {
* *
*/ */
public static bearingToHumanRelative( public static bearingToHumanRelative(
bearing: number bearing: number,
): ):
| "straight" | "straight"
| "slight_right" | "slight_right"
@ -995,12 +1000,12 @@ export class GeoOperations {
private static pointInPolygonCoordinates( private static pointInPolygonCoordinates(
x: number, x: number,
y: number, y: number,
coordinates: [number, number][][] coordinates: [number, number][][],
): boolean { ): boolean {
const inside = GeoOperations.pointWithinRing( const inside = GeoOperations.pointWithinRing(
x, x,
y, y,
/*This is the outer ring of the polygon */ coordinates[0] /*This is the outer ring of the polygon */ coordinates[0],
) )
if (!inside) { if (!inside) {
return false return false
@ -1009,7 +1014,7 @@ export class GeoOperations {
const inHole = GeoOperations.pointWithinRing( const inHole = GeoOperations.pointWithinRing(
x, x,
y, y,
coordinates[i] /* These are inner rings, aka holes*/ coordinates[i], /* These are inner rings, aka holes*/
) )
if (inHole) { if (inHole) {
return false return false
@ -1047,7 +1052,7 @@ export class GeoOperations {
feature, feature,
otherFeature, otherFeature,
featureBBox: BBox, featureBBox: BBox,
otherFeatureBBox?: BBox otherFeatureBBox?: BBox,
): number { ): number {
if (feature.geometry.type === "LineString") { if (feature.geometry.type === "LineString") {
otherFeatureBBox = otherFeatureBBox ?? BBox.get(otherFeature) otherFeatureBBox = otherFeatureBBox ?? BBox.get(otherFeature)
@ -1096,7 +1101,7 @@ export class GeoOperations {
let intersection = turf.lineSlice( let intersection = turf.lineSlice(
turf.point(intersectionPointsArray[0]), turf.point(intersectionPointsArray[0]),
turf.point(intersectionPointsArray[1]), turf.point(intersectionPointsArray[1]),
feature feature,
) )
if (intersection == null) { if (intersection == null) {
@ -1117,7 +1122,7 @@ export class GeoOperations {
otherFeature, otherFeature,
feature, feature,
otherFeatureBBox, otherFeatureBBox,
featureBBox featureBBox,
) )
} }
@ -1137,7 +1142,7 @@ export class GeoOperations {
console.log("Applying fallback intersection...") console.log("Applying fallback intersection...")
const intersection = turf.intersect( const intersection = turf.intersect(
turf.truncate(feature), turf.truncate(feature),
turf.truncate(otherFeature) turf.truncate(otherFeature),
) )
if (intersection == null) { if (intersection == null) {
return null return null

4
src/Models/ThemeConfig/Json/PointRenderingConfigJson.ts
View file

@ -28,9 +28,9 @@ export default interface PointRenderingConfigJson {
/** /**
* question: At what location should this icon be shown? * question: At what location should this icon be shown?
* multianswer: true * multianswer: true
* suggestions: return [{if: "value=point",then: "Show an icon for point (node) objects"},{if: "value=centroid",then: "Show an icon for line or polygon (way) objects at their centroid location"}, {if: "value=start",then: "Show an icon for line (way) objects at the start"},{if: "value=end",then: "Show an icon for line (way) object at the end"},{if: "value=projected_centerpoint",then: "Show an icon for line (way) object near the centroid location, but moved onto the line"}] * suggestions: return [{if: "value=point",then: "Show an icon for point (node) objects"},{if: "value=centroid",then: "Show an icon for line or polygon (way) objects at their centroid location"}, {if: "value=start",then: "Show an icon for line (way) objects at the start"},{if: "value=end",then: "Show an icon for line (way) object at the end"},{if: "value=projected_centerpoint",then: "Show an icon for line (way) object near the centroid location, but moved onto the line. Does not show an item on polygons"}, ,{if: "value=polygon_centroid",then: "Show an icon at a polygon centroid (but not if it is a way)"}]
*/ */
location: ("point" | "centroid" | "start" | "end" | "projected_centerpoint" | string)[] location: ("point" | "centroid" | "start" | "end" | "projected_centerpoint" | "polygon_centroid" | string)[]
/** /**
* The marker for an element. * The marker for an element.

3
src/Models/ThemeConfig/PointRenderingConfig.ts
View file

@ -38,9 +38,10 @@ export default class PointRenderingConfig extends WithContextLoader {
"start", "start",
"end", "end",
"projected_centerpoint", "projected_centerpoint",
"polygon_centroid"
]) ])
public readonly location: Set< public readonly location: Set<
"point" | "centroid" | "start" | "end" | "projected_centerpoint" | string "point" | "centroid" | "start" | "end" | "projected_centerpoint" | "polygon_centroid" | string
> >
public readonly marker: IconConfig[] public readonly marker: IconConfig[]

129
src/UI/MapRoulette/MaprouletteSetStatus.svelte
View file

@ -1,63 +1,82 @@
<script lang="ts"> <script lang="ts">
import type { SpecialVisualizationState } from "../SpecialVisualization" import type { SpecialVisualizationState } from "../SpecialVisualization"
import { Store, UIEventSource } from "../../Logic/UIEventSource" import { Store, UIEventSource } from "../../Logic/UIEventSource"
import Loading from "../../assets/svg/Loading.svelte" import Loading from "../../assets/svg/Loading.svelte"
import Tr from "../Base/Tr.svelte" import Tr from "../Base/Tr.svelte"
import Translations from "../i18n/Translations" import Translations from "../i18n/Translations"
import Icon from "../Map/Icon.svelte" import Icon from "../Map/Icon.svelte"
import Maproulette from "../../Logic/Maproulette" import Maproulette from "../../Logic/Maproulette"
import LoginToggle from "../Base/LoginToggle.svelte"
/** /**
* A UI-element to change the status of a maproulette-task * A UI-element to change the status of a maproulette-task
*/ */
export let state: SpecialVisualizationState export let state: SpecialVisualizationState
export let tags: UIEventSource<Record<string, string>> export let tags: UIEventSource<Record<string, string>>
export let message: string export let message: string
export let image: string export let image: string
export let message_closed: string export let message_closed: string
export let statusToSet: string export let statusToSet: string
export let maproulette_id_key: string export let maproulette_id_key: string
let applying = false export let askFeedback: string = ""
let failed = false
/** Current status of the task*/ let applying = false
let status: Store<number> = tags let failed = false
.map((tgs) => { let feedback: string = ""
if (tgs["status"]) {
return tgs["status"]
}
return Maproulette.codeToIndex(tgs["mr_taskStatus"])
})
.map(Number)
async function apply() { /** Current status of the task*/
const maproulette_id = tags.data[maproulette_id_key] ?? tags.data.mr_taskId ?? tags.data.id let status: Store<number> = tags
try { .map((tgs) => {
await Maproulette.singleton.closeTask(Number(maproulette_id), Number(statusToSet), { if (tgs["status"]) {
tags: `MapComplete MapComplete:${state.layout.id}`, return tgs["status"]
}) }
tags.data["mr_taskStatus"] = Maproulette.STATUS_MEANING[Number(statusToSet)] return Maproulette.codeToIndex(tgs["mr_taskStatus"])
tags.data.status = statusToSet })
tags.ping() .map(Number)
} catch (e) {
console.error(e) async function apply() {
failed = true const maproulette_id = tags.data[maproulette_id_key] ?? tags.data.mr_taskId ?? tags.data.id
try {
await Maproulette.singleton.closeTask(Number(maproulette_id), Number(statusToSet), {
tags: `MapComplete MapComplete:${state.layout.id}`,
comment: feedback
})
tags.data["mr_taskStatus"] = Maproulette.STATUS_MEANING[Number(statusToSet)]
tags.data.status = statusToSet
tags.ping()
} catch (e) {
console.error(e)
failed = true
}
} }
}
</script> </script>
{#if failed} <LoginToggle ignoreLoading={true} {state}>
<div class="alert">ERROR - could not close the MapRoulette task</div> {#if failed}
{:else if applying} <div class="alert">ERROR - could not close the MapRoulette task</div>
<Loading> {:else if applying}
<Tr t={Translations.t.general.loading} /> <Loading>
</Loading> <Tr t={Translations.t.general.loading} />
{:else if $status === Maproulette.STATUS_OPEN} </Loading>
<button class="no-image-background w-full p-4 m-0" on:click={() => apply()}> {:else if $status === Maproulette.STATUS_OPEN}
<Icon clss="w-8 h-8 mr-2 shrink-0" icon={image} /> {#if askFeedback !== "" && askFeedback !== undefined}
{message} <div class="flex flex-col p-1 gap-y-1 interactive border border-gray-500 border-dashed">
</button> <h3>{askFeedback}</h3>
{:else} <textarea bind:value={feedback}></textarea>
{message_closed} <button class="no-image-background w-full p-4 m-0" class:disabled={feedback===""} on:click={() => apply()}>
{/if} <Icon clss="w-8 h-8 mr-2 shrink-0" icon={image} />
{message}
</button>
{feedback}
</div>
{:else}
<button class="no-image-background w-full p-4 m-0" on:click={() => apply()}>
<Icon clss="w-8 h-8 mr-2 shrink-0" icon={image} />
{message}
</button>
{/if}
{:else}
{message_closed}
{/if}
</LoginToggle>

240
src/UI/SpecialVisualizations.ts
View file

@ -3,11 +3,7 @@ import { FixedUiElement } from "./Base/FixedUiElement"
import BaseUIElement from "./BaseUIElement" import BaseUIElement from "./BaseUIElement"
import Title from "./Base/Title" import Title from "./Base/Title"
import Table from "./Base/Table" import Table from "./Base/Table"
import { import { RenderingSpecification, SpecialVisualization, SpecialVisualizationState } from "./SpecialVisualization"
RenderingSpecification,
SpecialVisualization,
SpecialVisualizationState,
} from "./SpecialVisualization"
import { HistogramViz } from "./Popup/HistogramViz" import { HistogramViz } from "./Popup/HistogramViz"
import { MinimapViz } from "./Popup/MinimapViz" import { MinimapViz } from "./Popup/MinimapViz"
import { ShareLinkViz } from "./Popup/ShareLinkViz" import { ShareLinkViz } from "./Popup/ShareLinkViz"
@ -90,6 +86,8 @@ import Qr from "../Utils/Qr"
import ComparisonTool from "./Comparison/ComparisonTool.svelte" import ComparisonTool from "./Comparison/ComparisonTool.svelte"
import SpecialTranslation from "./Popup/TagRendering/SpecialTranslation.svelte" import SpecialTranslation from "./Popup/TagRendering/SpecialTranslation.svelte"
import SpecialVisualisationUtils from "./SpecialVisualisationUtils" import SpecialVisualisationUtils from "./SpecialVisualisationUtils"
import LoginButton from "./Base/LoginButton.svelte"
import Toggle from "./Input/Toggle"
class NearbyImageVis implements SpecialVisualization { class NearbyImageVis implements SpecialVisualization {
// Class must be in SpecialVisualisations due to weird cyclical import that breaks the tests // Class must be in SpecialVisualisations due to weird cyclical import that breaks the tests
@ -116,7 +114,7 @@ class NearbyImageVis implements SpecialVisualization {
tags: UIEventSource<Record<string, string>>, tags: UIEventSource<Record<string, string>>,
args: string[], args: string[],
feature: Feature, feature: Feature,
layer: LayerConfig layer: LayerConfig,
): BaseUIElement { ): BaseUIElement {
const isOpen = args[0] === "open" const isOpen = args[0] === "open"
const readonly = args[1] === "readonly" const readonly = args[1] === "readonly"
@ -183,7 +181,7 @@ class StealViz implements SpecialVisualization {
selectedElement: otherFeature, selectedElement: otherFeature,
state, state,
layer, layer,
}) }),
) )
} }
if (elements.length === 1) { if (elements.length === 1) {
@ -191,8 +189,8 @@ class StealViz implements SpecialVisualization {
} }
return new Combine(elements).SetClass("flex flex-col") return new Combine(elements).SetClass("flex flex-col")
}, },
[state.indexedFeatures.featuresById] [state.indexedFeatures.featuresById],
) ),
) )
} }
@ -231,7 +229,7 @@ export class QuestionViz implements SpecialVisualization {
tags: UIEventSource<Record<string, string>>, tags: UIEventSource<Record<string, string>>,
args: string[], args: string[],
feature: Feature, feature: Feature,
layer: LayerConfig layer: LayerConfig,
): BaseUIElement { ): BaseUIElement {
const labels = args[0] const labels = args[0]
?.split(";") ?.split(";")
@ -267,37 +265,38 @@ export default class SpecialVisualizations {
viz.docs, viz.docs,
viz.args.length > 0 viz.args.length > 0
? new Table( ? new Table(
["name", "default", "description"], ["name", "default", "description"],
viz.args.map((arg) => { viz.args.map((arg) => {
let defaultArg = arg.defaultValue ?? "_undefined_" let defaultArg = arg.defaultValue ?? "_undefined_"
if (defaultArg == "") { if (defaultArg == "") {
defaultArg = "_empty string_" defaultArg = "_empty string_"
} }
return [arg.name, defaultArg, arg.doc] return [arg.name, defaultArg, arg.doc]
}) }),
) )
: undefined, : undefined,
new Title("Example usage of " + viz.funcName, 4), new Title("Example usage of " + viz.funcName, 4),
new FixedUiElement( new FixedUiElement(
viz.example ?? viz.example ??
"`{" + "`{" +
viz.funcName + viz.funcName +
"(" + "(" +
viz.args.map((arg) => arg.defaultValue).join(",") + viz.args.map((arg) => arg.defaultValue).join(",") +
")}`" ")}`",
).SetClass("literal-code"), ).SetClass("literal-code"),
]) ])
} }
public static constructSpecification( public static constructSpecification(
template: string, template: string,
extraMappings: SpecialVisualization[] = [] extraMappings: SpecialVisualization[] = [],
): RenderingSpecification[] { ): RenderingSpecification[] {
return SpecialVisualisationUtils.constructSpecification(template, extraMappings) return SpecialVisualisationUtils.constructSpecification(template, extraMappings)
} }
public static HelpMessage() { public static HelpMessage() {
const helpTexts = SpecialVisualizations.specialVisualizations.map((viz) => const helpTexts = SpecialVisualizations.specialVisualizations.map((viz) =>
SpecialVisualizations.DocumentationFor(viz) SpecialVisualizations.DocumentationFor(viz),
) )
return new Combine([ return new Combine([
@ -331,10 +330,10 @@ export default class SpecialVisualizations {
}, },
}, },
null, null,
" " " ",
) ),
).SetClass("code"), ).SetClass("code"),
'In other words: use `{ "before": ..., "after": ..., "special": {"type": ..., "argname": ...argvalue...}`. The args are in the `special` block; an argvalue can be a string, a translation or another value. (Refer to class `RewriteSpecial` in case of problems)', "In other words: use `{ \"before\": ..., \"after\": ..., \"special\": {\"type\": ..., \"argname\": ...argvalue...}`. The args are in the `special` block; an argvalue can be a string, a translation or another value. (Refer to class `RewriteSpecial` in case of problems)",
]).SetClass("flex flex-col"), ]).SetClass("flex flex-col"),
...helpTexts, ...helpTexts,
]).SetClass("flex flex-col") ]).SetClass("flex flex-col")
@ -343,20 +342,20 @@ export default class SpecialVisualizations {
// noinspection JSUnusedGlobalSymbols // noinspection JSUnusedGlobalSymbols
public static renderExampleOfSpecial( public static renderExampleOfSpecial(
state: SpecialVisualizationState, state: SpecialVisualizationState,
s: SpecialVisualization s: SpecialVisualization,
): BaseUIElement { ): BaseUIElement {
const examples = const examples =
s.structuredExamples === undefined s.structuredExamples === undefined
? [] ? []
: s.structuredExamples().map((e) => { : s.structuredExamples().map((e) => {
return s.constr( return s.constr(
state, state,
new UIEventSource<Record<string, string>>(e.feature.properties), new UIEventSource<Record<string, string>>(e.feature.properties),
e.args, e.args,
e.feature, e.feature,
undefined undefined,
) )
}) })
return new Combine([new Title(s.funcName), s.docs, ...examples]) return new Combine([new Title(s.funcName), s.docs, ...examples])
} }
@ -396,7 +395,7 @@ export default class SpecialVisualizations {
assignTo: state.userRelatedState.language, assignTo: state.userRelatedState.language,
availableLanguages: state.layout.language, availableLanguages: state.layout.language,
preferredLanguages: state.osmConnection.userDetails.map( preferredLanguages: state.osmConnection.userDetails.map(
(ud) => ud.languages (ud) => ud.languages,
), ),
}) })
}, },
@ -421,7 +420,7 @@ export default class SpecialVisualizations {
constr( constr(
state: SpecialVisualizationState, state: SpecialVisualizationState,
tagSource: UIEventSource<Record<string, string>> tagSource: UIEventSource<Record<string, string>>,
): BaseUIElement { ): BaseUIElement {
return new VariableUiElement( return new VariableUiElement(
tagSource tagSource
@ -431,7 +430,7 @@ export default class SpecialVisualizations {
return new SplitRoadWizard(<WayId>id, state) return new SplitRoadWizard(<WayId>id, state)
} }
return undefined return undefined
}) }),
) )
}, },
}, },
@ -445,7 +444,7 @@ export default class SpecialVisualizations {
tagSource: UIEventSource<Record<string, string>>, tagSource: UIEventSource<Record<string, string>>,
argument: string[], argument: string[],
feature: Feature, feature: Feature,
layer: LayerConfig layer: LayerConfig,
): BaseUIElement { ): BaseUIElement {
if (feature.geometry.type !== "Point") { if (feature.geometry.type !== "Point") {
return undefined return undefined
@ -468,7 +467,7 @@ export default class SpecialVisualizations {
tagSource: UIEventSource<Record<string, string>>, tagSource: UIEventSource<Record<string, string>>,
argument: string[], argument: string[],
feature: Feature, feature: Feature,
layer: LayerConfig layer: LayerConfig,
): BaseUIElement { ): BaseUIElement {
if (!layer.deletion) { if (!layer.deletion) {
return undefined return undefined
@ -496,7 +495,7 @@ export default class SpecialVisualizations {
state: SpecialVisualizationState, state: SpecialVisualizationState,
tagSource: UIEventSource<Record<string, string>>, tagSource: UIEventSource<Record<string, string>>,
argument: string[], argument: string[],
feature: Feature feature: Feature,
): BaseUIElement { ): BaseUIElement {
const [lon, lat] = GeoOperations.centerpointCoordinates(feature) const [lon, lat] = GeoOperations.centerpointCoordinates(feature)
return new SvelteUIElement(CreateNewNote, { return new SvelteUIElement(CreateNewNote, {
@ -560,7 +559,7 @@ export default class SpecialVisualizations {
.map((tags) => tags[args[0]]) .map((tags) => tags[args[0]])
.map((wikidata) => { .map((wikidata) => {
wikidata = Utils.NoEmpty( wikidata = Utils.NoEmpty(
wikidata?.split(";")?.map((wd) => wd.trim()) ?? [] wikidata?.split(";")?.map((wd) => wd.trim()) ?? [],
)[0] )[0]
const entry = Wikidata.LoadWikidataEntry(wikidata) const entry = Wikidata.LoadWikidataEntry(wikidata)
return new VariableUiElement( return new VariableUiElement(
@ -570,9 +569,9 @@ export default class SpecialVisualizations {
} }
const response = <WikidataResponse>e["success"] const response = <WikidataResponse>e["success"]
return Translation.fromMap(response.labels) return Translation.fromMap(response.labels)
}) }),
) )
}) }),
), ),
}, },
new MapillaryLinkVis(), new MapillaryLinkVis(),
@ -586,7 +585,7 @@ export default class SpecialVisualizations {
tags: UIEventSource<Record<string, string>>, tags: UIEventSource<Record<string, string>>,
_, _,
__, __,
layer: LayerConfig layer: LayerConfig,
) => new SvelteUIElement(AllTagsPanel, { tags, layer }), ) => new SvelteUIElement(AllTagsPanel, { tags, layer }),
}, },
{ {
@ -608,7 +607,7 @@ export default class SpecialVisualizations {
return new ImageCarousel( return new ImageCarousel(
AllImageProviders.LoadImagesFor(tags, imagePrefixes), AllImageProviders.LoadImagesFor(tags, imagePrefixes),
tags, tags,
state state,
) )
}, },
}, },
@ -664,7 +663,7 @@ export default class SpecialVisualizations {
{ {
nameKey: nameKey, nameKey: nameKey,
fallbackName, fallbackName,
} },
) )
return new SvelteUIElement(StarsBarIcon, { return new SvelteUIElement(StarsBarIcon, {
score: reviews.average, score: reviews.average,
@ -697,7 +696,7 @@ export default class SpecialVisualizations {
{ {
nameKey: nameKey, nameKey: nameKey,
fallbackName, fallbackName,
} },
) )
return new SvelteUIElement(ReviewForm, { reviews, state, tags, feature, layer }) return new SvelteUIElement(ReviewForm, { reviews, state, tags, feature, layer })
}, },
@ -729,7 +728,7 @@ export default class SpecialVisualizations {
{ {
nameKey: nameKey, nameKey: nameKey,
fallbackName, fallbackName,
} },
) )
return new SvelteUIElement(AllReviews, { reviews, state, tags, feature, layer }) return new SvelteUIElement(AllReviews, { reviews, state, tags, feature, layer })
}, },
@ -787,7 +786,7 @@ export default class SpecialVisualizations {
tags: UIEventSource<Record<string, string>>, tags: UIEventSource<Record<string, string>>,
args: string[], args: string[],
feature: Feature, feature: Feature,
layer: LayerConfig layer: LayerConfig,
): SvelteUIElement { ): SvelteUIElement {
const keyToUse = args[0] const keyToUse = args[0]
const prefix = args[1] const prefix = args[1]
@ -824,17 +823,17 @@ export default class SpecialVisualizations {
return undefined return undefined
} }
const allUnits: Unit[] = [].concat( const allUnits: Unit[] = [].concat(
...(state?.layout?.layers?.map((lyr) => lyr.units) ?? []) ...(state?.layout?.layers?.map((lyr) => lyr.units) ?? []),
) )
const unit = allUnits.filter((unit) => const unit = allUnits.filter((unit) =>
unit.isApplicableToKey(key) unit.isApplicableToKey(key),
)[0] )[0]
if (unit === undefined) { if (unit === undefined) {
return value return value
} }
const getCountry = () => tagSource.data._country const getCountry = () => tagSource.data._country
return unit.asHumanLongValue(value, getCountry) return unit.asHumanLongValue(value, getCountry)
}) }),
) )
}, },
}, },
@ -851,7 +850,7 @@ export default class SpecialVisualizations {
new Combine([ new Combine([
t.downloadFeatureAsGeojson.SetClass("font-bold text-lg"), t.downloadFeatureAsGeojson.SetClass("font-bold text-lg"),
t.downloadGeoJsonHelper.SetClass("subtle"), t.downloadGeoJsonHelper.SetClass("subtle"),
]).SetClass("flex flex-col") ]).SetClass("flex flex-col"),
) )
.onClick(() => { .onClick(() => {
console.log("Exporting as Geojson") console.log("Exporting as Geojson")
@ -864,7 +863,7 @@ export default class SpecialVisualizations {
title + "_mapcomplete_export.geojson", title + "_mapcomplete_export.geojson",
{ {
mimetype: "application/vnd.geo+json", mimetype: "application/vnd.geo+json",
} },
) )
}) })
.SetClass("w-full") .SetClass("w-full")
@ -900,7 +899,7 @@ export default class SpecialVisualizations {
constr: (state) => { constr: (state) => {
return new SubtleButton( return new SubtleButton(
Svg.delete_icon_svg().SetStyle("height: 1.5rem"), Svg.delete_icon_svg().SetStyle("height: 1.5rem"),
Translations.t.general.removeLocationHistory Translations.t.general.removeLocationHistory,
).onClick(() => { ).onClick(() => {
state.historicalUserLocations.features.setData([]) state.historicalUserLocations.features.setData([])
state.selectedElement.setData(undefined) state.selectedElement.setData(undefined)
@ -938,10 +937,10 @@ export default class SpecialVisualizations {
.filter((c) => c.text !== "") .filter((c) => c.text !== "")
.map( .map(
(c, i) => (c, i) =>
new NoteCommentElement(c, state, i, comments.length) new NoteCommentElement(c, state, i, comments.length),
) ),
).SetClass("flex flex-col") ).SetClass("flex flex-col")
}) }),
), ),
}, },
{ {
@ -975,7 +974,7 @@ export default class SpecialVisualizations {
tagsSource: UIEventSource<Record<string, string>>, tagsSource: UIEventSource<Record<string, string>>,
_: string[], _: string[],
feature: Feature, feature: Feature,
layer: LayerConfig layer: LayerConfig,
) => ) =>
new VariableUiElement( new VariableUiElement(
tagsSource.map((tags) => { tagsSource.map((tags) => {
@ -993,7 +992,7 @@ export default class SpecialVisualizations {
feature, feature,
layer, layer,
}).SetClass("px-1") }).SetClass("px-1")
}) }),
), ),
}, },
{ {
@ -1009,8 +1008,8 @@ export default class SpecialVisualizations {
let challenge = Stores.FromPromise( let challenge = Stores.FromPromise(
Utils.downloadJsonCached( Utils.downloadJsonCached(
`${Maproulette.defaultEndpoint}/challenge/${parentId}`, `${Maproulette.defaultEndpoint}/challenge/${parentId}`,
24 * 60 * 60 * 1000 24 * 60 * 60 * 1000,
) ),
) )
return new VariableUiElement( return new VariableUiElement(
@ -1035,7 +1034,7 @@ export default class SpecialVisualizations {
} else { } else {
return [title, new List(listItems)] return [title, new List(listItems)]
} }
}) }),
) )
}, },
docs: "Fetches the metadata of MapRoulette campaign that this task is part of and shows those details (namely `title`, `description` and `instruction`).\n\nThis reads the property `mr_challengeId` to detect the parent campaign.", docs: "Fetches the metadata of MapRoulette campaign that this task is part of and shows those details (namely `title`, `description` and `instruction`).\n\nThis reads the property `mr_challengeId` to detect the parent campaign.",
@ -1049,15 +1048,15 @@ export default class SpecialVisualizations {
"\n" + "\n" +
"```json\n" + "```json\n" +
"{\n" + "{\n" +
' "id": "mark_duplicate",\n' + " \"id\": \"mark_duplicate\",\n" +
' "render": {\n' + " \"render\": {\n" +
' "special": {\n' + " \"special\": {\n" +
' "type": "maproulette_set_status",\n' + " \"type\": \"maproulette_set_status\",\n" +
' "message": {\n' + " \"message\": {\n" +
' "en": "Mark as not found or false positive"\n' + " \"en\": \"Mark as not found or false positive\"\n" +
" },\n" + " },\n" +
' "status": "2",\n' + " \"status\": \"2\",\n" +
' "image": "close"\n' + " \"image\": \"close\"\n" +
" }\n" + " }\n" +
" }\n" + " }\n" +
"}\n" + "}\n" +
@ -1086,10 +1085,15 @@ export default class SpecialVisualizations {
doc: "The property name containing the maproulette id", doc: "The property name containing the maproulette id",
defaultValue: "mr_taskId", defaultValue: "mr_taskId",
}, },
{
name: "ask_feedback",
doc: "If not an empty string, this will be used as question to ask some additional feedback. A text field will be added",
defaultValue: ""
}
], ],
constr: (state, tagsSource, args) => { constr: (state, tagsSource, args) => {
let [message, image, message_closed, statusToSet, maproulette_id_key] = args let [message, image, message_closed, statusToSet, maproulette_id_key, askFeedback] = args
if (image === "") { if (image === "") {
image = "confirm" image = "confirm"
} }
@ -1105,6 +1109,7 @@ export default class SpecialVisualizations {
message_closed, message_closed,
statusToSet, statusToSet,
maproulette_id_key, maproulette_id_key,
askFeedback
}) })
}, },
}, },
@ -1124,8 +1129,8 @@ export default class SpecialVisualizations {
const fsBboxed = new BBoxFeatureSourceForLayer(fs, bbox) const fsBboxed = new BBoxFeatureSourceForLayer(fs, bbox)
return new StatisticsPanel(fsBboxed) return new StatisticsPanel(fsBboxed)
}, },
[state.mapProperties.bounds] [state.mapProperties.bounds],
) ),
) )
}, },
}, },
@ -1191,7 +1196,7 @@ export default class SpecialVisualizations {
constr( constr(
state: SpecialVisualizationState, state: SpecialVisualizationState,
tagSource: UIEventSource<Record<string, string>>, tagSource: UIEventSource<Record<string, string>>,
args: string[] args: string[],
): BaseUIElement { ): BaseUIElement {
let [text, href, classnames, download, ariaLabel] = args let [text, href, classnames, download, ariaLabel] = args
if (download === "") { if (download === "") {
@ -1203,13 +1208,13 @@ export default class SpecialVisualizations {
(tags) => (tags) =>
new SvelteUIElement(Link, { new SvelteUIElement(Link, {
text: Utils.SubstituteKeys(text, tags), text: Utils.SubstituteKeys(text, tags),
href: Utils.SubstituteKeys(href, tags).replaceAll(/ /g, '%20') /* Chromium based browsers eat the spaces */, href: Utils.SubstituteKeys(href, tags).replaceAll(/ /g, "%20") /* Chromium based browsers eat the spaces */,
classnames, classnames,
download: Utils.SubstituteKeys(download, tags), download: Utils.SubstituteKeys(download, tags),
ariaLabel: Utils.SubstituteKeys(ariaLabel, tags), ariaLabel: Utils.SubstituteKeys(ariaLabel, tags),
newTab, newTab,
}) }),
) ),
) )
}, },
}, },
@ -1231,7 +1236,7 @@ export default class SpecialVisualizations {
}, },
}, },
null, null,
" " " ",
) + ) +
"\n```", "\n```",
args: [ args: [
@ -1255,7 +1260,7 @@ export default class SpecialVisualizations {
featureTags: UIEventSource<Record<string, string>>, featureTags: UIEventSource<Record<string, string>>,
args: string[], args: string[],
feature: Feature, feature: Feature,
layer: LayerConfig layer: LayerConfig,
) { ) {
const [key, tr, classesRaw] = args const [key, tr, classesRaw] = args
let classes = classesRaw ?? "" let classes = classesRaw ?? ""
@ -1280,7 +1285,7 @@ export default class SpecialVisualizations {
elements.push(subsTr) elements.push(subsTr)
} }
return elements return elements
}) }),
) )
}, },
}, },
@ -1300,7 +1305,7 @@ export default class SpecialVisualizations {
tagSource: UIEventSource<Record<string, string>>, tagSource: UIEventSource<Record<string, string>>,
argument: string[], argument: string[],
feature: Feature, feature: Feature,
layer: LayerConfig layer: LayerConfig,
): BaseUIElement { ): BaseUIElement {
return new VariableUiElement( return new VariableUiElement(
tagSource.map((tags) => { tagSource.map((tags) => {
@ -1312,7 +1317,7 @@ export default class SpecialVisualizations {
console.error("Cannot create a translation for", v, "due to", e) console.error("Cannot create a translation for", v, "due to", e)
return JSON.stringify(v) return JSON.stringify(v)
} }
}) }),
) )
}, },
}, },
@ -1332,7 +1337,7 @@ export default class SpecialVisualizations {
tagSource: UIEventSource<Record<string, string>>, tagSource: UIEventSource<Record<string, string>>,
argument: string[], argument: string[],
feature: Feature, feature: Feature,
layer: LayerConfig layer: LayerConfig,
): BaseUIElement { ): BaseUIElement {
const key = argument[0] const key = argument[0]
const validator = new FediverseValidator() const validator = new FediverseValidator()
@ -1342,7 +1347,7 @@ export default class SpecialVisualizations {
.map((fediAccount) => { .map((fediAccount) => {
fediAccount = validator.reformat(fediAccount) fediAccount = validator.reformat(fediAccount)
const [_, username, host] = fediAccount.match( const [_, username, host] = fediAccount.match(
FediverseValidator.usernameAtServer FediverseValidator.usernameAtServer,
) )
const normalLink = new SvelteUIElement(Link, { const normalLink = new SvelteUIElement(Link, {
@ -1354,10 +1359,10 @@ export default class SpecialVisualizations {
const loggedInContributorMastodon = const loggedInContributorMastodon =
state.userRelatedState?.preferencesAsTags?.data?.[ state.userRelatedState?.preferencesAsTags?.data?.[
"_mastodon_link" "_mastodon_link"
] ]
console.log( console.log(
"LoggedinContributorMastodon", "LoggedinContributorMastodon",
loggedInContributorMastodon loggedInContributorMastodon,
) )
if (!loggedInContributorMastodon) { if (!loggedInContributorMastodon) {
return normalLink return normalLink
@ -1373,7 +1378,7 @@ export default class SpecialVisualizations {
newTab: true, newTab: true,
}).SetClass("button"), }).SetClass("button"),
]) ])
}) }),
) )
}, },
}, },
@ -1393,7 +1398,7 @@ export default class SpecialVisualizations {
tagSource: UIEventSource<Record<string, string>>, tagSource: UIEventSource<Record<string, string>>,
args: string[], args: string[],
feature: Feature, feature: Feature,
layer: LayerConfig layer: LayerConfig,
): BaseUIElement { ): BaseUIElement {
return new FixedUiElement("{" + args[0] + "}") return new FixedUiElement("{" + args[0] + "}")
}, },
@ -1414,7 +1419,7 @@ export default class SpecialVisualizations {
tagSource: UIEventSource<Record<string, string>>, tagSource: UIEventSource<Record<string, string>>,
argument: string[], argument: string[],
feature: Feature, feature: Feature,
layer: LayerConfig layer: LayerConfig,
): BaseUIElement { ): BaseUIElement {
const key = argument[0] ?? "value" const key = argument[0] ?? "value"
return new VariableUiElement( return new VariableUiElement(
@ -1432,12 +1437,12 @@ export default class SpecialVisualizations {
} catch (e) { } catch (e) {
return new FixedUiElement( return new FixedUiElement(
"Could not parse this tag: " + "Could not parse this tag: " +
JSON.stringify(value) + JSON.stringify(value) +
" due to " + " due to " +
e e,
).SetClass("alert") ).SetClass("alert")
} }
}) }),
) )
}, },
}, },
@ -1458,7 +1463,7 @@ export default class SpecialVisualizations {
tagSource: UIEventSource<Record<string, string>>, tagSource: UIEventSource<Record<string, string>>,
argument: string[], argument: string[],
feature: Feature, feature: Feature,
layer: LayerConfig layer: LayerConfig,
): BaseUIElement { ): BaseUIElement {
const giggityUrl = argument[0] const giggityUrl = argument[0]
return new SvelteUIElement(Giggity, { tags: tagSource, state, giggityUrl }) return new SvelteUIElement(Giggity, { tags: tagSource, state, giggityUrl })
@ -1474,12 +1479,12 @@ export default class SpecialVisualizations {
_: UIEventSource<Record<string, string>>, _: UIEventSource<Record<string, string>>,
argument: string[], argument: string[],
feature: Feature, feature: Feature,
layer: LayerConfig layer: LayerConfig,
): BaseUIElement { ): BaseUIElement {
const tags = (<ThemeViewState>( const tags = (<ThemeViewState>(
state state
)).geolocation.currentUserLocation.features.map( )).geolocation.currentUserLocation.features.map(
(features) => features[0]?.properties (features) => features[0]?.properties,
) )
return new Combine([ return new Combine([
new SvelteUIElement(OrientationDebugPanel, {}), new SvelteUIElement(OrientationDebugPanel, {}),
@ -1501,7 +1506,7 @@ export default class SpecialVisualizations {
tagSource: UIEventSource<Record<string, string>>, tagSource: UIEventSource<Record<string, string>>,
argument: string[], argument: string[],
feature: Feature, feature: Feature,
layer: LayerConfig layer: LayerConfig,
): BaseUIElement { ): BaseUIElement {
return new SvelteUIElement(MarkAsFavourite, { return new SvelteUIElement(MarkAsFavourite, {
tags: tagSource, tags: tagSource,
@ -1521,7 +1526,7 @@ export default class SpecialVisualizations {
tagSource: UIEventSource<Record<string, string>>, tagSource: UIEventSource<Record<string, string>>,
argument: string[], argument: string[],
feature: Feature, feature: Feature,
layer: LayerConfig layer: LayerConfig,
): BaseUIElement { ): BaseUIElement {
return new SvelteUIElement(MarkAsFavouriteMini, { return new SvelteUIElement(MarkAsFavouriteMini, {
tags: tagSource, tags: tagSource,
@ -1541,7 +1546,7 @@ export default class SpecialVisualizations {
tagSource: UIEventSource<Record<string, string>>, tagSource: UIEventSource<Record<string, string>>,
argument: string[], argument: string[],
feature: Feature, feature: Feature,
layer: LayerConfig layer: LayerConfig,
): BaseUIElement { ): BaseUIElement {
return new SvelteUIElement(DirectionIndicator, { state, feature }) return new SvelteUIElement(DirectionIndicator, { state, feature })
}, },
@ -1556,7 +1561,7 @@ export default class SpecialVisualizations {
tagSource: UIEventSource<Record<string, string>>, tagSource: UIEventSource<Record<string, string>>,
argument: string[], argument: string[],
feature: Feature, feature: Feature,
layer: LayerConfig layer: LayerConfig,
): BaseUIElement { ): BaseUIElement {
return new VariableUiElement( return new VariableUiElement(
tagSource tagSource
@ -1578,9 +1583,9 @@ export default class SpecialVisualizations {
`${window.location.protocol}//${window.location.host}${window.location.pathname}?${layout}lat=${lat}&lon=${lon}&z=15` + `${window.location.protocol}//${window.location.host}${window.location.pathname}?${layout}lat=${lat}&lon=${lon}&z=15` +
`#${id}` `#${id}`
return new Img(new Qr(url).toImageElement(75)).SetStyle( return new Img(new Qr(url).toImageElement(75)).SetStyle(
"width: 75px" "width: 75px",
) )
}) }),
) )
}, },
}, },
@ -1600,7 +1605,7 @@ export default class SpecialVisualizations {
tagSource: UIEventSource<Record<string, string>>, tagSource: UIEventSource<Record<string, string>>,
args: string[], args: string[],
feature: Feature, feature: Feature,
layer: LayerConfig layer: LayerConfig,
): BaseUIElement { ): BaseUIElement {
const key = args[0] === "" ? "_direction:centerpoint" : args[0] const key = args[0] === "" ? "_direction:centerpoint" : args[0]
return new VariableUiElement( return new VariableUiElement(
@ -1611,11 +1616,11 @@ export default class SpecialVisualizations {
}) })
.mapD((value) => { .mapD((value) => {
const dir = GeoOperations.bearingToHuman( const dir = GeoOperations.bearingToHuman(
GeoOperations.parseBearing(value) GeoOperations.parseBearing(value),
) )
console.log("Human dir", dir) console.log("Human dir", dir)
return Translations.t.general.visualFeedback.directionsAbsolute[dir] return Translations.t.general.visualFeedback.directionsAbsolute[dir]
}) }),
) )
}, },
}, },
@ -1650,7 +1655,7 @@ export default class SpecialVisualizations {
tagSource: UIEventSource<Record<string, string>>, tagSource: UIEventSource<Record<string, string>>,
args: string[], args: string[],
feature: Feature, feature: Feature,
layer: LayerConfig layer: LayerConfig,
): BaseUIElement { ): BaseUIElement {
const url = args[0] const url = args[0]
const postprocessVelopark = args[2] === "velopark" const postprocessVelopark = args[2] === "velopark"
@ -1666,6 +1671,17 @@ export default class SpecialVisualizations {
}) })
}, },
}, },
{
funcName: "login_button",
args: [
],
docs: "Show a login button",
needsUrls: [],
constr(state: SpecialVisualizationState, tagSource: UIEventSource<Record<string, string>>, args: string[], feature: Feature, layer: LayerConfig): BaseUIElement {
return new Toggle(undefined,
new SvelteUIElement(LoginButton), state.osmConnection.isLoggedIn)
},
},
] ]
specialVisualizations.push(new AutoApplyButton(specialVisualizations)) specialVisualizations.push(new AutoApplyButton(specialVisualizations))
@ -1677,7 +1693,7 @@ export default class SpecialVisualizations {
throw ( throw (
"Invalid special visualisation found: funcName is undefined for " + "Invalid special visualisation found: funcName is undefined for " +
invalid.map((sp) => sp.i).join(", ") + invalid.map((sp) => sp.i).join(", ") +
'. Did you perhaps type \n funcName: "funcname" // type declaration uses COLON\ninstead of:\n funcName = "funcName" // value definition uses EQUAL' ". Did you perhaps type \n funcName: \"funcname\" // type declaration uses COLON\ninstead of:\n funcName = \"funcName\" // value definition uses EQUAL"
) )
} }