Small fixes

Logic/Basemap.ts

@@ -14,14 +14,14 @@ export class Basemap {
     private aivLucht2013Layer = L.tileLayer.wms('https://geoservices.informatievlaanderen.be/raadpleegdiensten/OGW/wms?s',
         {
             layers: "OGWRGB13_15VL",
-            attribution: "Luchtfoto's van © AIV Vlaanderen (2013-2015) | Data van OpenStreetMap"
+            attribution: "Luchtfoto's van © AIV Vlaanderen (2013-2015) | "
         });
 
     private aivLuchtLatestLayer = L.tileLayer("https://tile.informatievlaanderen.be/ws/raadpleegdiensten/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&" +
         "LAYER=omwrgbmrvl&STYLE=&FORMAT=image/png&tileMatrixSet=GoogleMapsVL&tileMatrix={z}&tileRow={y}&tileCol={x}",
         {
             // omwrgbmrvl
-            attribution: 'Map Data <a href="https://osm.org">OpenStreetMap</a> | Luchtfoto\'s van © AIV Vlaanderen (Laatste)  © AGIV',
+            attribution: 'Luchtfoto\'s van © AIV Vlaanderen (Laatste)  © AGIV',
             maxZoom: 20,
             minZoom: 1,
             wmts: true
@@ -30,20 +30,20 @@ export class Basemap {
 
     private osmLayer = L.tileLayer("https://tile.openstreetmap.org/{z}/{x}/{y}.png",
         {
-            attribution: 'Map Data and background © <a href="https://osm.org">OpenStreetMap</a>',
+            attribution: '',
             maxZoom: 19,
             minZoom: 1
         });
     private osmBeLayer = L.tileLayer("https://tile.osm.be/osmbe/{z}/{x}/{y}.png",
         {
-            attribution: 'Map Data and background © <a href="https://osm.org">OpenStreetMap</a> | <a href="https://geo6.be/">Tiles courtesy of Geo6</a>',
+            attribution: '<a href="https://geo6.be/">Tile hosting courtesy of Geo6</a>',
             maxZoom: 18,
             minZoom: 1
         });
 
     private grbLayer = L.tileLayer("https://tile.informatievlaanderen.be/ws/raadpleegdiensten/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=grb_bsk&STYLE=&FORMAT=image/png&tileMatrixSet=GoogleMapsVL&tileMatrix={z}&tileCol={x}&tileRow={y}",
         {
-            attribution: 'Map Data   <a href="https://osm.org">OpenStreetMap</a> | Background <i>Grootschalig ReferentieBestand</i>(GRB) © AGIV',
+            attribution: 'Achtergrond <i>Grootschalig ReferentieBestand</i>(GRB) © AGIV',
             maxZoom: 20,
             minZoom: 1,
             wmts: true
@@ -66,7 +66,8 @@ export class Basemap {
             zoom: location.data.zoom,
             layers: [this.osmLayer],
         });
-        this.map.attributionControl.setPrefix(extraAttribution.Render());
+        this.map.attributionControl.setPrefix(
+            extraAttribution.Render() + " | <a href='https://osm.org'>OpenStreetMap</a>");
         this.Location = location;
 
         const layerControl = L.control.layers(this.baseLayers, null,

UI/SimpleAddUI.ts

@@ -15,11 +15,13 @@ export class SimpleAddUI extends UIElement {
     private _lastClickLocation: UIEventSource<{ lat: number; lon: number }>;
     private _changes: Changes;
     private _selectedElement: UIEventSource<any>;
+    private _dataIsLoading: UIEventSource<boolean>;
 
     constructor(zoomlevel: UIEventSource<{ zoom: number }>,
                 lastClickLocation: UIEventSource<{ lat: number, lon: number }>,
                 changes: Changes,
                 selectedElement: UIEventSource<any>,
+                dataIsLoading: UIEventSource<boolean>,
                 addButtons: { name: string; icon: string; tags: Tag[]; layerToAddTo: FilteredLayer }[],
     ) {
         super(zoomlevel);
@@ -27,6 +29,7 @@ export class SimpleAddUI extends UIElement {
         this._lastClickLocation = lastClickLocation;
         this._changes = changes;
         this._selectedElement = selectedElement;
+        this._dataIsLoading = dataIsLoading;
         this._addButtons = [];
 
         for (const option of addButtons) {
@@ -53,15 +56,17 @@ export class SimpleAddUI extends UIElement {
 
     protected InnerRender(): string {
         const header = "<h2>Geen selectie</h2>" +
-            "Je klikte ergens waar er nog geen gezochte data is.<br/>"
+            "Je klikte ergens waar er nog geen gezochte data is.<br/>";
         if (this._zoomlevel.data.zoom < 19) {
-            return header + "Zoom verder in om een element toe te voegen."
+            return header + "Zoom verder in om een element toe te voegen.";
+        }
+        
+        if(this._dataIsLoading.data){
+            return header + "De data is nog aan het laden. Nog even geduld, dan kan je een punt toevoegen";
         }
 
         var html = "";
         for (const button of this._addButtons) {
-            // <button type='button'> looks SO retarded
-            // the default type of button is 'submit', which performs a POST and page reload
             html += button.Render();
         }
         return header + html;

UI/UserBadge.ts

@@ -58,7 +58,7 @@ export class UserBadge extends UIElement {
 
         let home = "";
         if (user.home !== undefined) {
-            home = "<img id='home' src='./assets/home.svg' alt='home' class='small-userbadge-icon'>";
+            home = "<img id='home' src='./assets/home.svg' alt='home' class='small-userbadge-icon'> ";
             const icon = L.icon({
                 iconUrl: 'assets/home.svg',
                 iconSize: [20, 20],
@@ -67,7 +67,14 @@ export class UserBadge extends UIElement {
             L.marker([user.home.lat, user.home.lon], {icon: icon}).addTo(this._basemap.map);
         }
 
-        return "<img id='profile-pic' src='" + user.img + "' alt='profile-pic'/> " +
+        const settings =
+            "<a href='https://www.openstreetmap.org/user/" + encodeURIComponent(user.name) + "/account' target='_blank'>" +
+            "<img class='small-userbadge-icon' src='./assets/gear.svg' alt='settings'>" +
+            "</a> ";
+
+        return "<a href='https://www.openstreetmap.org/user/" + encodeURIComponent(user.name) + "' target='_blank'>" +
+            "<img id='profile-pic' src='" + user.img + "' alt='profile-pic'/> " +
+            "</a>" +
             "<div id='usertext'>" +
             "<p id='username'>" +
             "<a href='https://www.openstreetmap.org/user/" + user.name + "' target='_blank'>" + user.name + "</a>" +
@@ -75,6 +82,7 @@ export class UserBadge extends UIElement {
             "</p> " +
             "<p id='userstats'>" +
             home +
+            settings +
             messageSpan +
             "<span id='csCount'> " +
             "   <a href='https://www.openstreetmap.org/user/" + user.name + "/history' target='_blank'><img class='small-userbadge-icon' src='./assets/star.svg' alt='star'/> " + user.csCount +

assets/gear.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill-rule="evenodd" d="M16 12a4 4 0 11-8 0 4 4 0 018 0zm-1.5 0a2.5 2.5 0 11-5 0 2.5 2.5 0 015 0z"/><path fill-rule="evenodd" d="M12 1c-.268 0-.534.01-.797.028-.763.055-1.345.617-1.512 1.304l-.352 1.45c-.02.078-.09.172-.225.22a8.45 8.45 0 00-.728.303c-.13.06-.246.044-.315.002l-1.274-.776c-.604-.368-1.412-.354-1.99.147-.403.348-.78.726-1.129 1.128-.5.579-.515 1.387-.147 1.99l.776 1.275c.042.069.059.185-.002.315-.112.237-.213.48-.302.728-.05.135-.143.206-.221.225l-1.45.352c-.687.167-1.249.749-1.304 1.512a11.149 11.149 0 000 1.594c.055.763.617 1.345 1.304 1.512l1.45.352c.078.02.172.09.22.225.09.248.191.491.303.729.06.129.044.245.002.314l-.776 1.274c-.368.604-.354 1.412.147 1.99.348.403.726.78 1.128 1.129.579.5 1.387.515 1.99.147l1.275-.776c.069-.042.185-.059.315.002.237.112.48.213.728.302.135.05.206.143.225.221l.352 1.45c.167.687.749 1.249 1.512 1.303a11.125 11.125 0 001.594 0c.763-.054 1.345-.616 1.512-1.303l.352-1.45c.02-.078.09-.172.225-.22.248-.09.491-.191.729-.303.129-.06.245-.044.314-.002l1.274.776c.604.368 1.412.354 1.99-.147.403-.348.78-.726 1.129-1.128.5-.579.515-1.387.147-1.99l-.776-1.275c-.042-.069-.059-.185.002-.315.112-.237.213-.48.302-.728.05-.135.143-.206.221-.225l1.45-.352c.687-.167 1.249-.749 1.303-1.512a11.125 11.125 0 000-1.594c-.054-.763-.616-1.345-1.303-1.512l-1.45-.352c-.078-.02-.172-.09-.22-.225a8.469 8.469 0 00-.303-.728c-.06-.13-.044-.246-.002-.315l.776-1.274c.368-.604.354-1.412-.147-1.99-.348-.403-.726-.78-1.128-1.129-.579-.5-1.387-.515-1.99-.147l-1.275.776c-.069.042-.185.059-.315-.002a8.465 8.465 0 00-.728-.302c-.135-.05-.206-.143-.225-.221l-.352-1.45c-.167-.687-.749-1.249-1.512-1.304A11.149 11.149 0 0012 1zm-.69 1.525a9.648 9.648 0 011.38 0c.055.004.135.05.162.16l.351 1.45c.153.628.626 1.08 1.173 1.278.205.074.405.157.6.249a1.832 1.832 0 001.733-.074l1.275-.776c.097-.06.186-.036.228 0 .348.302.674.628.976.976.036.042.06.13 0 .228l-.776 1.274a1.832 1.832 0 00-.074 1.734c.092.195.175.395.248.6.198.547.652 1.02 1.278 1.172l1.45.353c.111.026.157.106.161.161a9.653 9.653 0 010 1.38c-.004.055-.05.135-.16.162l-1.45.351a1.833 1.833 0 00-1.278 1.173 6.926 6.926 0 01-.25.6 1.832 1.832 0 00.075 1.733l.776 1.275c.06.097.036.186 0 .228a9.555 9.555 0 01-.976.976c-.042.036-.13.06-.228 0l-1.275-.776a1.832 1.832 0 00-1.733-.074 6.926 6.926 0 01-.6.248 1.833 1.833 0 00-1.172 1.278l-.353 1.45c-.026.111-.106.157-.161.161a9.653 9.653 0 01-1.38 0c-.055-.004-.135-.05-.162-.16l-.351-1.45a1.833 1.833 0 00-1.173-1.278 6.928 6.928 0 01-.6-.25 1.832 1.832 0 00-1.734.075l-1.274.776c-.097.06-.186.036-.228 0a9.56 9.56 0 01-.976-.976c-.036-.042-.06-.13 0-.228l.776-1.275a1.832 1.832 0 00.074-1.733 6.948 6.948 0 01-.249-.6 1.833 1.833 0 00-1.277-1.172l-1.45-.353c-.111-.026-.157-.106-.161-.161a9.648 9.648 0 010-1.38c.004-.055.05-.135.16-.162l1.45-.351a1.833 1.833 0 001.278-1.173 6.95 6.95 0 01.249-.6 1.832 1.832 0 00-.074-1.734l-.776-1.274c-.06-.097-.036-.186 0-.228.302-.348.628-.674.976-.976.042-.036.13-.06.228 0l1.274.776a1.832 1.832 0 001.734.074 6.95 6.95 0 01.6-.249 1.833 1.833 0 001.172-1.277l.353-1.45c.026-.111.106-.157.161-.161z"/></svg>

index.html

@@ -46,6 +46,8 @@
 
 <!-- 26 restylen infobox -->
 <!-- 27 restylen infobox, flow UI verbeteren, mobile, locate-me -->
+
+<!-- 28: user testing, fixing issues and faults, lots of small useless features, add button vs 2.0 --> 
 <script data-goatcounter="https://pietervdvn.goatcounter.com/count"
         async src="//gc.zgo.at/count.js"></script>
 

index.ts

@@ -25,10 +25,10 @@ let dryRun = false;
 if (location.hostname === "localhost" || location.hostname === "127.0.0.1") {
 
     // Set to true if testing and changes should NOT be saved
-    dryRun = true;
+   // dryRun = true;
     // If you have a testfile somewhere, enable this to spoof overpass
     // This should be hosted independantly, e.g. with `cd assets; webfsd -p 8080` + a CORS plugin to disable cors rules
-    Overpass.testUrl = "http://127.0.0.1:8080/test.json";
+   // Overpass.testUrl = "http://127.0.0.1:8080/test.json";
 }
 
 
@@ -143,6 +143,7 @@ new StrayClickHandler(bm, selectedElement, leftMessage, () => {
             bm.LastClickLocation,
             changes,
             selectedElement,
+            layerUpdater.runningQuery,
             addButtons);
     }
 );