ilja_space/MapComplete
1
0
Fork 0
forked from MapComplete/MapComplete
Code Pull requests Activity

First attempt to get the editor-layer-index working

Browse source
This commit is contained in:
Pieter Vander Vennet 2020-09-25 21:58:29 +02:00
parent e46ea51d44
commit 08175a747f
11 changed files with 268 additions and 74 deletions
Download patch file Download diff file Expand all files Collapse all files

17
InitUiElements.ts
View file

@ -8,7 +8,7 @@ import {UIElement} from "./UI/UIElement";
import {MoreScreen} from "./UI/MoreScreen";
import {FilteredLayer} from "./Logic/FilteredLayer";
import {FeatureInfoBox} from "./UI/FeatureInfoBox";
import {BaseLayers, Basemap} from "./Logic/Leaflet/Basemap";
import {Basemap} from "./Logic/Leaflet/Basemap";
import {State} from "./State";
import {WelcomeMessage} from "./UI/WelcomeMessage";
import {Img} from "./UI/Img";
@ -35,6 +35,7 @@ import {Layout} from "./Customizations/Layout";
import {LocalStorageSource} from "./Logic/Web/LocalStorageSource";
import {FromJSON} from "./Customizations/JSON/FromJSON";
import {Utils} from "./Utils";
import BackgroundSelector from "./UI/BackgroundSelector";
export class InitUiElements {
@ -352,14 +353,12 @@ export class InitUiElements {
}
private static GenerateLayerControlPanel() {
let baseLayerOptions = BaseLayers.baseLayers.map((layer) => {
return {value: layer, shown: layer.name}
});
let layerControlPanel = new Combine(
[new DropDown(Translations.t.general.backgroundMap, baseLayerOptions, State.state.bm.CurrentLayer)]);
let layerControlPanel: UIElement = new BackgroundSelector(State.state);
layerControlPanel.SetStyle("margin:1em");
layerControlPanel.onClick(() => {});
if (State.state.filteredLayers.data.length > 1) {
const layerSelection = new LayerSelection();
layerSelection.onClick(() => {});
layerControlPanel = new Combine([layerSelection, "<br/>",layerControlPanel]);
}
return layerControlPanel;
@ -444,8 +443,8 @@ export class InitUiElements {
);
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 }> =
/* 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) {
@ -457,7 +456,7 @@ export class InitUiElements {
return layerInfo.id
});
queryParamMapped.syncWith(bm.CurrentLayer);
queryParamMapped.syncWith(bm.CurrentLayer);*/
}

116
Logic/AvailableBaseLayers.ts Normal file
View file

@ -0,0 +1,116 @@
import * as editorlayerindex from "../assets/editor-layer-index.json"
import {UIEventSource} from "./UIEventSource";
import {GeoOperations} from "./GeoOperations";
import {State} from "../State";
import {Basemap} from "./Leaflet/Basemap";
/**
* Calculates which layers are available at the current location
*/
export default class AvailableBaseLayers {
public static layerOverview = AvailableBaseLayers.LoadRasterIndex();
public availableEditorLayers: UIEventSource<{ id: string, url: string, max_zoom: number, license_url: number, name: string, geometry: any, leafletLayer: any }[]>;
constructor(state: State) {
const self = this;
this.availableEditorLayers =
state.locationControl.map(
(currentLocation) => {
const currentLayers = self.availableEditorLayers?.data;
const newLayers = AvailableBaseLayers.AvailableLayersAt(currentLocation?.lon, currentLocation?.lat);
if (currentLayers === undefined) {
return newLayers;
}
if (newLayers.length !== currentLayers.length) {
return newLayers;
}
for (let i = 0; i < newLayers.length; i++) {
if (newLayers[i].name !== currentLayers[i].name) {
return newLayers;
}
}
return currentLocation;
});
}
public static AvailableLayersAt(lon: number, lat: number): { url: string, max_zoom: number, license_url: number, name: string, geometry: any }[] {
const availableLayers = []
const globalLayers = [];
for (const i in AvailableBaseLayers.layerOverview) {
const layer = AvailableBaseLayers.layerOverview[i];
if (layer.feature.geometry === null) {
globalLayers.push(layer);
continue;
}
if (lon === undefined || lat === undefined) {
continue;
}
if (GeoOperations.inside([lon, lat], layer.feature)) {
availableLayers.push(layer);
}
}
return availableLayers.concat(globalLayers);
}
private static LoadRasterIndex(): { id: string, url: string, max_zoom: number, license_url: number, name: string, feature: any }[] {
const layers: { id: string, url: string, max_zoom: number, license_url: number, name: string, feature: any, leafletLayer: any }[] = []
// @ts-ignore
const features = editorlayerindex.features;
for (const i in features) {
const layer = features[i];
const props = layer.properties;
if(props.id === "Bing"){
// Doesnt work
continue;
}
if (props.overlay) {
continue;
}
if(props.max_zoom < 19){
continue;
}
if (props.url.toLowerCase().indexOf("apikey") > 0) {
continue;
}
if (props.url.toLowerCase().indexOf("{bbox}") > 0) {
continue;
}
const leafletLayer = Basemap.CreateBackgroundLayer(
props.id,
props.name,
props.url,
props.name,
props.max_zoom,
props.type.toLowerCase() === "wms",
props.type.toLowerCase() === "wmts"
)
// 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,
name: props.name,
leafletLayer: leafletLayer
});
}
return layers;
}
}

