Fix WMS layers of the layer editor index

This commit is contained in:
Pieter Vander Vennet 2020-09-27 18:45:37 +02:00
parent 3d4c6f2207
commit 6509358f84
9 changed files with 79 additions and 341795 deletions

View file

@ -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) {
console.warn("Editor layer index: needs bbox ", props)
if(props.max_zoom < 19){
// 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"

View file

@ -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("{width}", "256")
.replace("{height}", "256")
.replace("&BBOX={bbox}", "")
.replace("&bbox={bbox}", "");
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,
{
maxZoom: maxZoom ?? 19,
attribution: attribution + " | ",
subdomains: domains
})
layer: L.tileLayer.wms(urlObj.protocol+"//"+urlObj.host+urlObj.pathname,
options
)
}
}
if (attributionUrl) {
attribution = `<a href='${attributionUrl}' target='_blank'>${attribution}</a>`;
}
return {
id: id,
name: name,

View file

@ -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

View file

@ -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 = {

View file

@ -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)
}

File diff suppressed because one or more lines are too long

View file

@ -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"
}
}
]
}

View file

@ -1,5 +1,5 @@
import AvailableBaseLayers from "./Logic/AvailableBaseLayers";
import {Basemap} from "./Logic/Leaflet/Basemap";
const layers = AvailableBaseLayers.AvailableLayersAt(51.2,3.2);
console.log(layers);
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 leafletLayer = Basemap.CreateBackgroundLayer("aiv", "AIV", input, "Attr", "http://osm.org", 22, true, false);
console.log(leafletLayer)

View file

@ -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)
}
]
],
]);