From 62cc392cfd596eb318b24fbe5510704fdf203a52 Mon Sep 17 00:00:00 2001 From: Pieter Vander Vennet Date: Sun, 27 Sep 2020 22:48:43 +0200 Subject: [PATCH] Better typing of the basemap class --- Logic/AvailableBaseLayers.ts | 52 +++++++++++-------------- Logic/BaseLayer.ts | 12 ++++++ Logic/Leaflet/Basemap.ts | 74 ++++++++++++++++++------------------ State.ts | 2 +- UI/BackgroundSelector.ts | 3 +- package-lock.json | 38 ++++++++++++++---- package.json | 2 + 7 files changed, 108 insertions(+), 75 deletions(-) create mode 100644 Logic/BaseLayer.ts diff --git a/Logic/AvailableBaseLayers.ts b/Logic/AvailableBaseLayers.ts index 4285aa8..3c39635 100644 --- a/Logic/AvailableBaseLayers.ts +++ b/Logic/AvailableBaseLayers.ts @@ -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; 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 Stamen Design, under CC BY 3.0. Data by OpenStreetMap, under ODbL.", + attribution_url: undefined, // already in the attribution string + feature: null, + id: "toner", + layer:Basemap.ProvidedLayer("toner"), + max_zoom: 20, + min_zoom:1, + name: "Toner" + } + ] } diff --git a/Logic/BaseLayer.ts b/Logic/BaseLayer.ts new file mode 100644 index 0000000..5adac95 --- /dev/null +++ b/Logic/BaseLayer.ts @@ -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 +} \ No newline at end of file diff --git a/Logic/Leaflet/Basemap.ts b/Logic/Leaflet/Basemap.ts index 1a06dfc..1b7e878 100644 --- a/Logic/Leaflet/Basemap.ts +++ b/Logic/Leaflet/Basemap.ts @@ -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(Basemap.defaultLayer); + private _previousLayer: TileLayer = undefined; + public readonly CurrentLayer: UIEventSource = 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 = `${attribution}`; } - 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; + } } diff --git a/State.ts b/State.ts index 0c5d205..15ae1df 100644 --- a/State.ts +++ b/State.ts @@ -131,7 +131,7 @@ export class State { if (fl === undefined || isNaN(fl)) { return undefined; } - return ("" + fl).substr(0, 6); + return ("" + fl).substr(0, 8); }) } diff --git a/UI/BackgroundSelector.ts b/UI/BackgroundSelector.ts index 0d4ff55..da086a9 100644 --- a/UI/BackgroundSelector.ts +++ b/UI/BackgroundSelector.ts @@ -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 { diff --git a/package-lock.json b/package-lock.json index 0ffcd79..d0c6e33 100644 --- a/package-lock.json +++ b/package-lock.json @@ -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": { diff --git a/package.json b/package.json index de139dc..ef35fff 100644 --- a/package.json +++ b/package.json @@ -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",