Better typing of the basemap class

2020-09-27 22:48:43 +02:00 · 2020-09-27 22:48:43 +02:00 · 62cc392cfd
commit 62cc392cfd
parent e731640e5f
7 changed files with 108 additions and 75 deletions
--- 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<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"
+            }
+        ]

    }

--- a/Logic/BaseLayer.ts
+++ 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
+}
--- 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<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,
@ -57,8 +64,8 @@ export class Basemap {
            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;
+    }
 }
--- 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);
            })
        }

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

--- 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": {
--- 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",