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

Better typing of the basemap class

Browse source
This commit is contained in:
Pieter Vander Vennet 2020-09-27 22:48:43 +02:00
parent e731640e5f
commit 62cc392cfd
7 changed files with 108 additions and 75 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

52
Logic/AvailableBaseLayers.ts
View file

@ -4,38 +4,16 @@ 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
}
import {BaseLayer} from "./BaseLayer";
/**
* Calculates which layers are available at the current location
*/
export default class AvailableBaseLayers {
public static osmCarto: BaseLayer =
{
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", "https://openStreetMap.org/copyright",
19,
false, false),
feature: null,
max_zoom: 19,
min_zoom: 0
}
public static layerOverview = AvailableBaseLayers.LoadRasterIndex();
public static layerOverview = AvailableBaseLayers.LoadRasterIndex()//.concat(AvailableBaseLayers.LoadStamenIndex());
public availableEditorLayers: UIEventSource<BaseLayer[]>;
constructor(state: State) {
@ -82,19 +60,19 @@ export default class AvailableBaseLayers {
}
// 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);
layerControl.setData(Basemap.osmCarto);
});
const queryParam = QueryParameters.GetQueryParameter("background", State.state.layoutToUse.data.defaultBackground);
queryParam.addCallbackAndRun(selectedId => {
queryParam.addCallbackAndRun((selectedId:string) => {
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.setData(layer);
}
}
})
@ -106,7 +84,7 @@ export default class AvailableBaseLayers {
}
public static AvailableLayersAt(lon: number, lat: number): BaseLayer[] {
const availableLayers = [AvailableBaseLayers.osmCarto as any]
const availableLayers = [Basemap.osmCarto]
const globalLayers = [];
for (const i in AvailableBaseLayers.layerOverview) {
const layer = AvailableBaseLayers.layerOverview[i];
@ -187,6 +165,22 @@ export default class AvailableBaseLayers {
});
}
return layers;
}
private static LoadStamenIndex(): BaseLayer[]{
return [
{
attribution: "Map tiles by <a href=\"http://stamen.com\">Stamen Design</a>, under <a href=\"http://creativecommons.org/licenses/by/3.0\">CC BY 3.0</a>. Data by <a href=\"http://openstreetmap.org\">OpenStreetMap</a>, under <a href=\"http://www.openstreetmap.org/copyright\">ODbL</a>.",
attribution_url: undefined, // already in the attribution string
feature: null,
id: "toner",
layer:Basemap.ProvidedLayer("toner"),
max_zoom: 20,
min_zoom:1,
name: "Toner"
}
]
}

12
Logic/BaseLayer.ts Normal file
View file

@ -0,0 +1,12 @@
import {TileLayer} from "leaflet";
export interface BaseLayer {
id: string,
name: string,
attribution_url: string,
layer: TileLayer,
max_zoom: number,
min_zoom: number;
feature: any,
attribution?: string
}

74
Logic/Leaflet/Basemap.ts
View file