3
Logic/GeoOperations.ts
View file

@ -36,7 +36,6 @@ export class GeoOperations {
return false;
}
if (feature.geometry.type === "Polygon" || feature.geometry.type === "MultiPolygon") {
const poly = feature;
@ -77,7 +76,7 @@ export class GeoOperations {
return false;
}
private static inside(pointCoordinate, feature): boolean {
public static inside(pointCoordinate, feature): boolean {
// ray-casting algorithm based on
// http://www.ecse.rpi.edu/Homepages/wrf/Research/Short_Notes/pnpoly.html

134
Logic/Leaflet/Basemap.ts
View file

@ -5,54 +5,46 @@ import {UIElement} from "../../UI/UIElement";
export class BaseLayers {
public static readonly defaultLayer: { name: string, layer: any, id: string } = {
id: "osm",
name: "Kaart van OpenStreetMap", layer: L.tileLayer("https://tile.openstreetmap.org/{z}/{x}/{y}.png",
{
attribution: '',
maxZoom: 19,
minZoom: 1
})
};
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
})
}
]
;
/*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
})
}
]
;*/
}
@ -60,26 +52,32 @@ export class BaseLayers {
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>",
22, false);
// @ts-ignore
public readonly map: Map;
public readonly Location: UIEventSource<{ zoom: number, lat: number, lon: number }>;
public readonly LastClickLocation: UIEventSource<{ lat: number, lon: number }> = new UIEventSource<{ lat: number, lon: number }>(undefined)
private _previousLayer: L.tileLayer = undefined;
private _previousLayer: L.tileLayer = undefined;
public readonly CurrentLayer: UIEventSource<{
id: string,
name: string,
layer: L.tileLayer
}> = new UIEventSource<L.tileLayer>(BaseLayers.defaultLayer);
}> = new UIEventSource<L.tileLayer>(Basemap.defaultLayer);
constructor(leafletElementId: string,
location: UIEventSource<{ zoom: number, lat: number, lon: number }>,
extraAttribution: UIElement) {
this._previousLayer = Basemap.defaultLayer.layer;
this.map = L.map(leafletElementId, {
center: [location.data.lat ?? 0, location.data.lon ?? 0],
zoom: location.data.zoom ?? 2,
layers: [BaseLayers.defaultLayer.layer],
layers: [this._previousLayer],
});
@ -118,9 +116,43 @@ export class Basemap {
this.map.on("contextmenu", function (e) {
self.LastClickLocation.setData({lat: e.latlng.lat, lon: e.latlng.lng});
console.log("Right click")
e.preventDefault();
});
}
public static CreateBackgroundLayer(id: string, name: string, url: string, attribution: string,
maxZoom: number, isWms: boolean, isWMTS?: boolean) {
url = url.replace("{zoom}", "{z}")
.replace("{switch:", "{")
.replace("{proj}", "EPSG:3857")
.replace("{width}", "256")
.replace("{height}", "256")
//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 {
id: id,
name: name,
layer: L.tileLayer.wms(url,
{
maxZoom: maxZoom ?? 19,
attribution: attribution + " | "
})
}
}
return {
id: id,
name: name,
layer: L.tileLayer(url,
{
attribution: attribution,
maxZoom: maxZoom,
minZoom: 1,
wmts: isWMTS ?? false
})
}
}
}

