More work on the editor-layer-index

Logic/AvailableBaseLayers.ts

@@ -9,8 +9,17 @@ import {Basemap} from "./Leaflet/Basemap";
  */
 export default class AvailableBaseLayers {
 
+    public static osmCarto =
+        {
+            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)
+        }
+
     public static layerOverview = AvailableBaseLayers.LoadRasterIndex();
-    public availableEditorLayers: UIEventSource<{ id: string, url: string, max_zoom: number, license_url: number, name: string, geometry: any, leafletLayer: any }[]>;
+    public availableEditorLayers: UIEventSource<{ id: string, url: string, max_zoom: number, license_url: string, name: string, geometry: any, leafletLayer: any }[]>;
 
     constructor(state: State) {
         const self = this;
@@ -37,8 +46,9 @@ export default class AvailableBaseLayers {
 
     }
 
-    public static AvailableLayersAt(lon: number, lat: number): { url: string, max_zoom: number, license_url: number, name: string, geometry: any }[] {
+    public static AvailableLayersAt(lon: number, lat: number):
-        const availableLayers = []
+        { url: string, max_zoom: number, license_url: string, name: string, geometry: any }[] {
+        const availableLayers = [AvailableBaseLayers.osmCarto as any]
         const globalLayers = [];
         for (const i in AvailableBaseLayers.layerOverview) {
             const layer = AvailableBaseLayers.layerOverview[i];
@@ -59,8 +69,8 @@ export default class AvailableBaseLayers {
         return availableLayers.concat(globalLayers);
     }
 
-    private static LoadRasterIndex(): { id: string, url: string, max_zoom: number, license_url: number, name: string, feature: any }[] {
+    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: number, name: string, feature: any, leafletLayer: any }[] = []
+        const layers: { id: string, url: string, max_zoom: number, license_url: string, name: string, feature: any, leafletLayer: any }[] = []
         // @ts-ignore
         const features = editorlayerindex.features;
         for (const i in features) {
@@ -87,6 +97,11 @@ export default class AvailableBaseLayers {
             if (props.url.toLowerCase().indexOf("{bbox}") > 0) {
                 continue;
             }
+            
+            if(props.name === undefined){
+                console.log("Editor layer index: name not defined on ", props)
+                continue
+            }
 
             const leafletLayer = Basemap.CreateBackgroundLayer(
                 props.id,

UI/BackgroundSelector.ts

@@ -4,6 +4,7 @@ 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 {
 
@@ -22,24 +23,19 @@ export default class BackgroundSelector extends UIElement {
 
     private CreateDropDown(available) {
         if(available.length === 0){
-            console.warn("NO AVAILABLE LAYERS")
+            console.warn("NO LAYERS FOUND!")
+            return;
         }
         
-        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)
+        console.log("Installed dropdown with ",baseLayers);
         this._dropdown = dropdown;
     }