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

Fix editor layer index

Browse source
This commit is contained in:
Pieter Vander Vennet 2020-09-27 01:38:51 +02:00
parent 620a1f8df2
commit 3d4c6f2207
5 changed files with 106 additions and 52 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

19
InitUiElements.ts
View file

@ -436,27 +436,14 @@ export class InitUiElements {
editWithJosm =
`<a href='${josmLink}' target='_blank'><img src='./assets/josm_logo.svg' alt='edit here' class='small-userbadge-icon'></a>`
}
return new Combine([mapComplete, reportBug, " | ", stats, " | ",editHere, editWithJosm]).Render();
return new Combine([mapComplete, reportBug, " | ", stats, " | ", editHere, editWithJosm]).Render();
}, [State.state.osmConnection.userDetails])
)
)
);
State.state.bm = bm;
State.state.layerUpdater = new LayerUpdater(State.state);
/* const queryParam = QueryParameters.GetQueryParameter("background", State.state.layoutToUse.data.defaultBackground);
const queryParamMapped: UIEventSource<{ id: string, name: string, layer: any }> =
queryParam.map<{ id: string, name: string, layer: any }>((id) => {
for (const layer of BaseLayers.baseLayers) {
if (layer.id === id) {
return layer;
}
}
return undefined;
}, [], (layerInfo) => {
return layerInfo.id
});
queryParamMapped.syncWith(bm.CurrentLayer);*/
}

106
Logic/AvailableBaseLayers.ts
View file

