Fix WMS layers of the layer editor index

Logic/AvailableBaseLayers.ts

@@ -27,7 +27,9 @@ export default class AvailableBaseLayers {
             attribution_url: "https://openStreetMap.org/copyright",
             name: "OpenStreetMap",
             layer: Basemap.CreateBackgroundLayer("osm", "OpenStreetMap",
-                "https://tile.openstreetmap.org/{z}/{x}/{y}.png", "OpenStreetMap", 19, false, false),
+                "https://tile.openstreetmap.org/{z}/{x}/{y}.png", "OpenStreetMap",  "https://openStreetMap.org/copyright",
+                19, 
+                false, false),
             feature: null,
             max_zoom: 19,
             min_zoom: 0
@@ -138,14 +140,12 @@ export default class AvailableBaseLayers {
                 continue;
             }
 
-            if (props.id === "carto") {
+            if (props.id === "MAPNIK") {
                 // Already added by default
                 continue;
             }
 
             if (props.overlay) {
-                console.log("Refusing overlay layer ", props.name)
-
                 continue;
             }
 
@@ -153,8 +153,9 @@ export default class AvailableBaseLayers {
                 continue;
             }
             
-            if (props.url.toLowerCase().indexOf("{bbox}") > 0) {
+            if(props.max_zoom < 19){
-                console.warn("Editor layer index: needs bbox ", props)
+                // We want users to zoom to level 19 when adding a point
+                // If they are on a layer which hasn't enough precision, they can not zoom far enough. This is confusing, so we don't use this layer
                 continue;
             }
 
@@ -168,6 +169,7 @@ export default class AvailableBaseLayers {
                 props.name,
                 props.url,
                 props.name,
+                props.license_url,
                 props.max_zoom,
                 props.type.toLowerCase() === "wms",
                 props.type.toLowerCase() === "wmts"

Logic/Leaflet/Basemap.ts

@@ -3,58 +3,13 @@ import {UIEventSource} from "../UIEventSource";
 import {UIElement} from "../../UI/UIElement";
 
 
-export class BaseLayers {
-
-
-    /*public static readonly baseLayers: { name: string, layer: any, id: string } [] = [
- 
-         {
-             id: "aiv-latest",
-             name: "Luchtfoto Vlaanderen (recentste door AIV)",
-             layer: 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: 'Luchtfoto\'s van © AIV Vlaanderen (Laatste)  © AGIV',
-                     maxZoom: 22,
-                     minZoom: 1,
-                     wmts: true
-                 })
-         },
-         BaseLayers.defaultLayer,
-         {
-             id: "aiv-13-15",
-             name: "Luchtfoto Vlaanderen (2013-2015, door AIV)",
-             layer: L.tileLayer.wms('https://geoservices.informatievlaanderen.be/raadpleegdiensten/OGW/wms?s',
-                 {
-                     maxZoom: 22,
-                     layers: "OGWRGB13_15VL",
-                     attribution: "Luchtfoto's van © AIV Vlaanderen (2013-2015) | "
-                 })
-         },
-         {
-             id:"grb",
-             name: "Kaart Grootschalig ReferentieBestand Vlaanderen (GRB) door AIV",
-             layer: 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: 'Achtergrond <i>Grootschalig ReferentieBestand</i>(GRB) © AGIV',
-                     maxZoom: 22,
-                     minZoom: 1,
-                     wmts: true
-                 })
-         }
-     ]
-     ;*/
-
-}
-
 // Contains all setup and baselayers for Leaflet stuff
 export class Basemap {
 
 
     public static readonly defaultLayer: { name: string, layer: any, id: string } =
         Basemap.CreateBackgroundLayer("osm", "OpenStreetMap", "https://tile.openstreetmap.org/{z}/{x}/{y}.png",
-            "<a href='https://openstreetmap.org/copyright' target='_blank'>OpenStreetMap (ODBL)</a>",
+            "OpenStreetMap (ODBL)", 'https://openstreetmap.org/copyright',
             22, false);
 
     // @ts-ignore
@@ -120,37 +75,64 @@ export class Basemap {
         });
     }
 
-    public static CreateBackgroundLayer(id: string, name: string, url: string, attribution: string,
+    public static CreateBackgroundLayer(id: string, name: string, url: string, attribution: string, attributionUrl: string,
                                         maxZoom: number, isWms: boolean, isWMTS?: boolean) {
 
         url = url.replace("{zoom}", "{z}")
-            .replace("{proj}", "EPSG:3857")
+            .replace("&BBOX={bbox}", "")
-            .replace("{width}", "256")
+            .replace("&bbox={bbox}", "");
-            .replace("{height}", "256")
 
         const subdomainsMatch = url.match(/{switch:[^}]*}/)
-        let domains  : string[] = [];
+        let domains: string[] = [];
         if (subdomainsMatch !== null) {
             let domainsStr = subdomainsMatch[0].substr("{switch:".length);
-            domainsStr = domainsStr.substr(0, domainsStr.length-1);
+            domainsStr = domainsStr.substr(0, domainsStr.length - 1);
             domains = domainsStr.split(",");
             url = url.replace(/{switch:[^}]*}/, "{s}")
         }
 
-        //geoservices.informatievlaanderen.be/raadpleegdiensten/dhmv/wms?FORMAT=image/jpeg&VERSION=1.1.1&SERVICE=WMS&REQUEST=GetMap&LAYERS=DHMV_II_SVF_25cm&STYLES=&SRS=EPSG:3857&WIDTH=256&HEIGHT=256
+
         if (isWms) {
+            url = url.replace("&SRS={proj}","");
+            url = url.replace("&srs={proj}","");
+            const paramaters = ["format", "layers", "version", "service", "request", "styles", "transparent", "version"];
+            const urlObj = new URL(url);
+
+            const isUpper = urlObj.searchParams["LAYERS"] !== null;
+            const options = {
+                maxZoom: maxZoom ?? 19,
+                attribution: attribution + " | ",
+                subdomains: domains,
+                uppercase: isUpper,
+                transparent: false
+            };
+
+            for (const paramater of paramaters) {
+                let p = paramater;
+                if (isUpper) {
+                    p = paramater.toUpperCase();
+                }
+                options[paramater] = urlObj.searchParams.get(p);
+            }
+            
+            if(options.transparent === null){
+                options.transparent = false;
+            }
+
+
             return {
                 id: id,
                 name: name,
-                layer: L.tileLayer.wms(url,
+                layer: L.tileLayer.wms(urlObj.protocol+"//"+urlObj.host+urlObj.pathname,
-                    {
+                    options
-                        maxZoom: maxZoom ?? 19,
+                )
-                        attribution: attribution + " | ",
-                        subdomains: domains
-                    })
             }
         }
 
+        if (attributionUrl) {
+            attribution = `<a href='${attributionUrl}' target='_blank'>${attribution}</a>`;
+        }
+
         return {
             id: id,
             name: name,

README.md

@@ -156,6 +156,9 @@ TODO: erase cookies of third party websites and API's
 # Attributions
 
 Data from OpenStreetMap
+
+Background layer selection: curated by https://github.com/osmlab/editor-layer-index
+
 Images from Wikipedia/Wikimedia
 
 https://commons.wikimedia.org/wiki/File:Camera_font_awesome.svg

State.ts

@@ -22,7 +22,7 @@ export class State {
     // The singleton of the global state
     public static state: State;
     
-    public static vNumber = "0.0.8g";
+    public static vNumber = "0.0.8h";
     
     // The user journey states thresholds when a new feature gets unlocked
     public static userJourney = {

UI/Input/ValidatedTextField.ts

@@ -121,7 +121,7 @@ export default class ValidatedTextField {
                     const blacklistedTrackingParams = [
                         "fbclid",// Oh god, how I hate the fbclid. Let it burn, burn in hell!
                         "gclid",
-                        "cmpid", "agid", "utm", "utm_source"]
+                        "cmpid", "agid", "utm", "utm_source","utm_medium"]
                     for (const dontLike of blacklistedTrackingParams) {
                         url.searchParams.delete(dontLike)
                     }

assets/layers/ghost_bike/ghost_bike.json

@@ -80,12 +80,12 @@
       "question": {
         "en": "On what webpage can one find more information about the Ghost bike or the accident?",
         "nl": "Op welke website kan men meer informatie vinden over de Witte fiets of over het ongeval?",
-        "de": ""
+        "de": "Auf welcher Webseite kann man mehr Informationen über das Geisterrad oder den Unfall finden?"
       },
       "render": {
         "en": "<a href='{source}' target='_blank'>More information is available</a>",
         "nl": "<a href='{source}' target='_blank'>Meer informatie</a>",
-        "de": "Auf welcher Webseite kann man mehr Informationen über das Geisterrad oder den Unfall finden?"
+        "de": "<a href='{source}' target='_blank'>Mehr Informationen</a>"
       },
       "freeform": {
         "type": "url",
@@ -106,6 +106,20 @@
       "freeform": {
         "key": "inscription"
       }
+    },
+    {
+      "question": {
+        "nl": "Wanneer werd deze witte fiets geplaatst?",
+        "en": "When was this Ghost bike installed?"
+      },
+      "render": {
+        "nl": "Geplaatst op {start_date}",
+        "en": "Placed on {start_date}"
+      },
+      "freeform": {
+        "key": "start_date",
+        "type": "date"
+      }
     }
   ]
 }

test.ts

@@ -1,5 +1,5 @@
-import AvailableBaseLayers from "./Logic/AvailableBaseLayers";
+import {Basemap} from "./Logic/Leaflet/Basemap";
 
-
+const input = "https://geoservices.informatievlaanderen.be/raadpleegdiensten/OGW/wms?FORMAT=image/jpeg&VERSION=1.1.1&SERVICE=WMS&REQUEST=GetMap&LAYERS=OGWRGB13_15VL&STYLES=&SRS={proj}&WIDTH={width}&HEIGHT={height}&BBOX={bbox}";
-const layers = AvailableBaseLayers.AvailableLayersAt(51.2,3.2);
+const leafletLayer = Basemap.CreateBackgroundLayer("aiv", "AIV", input, "Attr", "http://osm.org", 22, true, false);
-console.log(layers);
+console.log(leafletLayer)

test/Tag.spec.ts

@@ -12,6 +12,7 @@ import Translations from "../UI/i18n/Translations";
 import {TagRenderingOptions} from "../Customizations/TagRenderingOptions";
 import {UIEventSource} from "../Logic/UIEventSource";
 import {TagRendering} from "../UI/TagRendering";
+import {Basemap} from "../Logic/Leaflet/Basemap";
 
 
 new T([
@@ -120,7 +121,5 @@ new T([
             equal(true, rendered.indexOf("Niet toegankelijk") > 0)
 
         }
-    ]
+    ],
-    
-    
 ]);