2
Logic/UIEventSource.ts
View file

@ -62,7 +62,7 @@ export class UIEventSource<T>{
newSource.setData(f(self.data));
}
this.addCallback(update);
this.addCallbackAndRun(update);
for (const extraSource of extraSources) {
extraSource?.addCallback(update);
}

50
UI/BackgroundSelector.ts Normal file
View file

@ -0,0 +1,50 @@
import {UIElement} from "./UIElement";
import AvailableBaseLayers from "../Logic/AvailableBaseLayers";
import {DropDown} from "./Input/DropDown";
import Translations from "./i18n/Translations";
import {State} from "../State";
import {UIEventSource} from "../Logic/UIEventSource";
export default class BackgroundSelector extends UIElement {
private _dropdown: UIElement;
private readonly state: State;
private readonly _availableLayers: UIEventSource<any>;
constructor(state: State) {
super();
this.state = state;
this._availableLayers = new AvailableBaseLayers(state).availableEditorLayers;
const self = this;
this._availableLayers.addCallbackAndRun(available => self.CreateDropDown(available));
}
private CreateDropDown(available) {
if(available.length === 0){
console.warn("NO AVAILABLE LAYERS")
}
console.log("ALL LAYERS", available)
const baseLayers: { value: any, 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];
if (layer.name === undefined) {
continue;
}
baseLayers.push({value: layer.leafletLayer, shown: layer.name});
}
const dropdown = new DropDown(Translations.t.general.backgroundMap, baseLayers, State.state.bm.CurrentLayer)
this._dropdown = dropdown;
}
InnerRender(): string {
return this._dropdown.Render();
}
}

2
UI/Input/TextField.ts
View file

@ -73,12 +73,10 @@ export class TextField extends InputElement<string> {
}
Update() {
console.log("Updating TF")
super.Update();
}
InnerUpdate() {
console.log("Inner Updating TF")
const field = document.getElementById("txt-" + this.id);
const self = this;
field.oninput = () => {

1
UI/LayerSelection.ts
View file

@ -1,7 +1,6 @@
import {UIElement} from "./UIElement";
import {CheckBox} from "./Input/CheckBox";
import Combine from "./Base/Combine";
import {Img} from "./Img";
import {State} from "../State";
import Translations from "./i18n/Translations";
import {FixedUiElement} from "./Base/FixedUiElement";

4
deploy.sh
View file

@ -1,5 +1,9 @@
#! /bin/bash
cd assets/
wget https://osmlab.github.io/editor-layer-index/imagery.geojson --output-document=editor-layer-index.json
cd ..
mkdir -p assets/generated
ts-node createLayouts.ts || { echo 'Creating layouts failed' ; exit 1; }
find -name '*.png' | parallel optipng '{}'

9
test.ts
View file

@ -1,8 +1,5 @@
import ValidatedTextField from "./UI/Input/ValidatedTextField";
import {VariableUiElement} from "./UI/Base/VariableUIElement";
import AvailableBaseLayers from "./Logic/AvailableBaseLayers";
const vtf= ValidatedTextField.KeyInput(true);
vtf.AttachTo('maindiv')
vtf.GetValue().addCallback(console.log)
new VariableUiElement(vtf.GetValue().map(n => ""+n)).AttachTo("extradiv")
const layers = AvailableBaseLayers.AvailableLayersAt(51.2,3.2);
console.log(layers);