@ -3,23 +3,38 @@ import {UIEventSource} from "./UIEventSource";
import {GeoOperations} from "./GeoOperations";
import {State} from "../State";
import {Basemap} from "./Leaflet/Basemap";
import {QueryParameters} from "./Web/QueryParameters";
export interface BaseLayer {
id: string,
name: string,
attribution_url: string,
layer: any,
max_zoom: number,
min_zoom: number;
feature: any
}
/**
* Calculates which layers are available at the current location
*/
export default class AvailableBaseLayers {
public static osmCarto =
public static osmCarto: BaseLayer =
{
id: "osm", url: "https://tile.openstreetmap.org/{z}/{x}/{y}.png",
max_zoom: 19, license_url: "https://openStreetMap.org/copyright",
name: "OpenStreetMap", geometry: null,
leafletLayer: Basemap.CreateBackgroundLayer("osm", "OpenStreetMap",
"https://tile.openstreetmap.org/{z}/{x}/{y}.png", "OpenStreetMap", 19, false, false)
id: "osm",
//max_zoom: 19,
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),
feature: null,
max_zoom: 19,
min_zoom: 0
}
public static layerOverview = AvailableBaseLayers.LoadRasterIndex();
public availableEditorLayers: UIEventSource<{ id: string, url: string, max_zoom: number, license_url: string, name: string, geometry: any, leafletLayer: any }[]>;
public availableEditorLayers: UIEventSource<BaseLayer[]>;
constructor(state: State) {
const self = this;
@ -41,13 +56,54 @@ export default class AvailableBaseLayers {
}
}
return currentLocation;
return currentLayers;
});
this.availableEditorLayers.addCallbackAndRun(availableLayers => {
const layerControl = (state.bm as Basemap).CurrentLayer;
const currentLayer = layerControl.data.id;
for (const availableLayer of availableLayers) {
if (availableLayer.id === currentLayer) {
if (availableLayer.max_zoom < state.locationControl.data.zoom) {
break;
}
if (availableLayer.min_zoom > state.locationControl.data.zoom) {
break;
}
return; // All good!
}
}
// Oops, we panned out of range for this layer!
console.log("AvailableBaseLayers-actor: detected that the current bounds aren't sufficient anymore - reverting to OSM standard")
layerControl.setData(AvailableBaseLayers.osmCarto.layer);
});
const queryParam = QueryParameters.GetQueryParameter("background", State.state.layoutToUse.data.defaultBackground);
queryParam.addCallbackAndRun(selectedId => {
console.log("Selected layer is ", selectedId)
const available = self.availableEditorLayers.data;
for (const layer of available) {
if (layer.id === selectedId) {
state.bm.CurrentLayer.setData(layer.layer);
}
}
})
state.bm.CurrentLayer.addCallbackAndRun(currentLayer => {
queryParam.setData(currentLayer.id);
});
}
public static AvailableLayersAt(lon: number, lat: number):
{ url: string, max_zoom: number, license_url: string, name: string, geometry: any }[] {
public static AvailableLayersAt(lon: number, lat: number): BaseLayer[] {
const availableLayers = [AvailableBaseLayers.osmCarto as any]
const globalLayers = [];
for (const i in AvailableBaseLayers.layerOverview) {
@ -69,24 +125,27 @@ export default class AvailableBaseLayers {
return availableLayers.concat(globalLayers);
}
private static LoadRasterIndex(): { id: string, url: string, max_zoom: number, license_url: string, name: string, feature: any }[] {
const layers: { id: string, url: string, max_zoom: number, license_url: string, name: string, feature: any, leafletLayer: any }[] = []
private static LoadRasterIndex(): BaseLayer[] {
const layers: BaseLayer[] = []
// @ts-ignore
const features = editorlayerindex.features;
for (const i in features) {
const layer = features[i];
const props = layer.properties;
if(props.id === "Bing"){
if (props.id === "Bing") {
// Doesnt work
continue;
}
if (props.overlay) {
if (props.id === "carto") {
// Already added by default
continue;
}
if(props.max_zoom < 19){
if (props.overlay) {
console.log("Refusing overlay layer ", props.name)
continue;
}
@ -95,11 +154,12 @@ export default class AvailableBaseLayers {
}
if (props.url.toLowerCase().indexOf("{bbox}") > 0) {
console.warn("Editor layer index: needs bbox ", props)
continue;
}
if(props.name === undefined){
console.log("Editor layer index: name not defined on ", props)
console.warn("Editor layer index: name not defined on ", props)
continue
}
@ -116,12 +176,12 @@ export default class AvailableBaseLayers {
// Note: if layer.geometry is null, there is global coverage for this layer
layers.push({
id: props.id,
feature: layer,
url: props.url,
max_zoom: props.max_zoom,
license_url: props.license_url,
max_zoom: props.max_zoom ?? 25,
min_zoom: props.min_zoom ?? 1,
attribution_url: props.license_url,
name: props.name,
leafletLayer: leafletLayer
layer: leafletLayer,
feature: layer
});
}
return layers;

16
Logic/Leaflet/Basemap.ts
View file

@ -124,11 +124,19 @@ export class Basemap {
maxZoom: number, isWms: boolean, isWMTS?: boolean) {
url = url.replace("{zoom}", "{z}")
.replace("{switch:", "{")
.replace("{proj}", "EPSG:3857")
.replace("{width}", "256")
.replace("{height}", "256")
const subdomainsMatch = url.match(/{switch:[^}]*}/)
let domains : string[] = [];
if (subdomainsMatch !== null) {
let domainsStr = subdomainsMatch[0].substr("{switch:".length);
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) {
return {
@ -137,7 +145,8 @@ export class Basemap {
layer: L.tileLayer.wms(url,
{
maxZoom: maxZoom ?? 19,
attribution: attribution + " | "
attribution: attribution + " | ",
subdomains: domains
})
}
}
@ -150,7 +159,8 @@ export class Basemap {
attribution: attribution,
maxZoom: maxZoom,
minZoom: 1,
wmts: isWMTS ?? false
wmts: isWMTS ?? false,
subdomains: domains
})
}
}

15
UI/BackgroundSelector.ts
View file

@ -1,10 +1,9 @@
import {UIElement} from "./UIElement";
import AvailableBaseLayers from "../Logic/AvailableBaseLayers";
import AvailableBaseLayers, {BaseLayer} from "../Logic/AvailableBaseLayers";
import {DropDown} from "./Input/DropDown";
import Translations from "./i18n/Translations";
import {State} from "../State";
import {UIEventSource} from "../Logic/UIEventSource";
import Combine from "./Base/Combine";
export default class BackgroundSelector extends UIElement {
@ -23,20 +22,16 @@ export default class BackgroundSelector extends UIElement {
private CreateDropDown(available) {
if(available.length === 0){
console.warn("NO LAYERS FOUND!")
return;
}
const baseLayers: { value: any, shown: string }[] = [];
const baseLayers: { value: BaseLayer, shown: string }[] = [];
for (const i in available) {
const layer: { url: string, max_zoom: number, license_url: number, name: string, geometry: any, leafletLayer: any } = available[i];
baseLayers.push({value: layer.leafletLayer, shown: layer.name});
const layer: BaseLayer = available[i];
baseLayers.push({value: layer.layer, shown: layer.name ?? "id:" + layer.id});
}
const dropdown = new DropDown(Translations.t.general.backgroundMap, baseLayers, State.state.bm.CurrentLayer)
console.log("Installed dropdown with ",baseLayers);
this._dropdown = dropdown;
this._dropdown = new DropDown(Translations.t.general.backgroundMap, baseLayers, State.state.bm.CurrentLayer);
}
InnerRender(): string {

2
clean.sh
View file

@ -24,3 +24,5 @@ for f in ./*.html; do
rm $f
fi
done
rm -rf .cache