@ -1,34 +1,41 @@
import L from "leaflet"
import * as L from "leaflet"
import {TileLayer} from "leaflet"
import {UIEventSource} from "../UIEventSource";
import {UIElement} from "../../UI/UIElement";
import {BaseLayer} from "../BaseLayer";
// 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",
"OpenStreetMap (ODBL)", 'https://openstreetmap.org/copyright',
22, false);
public static osmCarto: BaseLayer =
{
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", "https://openStreetMap.org/copyright",
19,
false, false),
feature: null,
max_zoom: 19,
min_zoom: 0
}
// @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;
public readonly CurrentLayer: UIEventSource<{
id: string,
name: string,
layer: L.tileLayer
}> = new UIEventSource<L.tileLayer>(Basemap.defaultLayer);
private _previousLayer: TileLayer = undefined;
public readonly CurrentLayer: UIEventSource<BaseLayer> = new UIEventSource(Basemap.osmCarto);
constructor(leafletElementId: string,
location: UIEventSource<{ zoom: number, lat: number, lon: number }>,
extraAttribution: UIElement) {
this._previousLayer = Basemap.defaultLayer.layer;
this._previousLayer = Basemap.osmCarto.layer;
this.map = L.map(leafletElementId, {
center: [location.data.lat ?? 0, location.data.lon ?? 0],
zoom: location.data.zoom ?? 2,
@ -56,9 +63,9 @@ export class Basemap {
location.data.lon = self.map.getCenter().lng;
location.ping();
});
this.CurrentLayer.addCallback((layer:{layer: L.tileLayer}) => {
if(self._previousLayer !== undefined){
this.CurrentLayer.addCallback((layer: BaseLayer) => {
if (self._previousLayer !== undefined) {
self.map.removeLayer(self._previousLayer);
}
self._previousLayer = layer.layer;
@ -76,7 +83,7 @@ export class Basemap {
}
public static CreateBackgroundLayer(id: string, name: string, url: string, attribution: string, attributionUrl: string,
maxZoom: number, isWms: boolean, isWMTS?: boolean) {
maxZoom: number, isWms: boolean, isWMTS?: boolean): TileLayer {
url = url.replace("{zoom}", "{z}")
.replace("&BBOX={bbox}", "")
@ -120,31 +127,26 @@ export class Basemap {
}
return {
id: id,
name: name,
layer: L.tileLayer.wms(urlObj.protocol+"//"+urlObj.host+urlObj.pathname,
options
)
}
return 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,
layer: L.tileLayer(url,
{
attribution: attribution,
maxZoom: maxZoom,
minZoom: 1,
wmts: isWMTS ?? false,
subdomains: domains
})
}
return L.tileLayer(url,
{
attribution: attribution,
maxZoom: maxZoom,
minZoom: 1,
// @ts-ignore
wmts: isWMTS ?? false,
subdomains: domains
});
}
public static ProvidedLayer(name: string, options?: any): any {
// return new L.tileLayer.provider(name, options);
return undefined;
}
}

2
State.ts
View file

@ -131,7 +131,7 @@ export class State {
if (fl === undefined || isNaN(fl)) {
return undefined;
}
return ("" + fl).substr(0, 6);
return ("" + fl).substr(0, 8);
})
}

3
UI/BackgroundSelector.ts
View file

@ -1,9 +1,10 @@
import {UIElement} from "./UIElement";
import AvailableBaseLayers, {BaseLayer} from "../Logic/AvailableBaseLayers";
import AvailableBaseLayers from "../Logic/AvailableBaseLayers";
import {DropDown} from "./Input/DropDown";
import Translations from "./i18n/Translations";
import {State} from "../State";
import {UIEventSource} from "../Logic/UIEventSource";
import {BaseLayer} from "../Logic/BaseLayer";
export default class BackgroundSelector extends UIElement {

38
package-lock.json generated
View file

@ -1011,8 +1011,23 @@
"@types/geojson": {
"version": "1.0.6",
"resolved": "https://registry.npmjs.org/@types/geojson/-/geojson-1.0.6.tgz",
"integrity": "sha512-Xqg/lIZMrUd0VRmSRbCAewtwGZiAk3mEUDvV4op1tGl+LvyPcb/MIOSxTl9z+9+J+R4/vpjiCAT4xeKzH9ji1w==",
"optional": true
"integrity": "sha512-Xqg/lIZMrUd0VRmSRbCAewtwGZiAk3mEUDvV4op1tGl+LvyPcb/MIOSxTl9z+9+J+R4/vpjiCAT4xeKzH9ji1w=="
},
"@types/leaflet": {
"version": "1.5.17",
"resolved": "https://registry.npmjs.org/@types/leaflet/-/leaflet-1.5.17.tgz",
"integrity": "sha512-2XYq9k6kNjhNI7PaTz8Rdxcc8Vzwu97OaS9CtcrTxnTSxFUGwjlGjTDvhTLJU+JRSfZ4lBwGcl0SjZHALdVr6g==",
"requires": {
"@types/geojson": "*"
}
},
"@types/leaflet-providers": {
"version": "1.2.0",
"resolved": "https://registry.npmjs.org/@types/leaflet-providers/-/leaflet-providers-1.2.0.tgz",
"integrity": "sha512-xuIUo0rEtuKdKIWwtLH0mD+dgSy/CRspVPa0nI/SuPLS29H7q+GPO4Qluxzkk+u9qvMtTjxqkrJjtnsx96+aPQ==",
"requires": {
"@types/leaflet": "*"
}
},
"@types/node": {
"version": "7.10.11",
@ -4182,6 +4197,11 @@
"resolved": "https://registry.npmjs.org/leaflet/-/leaflet-1.7.1.tgz",
"integrity": "sha512-/xwPEBidtg69Q3HlqPdU3DnrXQOvQU/CCHA1tcDQVzOwm91YMYaILjNp7L4Eaw5Z4sOYdbBz6koWyibppd8Zqw=="
},
"leaflet-providers": {
"version": "1.10.2",
"resolved": "https://registry.npmjs.org/leaflet-providers/-/leaflet-providers-1.10.2.tgz",
"integrity": "sha512-1l867LObxwuFBeyPeBewip8PAXKOnvEoujq4/9y2TKTiZNHH76ksBD6dfktGjgUrOF+IdjsGHkpASPE+v2DQLw=="
},
"leven": {
"version": "3.1.0",
"resolved": "https://registry.npmjs.org/leven/-/leven-3.1.0.tgz",
@ -4635,12 +4655,6 @@
"resolved": "https://registry.npmjs.org/node-addon-api/-/node-addon-api-1.7.1.tgz",
"integrity": "sha512-2+DuKodWvwRTrCfKOeR24KIc5unKjOh8mz17NCzVnHWfjAdDqbfbjqh7gUT+BkXBRQM52+xCHciKWonJ3CbJMQ=="
},
"node-forge": {
"version": "0.10.0",
"resolved": "https://registry.npmjs.org/node-forge/-/node-forge-0.10.0.tgz",
"integrity": "sha512-PPmu8eEeG9saEUvI97fm4OYxXVB6bFvyNTyiUOBichBpFG8A1Ljw3bY62+5oOjDEMHRnd0Y7HQ+x7uzxOzC6JA==",
"dev": true
},
"node-libs-browser": {
"version": "2.2.1",
"resolved": "https://registry.npmjs.org/node-libs-browser/-/node-libs-browser-2.2.1.tgz",
@ -5219,6 +5233,7 @@
"json5": "^1.0.1",
"micromatch": "^3.0.4",
"mkdirp": "^0.5.1",
"node-forge": "^0.7.1",
"node-libs-browser": "^2.0.0",
"opn": "^5.1.0",
"postcss": "^7.0.11",
@ -5234,6 +5249,13 @@
"terser": "^3.7.3",
"v8-compile-cache": "^2.0.0",
"ws": "^5.1.1"
},
"dependencies": {
"node-forge": {
"version": "0.7.6",
"resolved": "https://registry.npmjs.org/node-forge/-/node-forge-0.7.6.tgz",
"integrity": "sha512-sol30LUpz1jQFBjOKwbjxijiE3b6pjd74YwfD0fJOKPjF+fONKb2Yg8rYgS6+bK6VDl+/wfr4IYpC7jDzLUIfw=="
}
}
},
"parcel-plugin-static-files-copy": {

2
package.json
View file

@ -25,10 +25,12 @@
"author": "pietervdvn",
"license": "MIT",
"dependencies": {
"@types/leaflet-providers": "^1.2.0",
"codegrid-js": "git://github.com/hlaw/codegrid-js.git",
"email-validator": "^2.0.4",
"jquery": "latest",
"leaflet": "^1.7.1",
"leaflet-providers": "^1.10.2",
"libphonenumber": "0.0.10",
"libphonenumber-js": "^1.7.55",
"osm-auth": "^1.0.2",