Improvements to velopark

assets/themes/velopark/velopark.json

@@ -9,8 +9,8 @@
     "en"
   ],
   "description": {
-    "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><liGreen 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> <p class='font-bold link-underline m-4'><a href='#current_view'>See the instructions</a></p>",
-    "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 groene 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><p class='font-bold link-underline m-4'><a href='#current_view'>Bekijk de instructies</a></p>"
   },
   "shortDescription": {
     "en": "A tool to import data from velopark.be into OpenStreetMap",
@@ -414,6 +414,38 @@
         "doCount": false,
         "minzoom": 18
       }
+    },
+    {
+      "builtin": "current_view",
+      "override": {
+        "=title": {
+          "en": "How to use?",
+          "nl": "Hoe te gebruiken"
+        },
+        "+pointRendering": [
+          {
+            "location": [
+              "point",
+              "centroid"
+            ],
+            "marker": [
+              {
+                "icon": "./assets/svg/help.svg"
+              }
+            ]
+          }
+        ],
+
+        "tagRenderings": [
+          {
+            "id": "tutorial",
+            "render": {
+              "en": "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><liGreen 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": "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 groene 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!"
+            }
+          }
+        ]
+      }
     }
   ],
   "overrideAll": {
@@ -473,6 +505,13 @@
     "tagRenderings+": [
       {
         "id": "no_save_needed",
+        "condition": {
+          "or": [
+            "id~node/*",
+            "id~way/*",
+            "id~relation/*"
+          ]
+        },
         "render": {
           "en": "Changes are automatically saved. You can simply close this popup with the cross at the upper-right",
           "nl": "Wijzigingen worden automatisch opgeslaan. Je kan deze popup gewoon sluiten met het kruisje rechtsbovenaan"

langs/en.json

@@ -60,6 +60,10 @@
         "done": "Done",
         "error": "Error",
         "loadedFrom": "The following data is loaded from <a href={url}>{source}</a> using the embedded JSON-LD",
+        "missing": {
+            "intro": "OpenStreetMap has no information about the following attributes",
+            "title": "Missing items"
+        },
         "noDataLoaded": "The external website has no linked data that could be loaded",
         "overwrite": "Overwrite in OpenStreetMap"
     },

src/Models/ThemeViewState.ts

@@ -69,6 +69,7 @@ import {
 import summaryLayer from "../assets/generated/layers/summary.json"
 import { LayerConfigJson } from "./ThemeConfig/Json/LayerConfigJson"
 import Locale from "../UI/i18n/Locale"
+import Hash from "../Logic/Web/Hash"
 
 /**
  *
@@ -496,6 +497,12 @@ export default class ThemeViewState implements SpecialVisualizationState {
         if (this.layout.customCss !== undefined && window.location.pathname.indexOf("theme") >= 0) {
             Utils.LoadCustomCss(this.layout.customCss)
         }
+
+        Hash.hash.addCallbackAndRunD(hash => {
+            if(hash === "current_view" || hash.match(/current_view_[0-9]+/)){
+                this.selectCurrentView()
+            }
+        })
     }
 
     /**
@@ -821,4 +828,9 @@ export default class ThemeViewState implements SpecialVisualizationState {
             this.userRelatedState.preferredBackgroundLayer
         )
     }
+
+    public selectCurrentView(){
+        this.guistate.closeAll()
+        this.selectedElement.setData(this.currentView.features?.data?.[0])
+    }
 }

src/UI/BigComponents/ThemeIntroPanel.svelte

@@ -15,6 +15,7 @@
   import Add from "../../assets/svg/Add.svelte"
   import Location_refused from "../../assets/svg/Location_refused.svelte"
   import Location from "../../assets/svg/Location.svelte"
+  import SpecialTranslation from "../Popup/TagRendering/SpecialTranslation.svelte"
 
   /**
    * The theme introduction panel
@@ -48,6 +49,7 @@
 <div class="flex h-full flex-col justify-between">
   <div>
     <!-- Intro, description, ... -->
+
     <Tr t={layout.description} />
     <Tr t={Translations.t.general.welcomeExplanation.general} />
     {#if layout.layers.some((l) => l.presets?.length > 0)}

src/UI/Comparison/ComparisonTable.svelte

@@ -109,16 +109,17 @@
   <div class="low-interaction border-interactive p-1">
     {#if !readonly}
       <Tr t={t.loadedFrom.Subs({ url: sourceUrl, source: sourceUrl })} />
-      <h3>
-        <Tr t={t.conflicting.title} />
-      </h3>
     {/if}
 
     <div class="flex flex-col" class:gap-y-8={!readonly}>
-      {#if !readonly}
+
-        <Tr t={t.conflicting.intro} />
-      {/if}
       {#if $different.length > 0}
+        {#if !readonly}
+          <h3>
+            <Tr t={t.conflicting.title} />
+          </h3>
+          <Tr t={t.conflicting.intro} />
+        {/if}
         {#each $different as key (key)}
           <div class="mx-2 rounded-2xl">
             <ComparisonAction
@@ -135,6 +136,13 @@
       {/if}
 
       {#if $missing.length > 0}
+        {#if !readonly}
+         <h3 class="m-0">
+          <Tr t={t.missing.title} />
+         </h3>
+
+          <Tr t={t.missing.intro} />
+        {/if}
         {#if currentStep === "init"}
           {#each $missing as key (key)}
             <div class:glowing-shadow={applyAllHovered} class="mx-2 rounded-2xl">

src/UI/SpecialVisualization.ts

@@ -1,12 +1,12 @@
 import { Store, UIEventSource } from "../Logic/UIEventSource"
 import BaseUIElement from "./BaseUIElement"
 import LayoutConfig from "../Models/ThemeConfig/LayoutConfig"
-import { IndexedFeatureSource, WritableFeatureSource } from "../Logic/FeatureSource/FeatureSource"
+import { FeatureSource, IndexedFeatureSource, WritableFeatureSource } from "../Logic/FeatureSource/FeatureSource"
 import { OsmConnection } from "../Logic/Osm/OsmConnection"
 import { Changes } from "../Logic/Osm/Changes"
 import { ExportableMap, MapProperties } from "../Models/MapProperties"
 import LayerState from "../Logic/State/LayerState"
-import { Feature, Geometry, Point } from "geojson"
+import { Feature, Geometry, Point, Polygon } from "geojson"
 import FullNodeDatabaseSource from "../Logic/FeatureSource/TiledFeatureSource/FullNodeDatabaseSource"
 import { MangroveIdentity } from "../Logic/Web/MangroveReviews"
 import { GeoIndexedStoreForLayer } from "../Logic/FeatureSource/Actors/GeoIndexedStore"
@@ -61,8 +61,10 @@ export interface SpecialVisualizationState {
 
     readonly selectedElement: UIEventSource<Feature>
 
+    readonly currentView: FeatureSource<Feature<Polygon>>
     readonly favourites: FavouritesFeatureSource
 
+
     /**
      * If data is currently being fetched from external sources
      */

src/UI/ThemeViewGUI.svelte

@@ -271,7 +271,7 @@
     {#if currentViewLayer?.tagRenderings && currentViewLayer.defaultIcon()}
       <MapControlButton
         on:click={() => {
-          state.selectedElement.setData(state.currentView.features?.data?.[0])
+          state.selectCurrentView()
         }}
         on:keydown={forwardEventToMap}
         htmlElem={openCurrentViewLayerButton}