Feature: add more vector layers from maptiler; add some fixes to theme setting handler

assets/layers/usersettings/usersettings.json

@@ -24,7 +24,7 @@
     "_mastodon_candidate_a=(feat => {const e = document.createElement('div');e.innerHTML = feat.properties._d;return Array.from(e.getElementsByTagName(\"a\")).filter(a => a.href.match(/mastodon|en.osm.town/) !== null)[0]?.href   }) (feat) ",
     "_mastodon_link=(feat => {const e = document.createElement('div');e.innerHTML = feat.properties._d;return Array.from(e.getElementsByTagName(\"a\")).filter(a => a.getAttribute(\"rel\")?.indexOf('me') >= 0)[0]?.href})(feat) ",
     "_mastodon_candidate=feat.properties._mastodon_candidate_md ?? feat.properties._mastodon_candidate_a",
-    "__current_background='some value to let the validation run through'"
+    "__current_background='initial_value'"
   ],
   "tagRenderings": [
     {
@@ -104,11 +104,25 @@
         "*": "{logout()}"
       }
     },
+    {
+      "id": "background-layer-readonly",
+      "condition": {
+        "and": [
+          "_theme:backgroundLayer~*",
+          "mapcomplete-preferred-background-layer~*",
+          "_theme:backgroundLayer!:={mapcomplete-preferred-background-layer}"
+        ]
+      },
+      "render": {
+        "en": "This thematic map has a predefined background layer set. Your default theme setting does not apply"
+      }
+    },
     {
       "id": "background-layer",
       "question": {
         "en": "What background layer should be shown by default?"
       },
+      "condition": "_theme:backgroundLayer=",
       "mappings": [
         {
           "if": "mapcomplete-preferred-background-layer=",
@@ -140,7 +154,11 @@
             "en": "Use the current background layer (<span class='code'>{__current_background}</span>) as default background"
           },
           "hideInAnswer": {
-            "or": ["__current_background=","__current_background=osm"]
+            "or": [
+              "__current_background=",
+              "__current_background=osm",
+              "__current_background=initial_value"
+            ]
           }
         },
         {

assets/themes/blind_osm/blind_osm.json

@@ -31,7 +31,7 @@
   "startLat": 52.99238,
   "startLon": 6.570614,
   "startZoom": 20,
-  "defaultBackgroundId": "CartoDB.Positron",
+  "defaultBackgroundId": "maptiler.backdrop",
   "layers": [
     {
       "builtin": "cycleways_and_roads",

assets/themes/cycle_highways/cycle_highways.json

@@ -265,6 +265,6 @@
       ]
     }
   ],
-  "defaultBackgroundId": "CartoDB.Positron",
+  "defaultBackgroundId": "maptiler.backdrop",
   "credits": "L'imaginaire"
 }

assets/themes/ghostbikes/ghostbikes.json

@@ -44,7 +44,7 @@
   "layers": [
     "ghost_bike"
   ],
-  "defaultBackgroundId": "CartoDB.Positron",
+  "defaultBackgroundId": "maptiler.backdrop",
   "clustering": {
     "maxZoom": 0
   }

assets/themes/maps/maps.json

@@ -47,7 +47,7 @@
   "startLon": 0,
   "startZoom": 1,
   "widenFactor": 5,
-  "defaultBackgroundId": "CartoDB.Positron",
+  "defaultBackgroundId": "maptiler.backdrop",
   "layers": [
     "map"
   ]

assets/themes/speelplekken/speelplekken.json

@@ -27,7 +27,7 @@
   "startZoom": 12,
   "widenFactor": 1.2,
   "socialImage": "./assets/themes/speelplekken/social_image.jpg",
-  "defaultBackgroundId": "CartoDB.Positron",
+  "defaultBackgroundId": "maptiler.backdrop",
   "layers": [
     {
       "id": "shadow",

assets/themes/stations/stations.json

@@ -27,7 +27,7 @@
   "startLon": 0,
   "startZoom": 0,
   "hideFromOverview": true,
-  "defaultBackgroundId": "CartoDB.Positron",
+  "defaultBackgroundId": "maptiler.backdrop",
   "layers": [
     {
       "builtin": "indoors",

assets/themes/surveillance/surveillance.json

@@ -54,7 +54,7 @@
   "startLon": 0,
   "startZoom": 1,
   "widenFactor": 2,
-  "defaultBackgroundId": "osm",
+  "defaultBackgroundId": "maptiler.carto",
   "layers": [
     "surveillance_camera"
   ]

src/Logic/State/UserRelatedState.ts

@@ -43,6 +43,7 @@ export default class UserRelatedState {
     public readonly homeLocation: FeatureSource
     public readonly language: UIEventSource<string>
     public readonly preferredBackgroundLayer: UIEventSource<string | "photo" | "map" | "osmbasedmap" | undefined>
+    public readonly preferredBackgroundLayerForTheme: UIEventSource<string | "photo" | "map" | "osmbasedmap" | undefined>
     /**
      * The number of seconds that the GPS-locations are stored in memory.
      * Time in seconds
@@ -258,6 +259,7 @@ export default class UserRelatedState {
     ): UIEventSource<Record<string, string>> {
         const amendedPrefs = new UIEventSource<Record<string, string>>({
             _theme: layout?.id,
+            "_theme:backgroundLayer": layout?.defaultBackgroundId,
             _backend: this.osmConnection.Backend(),
             _applicationOpened: new Date().toISOString(),
             _supports_sharing:

src/Logic/State/UserSettingsMetaTagging.ts

@@ -9,6 +9,6 @@ export class ThemeMetaTagging {
       Utils.AddLazyProperty(feat.properties, '_mastodon_candidate_a', () => (feat => {const e = document.createElement('div');e.innerHTML = feat.properties._d;return Array.from(e.getElementsByTagName("a")).filter(a => a.href.match(/mastodon|en.osm.town/) !== null)[0]?.href   }) (feat)  ) 
       Utils.AddLazyProperty(feat.properties, '_mastodon_link', () => (feat => {const e = document.createElement('div');e.innerHTML = feat.properties._d;return Array.from(e.getElementsByTagName("a")).filter(a => a.getAttribute("rel")?.indexOf('me') >= 0)[0]?.href})(feat)  ) 
       Utils.AddLazyProperty(feat.properties, '_mastodon_candidate', () => feat.properties._mastodon_candidate_md ?? feat.properties._mastodon_candidate_a ) 
-      Utils.AddLazyProperty(feat.properties, '__backgroundLayerId', () => 'some value to let the validation run through' ) 
+      Utils.AddLazyProperty(feat.properties, '__current_background', () => 'initial_value' ) 
    }
 }

src/Models/RasterLayers.ts

@@ -1,43 +1,43 @@
-import { Feature, Polygon } from "geojson"
+import { Feature, Polygon } from "geojson";
-import * as editorlayerindex from "../assets/editor-layer-index.json"
+import * as editorlayerindex from "../assets/editor-layer-index.json";
-import * as globallayers from "../assets/global-raster-layers.json"
+import * as globallayers from "../assets/global-raster-layers.json";
-import { BBox } from "../Logic/BBox"
+import { BBox } from "../Logic/BBox";
-import { Store, Stores } from "../Logic/UIEventSource"
+import { Store, Stores } from "../Logic/UIEventSource";
-import { GeoOperations } from "../Logic/GeoOperations"
+import { GeoOperations } from "../Logic/GeoOperations";
-import { RasterLayerProperties } from "./RasterLayerProperties"
+import { RasterLayerProperties } from "./RasterLayerProperties";
 
 export class AvailableRasterLayers {
     public static EditorLayerIndex: (Feature<Polygon, EditorLayerIndexProperties> &
-        RasterLayerPolygon)[] = <any>editorlayerindex.features
+        RasterLayerPolygon)[] = <any>editorlayerindex.features;
     public static globalLayers: RasterLayerPolygon[] = globallayers.layers.map(
         (properties) =>
             <RasterLayerPolygon>{
                 type: "Feature",
                 properties,
-                geometry: BBox.global.asGeometry(),
+                geometry: BBox.global.asGeometry()
             }
-    )
+    );
     public static readonly osmCartoProperties: RasterLayerProperties = {
         id: "osm",
         name: "OpenStreetMap",
         url: "https://tile.openstreetmap.org/{z}/{x}/{y}.png",
         attribution: {
             text: "OpenStreetMap",
-            url: "https://openStreetMap.org/copyright",
+            url: "https://openStreetMap.org/copyright"
         },
         best: true,
         max_zoom: 19,
         min_zoom: 0,
-        category: "osmbasedmap",
+        category: "osmbasedmap"
-    }
+    };
 
     public static readonly osmCarto: RasterLayerPolygon = {
         type: "Feature",
         properties: AvailableRasterLayers.osmCartoProperties,
-        geometry: BBox.global.asGeometry(),
+        geometry: BBox.global.asGeometry()
-    }
+    };
 
-    public static readonly maplibre: RasterLayerPolygon = {
+    public static readonly maptilerDefaultLayer: RasterLayerPolygon = {
         type: "Feature",
         properties: {
             name: "MapTiler",
@@ -47,12 +47,43 @@ export class AvailableRasterLayers {
             type: "vector",
             attribution: {
                 text: "Maptiler",
-                url: "https://www.maptiler.com/copyright/",
+                url: "https://www.maptiler.com/copyright/"
-            },
+            }
         },
-        geometry: BBox.global.asGeometry(),
+        geometry: BBox.global.asGeometry()
-    }
+    };
 
+    public static readonly maptilerCarto: RasterLayerPolygon = {
+        type: "Feature",
+        properties: {
+            name: "MapTiler Carto",
+            url: "https://api.maptiler.com/maps/openstreetmap/style.json?key=GvoVAJgu46I5rZapJuAy",
+            category: "osmbasedmap",
+            id: "maptiler.carto",
+            type: "vector",
+            attribution: {
+                text: "Maptiler",
+                url: "https://www.maptiler.com/copyright/"
+            }
+        },
+        geometry: BBox.global.asGeometry()
+    };
+
+    public static readonly maptilerBackdrop: RasterLayerPolygon = {
+        type: "Feature",
+        properties: {
+            name: "MapTiler Backdrop",
+            url: "https://api.maptiler.com/maps/backdrop/style.json?key=GvoVAJgu46I5rZapJuAy",
+            category: "osmbasedmap",
+            id: "maptiler.backdrop",
+            type: "vector",
+            attribution: {
+                text: "Maptiler",
+                url: "https://www.maptiler.com/copyright/"
+            }
+        },
+        geometry: BBox.global.asGeometry()
+    };
     public static readonly americana: RasterLayerPolygon = {
         type: "Feature",
         properties: {
@@ -63,41 +94,43 @@ export class AvailableRasterLayers {
             type: "vector",
             attribution: {
                 text: "Americana",
-                url: "https://github.com/ZeLonewolf/openstreetmap-americana/",
+                url: "https://github.com/ZeLonewolf/openstreetmap-americana/"
-            },
+            }
         },
-        geometry: BBox.global.asGeometry(),
+        geometry: BBox.global.asGeometry()
-    }
+    };
 
     public static layersAvailableAt(
         location: Store<{ lon: number; lat: number }>
     ): Store<RasterLayerPolygon[]> {
         const availableLayersBboxes = Stores.ListStabilized(
             location.mapD((loc) => {
-                const lonlat: [number, number] = [loc.lon, loc.lat]
+                const lonlat: [number, number] = [loc.lon, loc.lat];
                 return AvailableRasterLayers.EditorLayerIndex.filter((eliPolygon) =>
                     BBox.get(eliPolygon).contains(lonlat)
-                )
+                );
             })
-        )
+        );
         const available = Stores.ListStabilized(
             availableLayersBboxes.map((eliPolygons) => {
-                const loc = location.data
+                const loc = location.data;
-                const lonlat: [number, number] = [loc.lon, loc.lat]
+                const lonlat: [number, number] = [loc.lon, loc.lat];
                 const matching: RasterLayerPolygon[] = eliPolygons.filter((eliPolygon) => {
                     if (eliPolygon.geometry === null) {
-                        return true // global ELI-layer
+                        return true; // global ELI-layer
                     }
-                    return GeoOperations.inside(lonlat, eliPolygon)
+                    return GeoOperations.inside(lonlat, eliPolygon);
-                })
+                });
-                matching.unshift(AvailableRasterLayers.osmCarto)
+                matching.push(...AvailableRasterLayers.globalLayers);
-                matching.unshift(AvailableRasterLayers.americana)
+                matching.unshift(AvailableRasterLayers.maptilerDefaultLayer,
-                matching.unshift(AvailableRasterLayers.maplibre)
+                    AvailableRasterLayers.osmCarto,
-                matching.push(...AvailableRasterLayers.globalLayers)
+                    AvailableRasterLayers.maptilerCarto,
-                return matching
+                    AvailableRasterLayers.maptilerBackdrop,
+                    AvailableRasterLayers.americana);
+                return matching;
             })
-        )
+        );
-        return available
+        return available;
     }
 }
 
@@ -115,22 +148,22 @@ export class RasterLayerUtils {
         preferredCategory: string,
         ignoreLayer?: RasterLayerPolygon
     ): RasterLayerPolygon {
-        let secondBest: RasterLayerPolygon = undefined
+        let secondBest: RasterLayerPolygon = undefined;
         for (const rasterLayer of available) {
             if (rasterLayer === ignoreLayer) {
-                continue
+                continue;
             }
-            const p = rasterLayer.properties
+            const p = rasterLayer.properties;
             if (p.category === preferredCategory) {
                 if (p.best) {
-                    return rasterLayer
+                    return rasterLayer;
                 }
                 if (!secondBest) {
-                    secondBest = rasterLayer
+                    secondBest = rasterLayer;
                 }
             }
         }
-        return secondBest
+        return secondBest;
     }
 }
 
@@ -146,11 +179,11 @@ export interface EditorLayerIndexProperties extends RasterLayerProperties {
     /**
      * The name of the imagery source
      */
-    readonly name: string
+    readonly name: string;
     /**
      * Whether the imagery name should be translated
      */
-    readonly i18n?: boolean
+    readonly i18n?: boolean;
     readonly type:
         | "tms"
         | "wms"
@@ -158,7 +191,7 @@ export interface EditorLayerIndexProperties extends RasterLayerProperties {
         | "scanex"
         | "wms_endpoint"
         | "wmts"
-        | "vector" /* Vector is not actually part of the ELI-spec, we add it for vector layers */
+        | "vector"; /* Vector is not actually part of the ELI-spec, we add it for vector layers */
     /**
      * A rough categorisation of different types of layers. See https://github.com/osmlab/editor-layer-index/blob/gh-pages/CONTRIBUTING.md#categories for a description of the individual categories.
      */
@@ -170,53 +203,53 @@ export interface EditorLayerIndexProperties extends RasterLayerProperties {
         | "historicphoto"
         | "qa"
         | "elevation"
-        | "other"
+        | "other";
     /**
      * A URL template for imagery tiles
      */
-    readonly url: string
+    readonly url: string;
-    readonly min_zoom?: number
+    readonly min_zoom?: number;
-    readonly max_zoom?: number
+    readonly max_zoom?: number;
     /**
      * explicit/implicit permission by the owner for use in OSM
      */
-    readonly permission_osm?: "explicit" | "implicit" | "no"
+    readonly permission_osm?: "explicit" | "implicit" | "no";
     /**
      * A URL for the license or permissions for the imagery
      */
-    readonly license_url?: string
+    readonly license_url?: string;
     /**
      * A URL for the privacy policy of the operator or false if there is no existing privacy policy for tis imagery.
      */
-    readonly privacy_policy_url?: string | boolean
+    readonly privacy_policy_url?: string | boolean;
     /**
      * A unique identifier for the source; used in imagery_used changeset tag
      */
-    readonly id: string
+    readonly id: string;
     /**
      * A short English-language description of the source
      */
-    readonly description?: string
+    readonly description?: string;
     /**
      * The ISO 3166-1 alpha-2 two letter country code in upper case. Use ZZ for unknown or multiple.
      */
-    readonly country_code?: string
+    readonly country_code?: string;
     /**
      * Whether this imagery should be shown in the default world-wide menu
      */
-    readonly default?: boolean
+    readonly default?: boolean;
     /**
      * Whether this imagery is the best source for the region
      */
-    readonly best?: boolean
+    readonly best?: boolean;
     /**
      * The age of the oldest imagery or data in the source, as an RFC3339 date or leading portion of one
      */
-    readonly start_date?: string
+    readonly start_date?: string;
     /**
      * The age of the newest imagery or data in the source, as an RFC3339 date or leading portion of one
      */
-    readonly end_date?: string
+    readonly end_date?: string;
     /**
      * HTTP header to check for information if the tile is invalid
      */
@@ -226,61 +259,61 @@ export interface EditorLayerIndexProperties extends RasterLayerProperties {
          * via the `patternProperty` "^.*$".
          */
         [k: string]: string[] | null
-    }
+    };
     /**
      * 'true' if tiles are transparent and can be overlaid on another source
      */
-    readonly overlay?: boolean & string
+    readonly overlay?: boolean & string;
-    readonly available_projections?: string[]
+    readonly available_projections?: string[];
     readonly attribution?: {
         readonly url?: string
         readonly text?: string
         readonly html?: string
         readonly required?: boolean
-    }
+    };
     /**
      * A URL for an image, that can be displayed in the list of imagery layers next to the name
      */
-    readonly icon?: string
+    readonly icon?: string;
     /**
      * A link to an EULA text that has to be accepted by the user, before the imagery source is added. Can contain {lang} to be replaced by a current user language wiki code (like FR:) or an empty string for the default English text.
      */
-    readonly eula?: string
+    readonly eula?: string;
     /**
      * A URL for an image, that is displayed in the mapview for attribution
      */
-    readonly "logo-image"?: string
+    readonly "logo-image"?: string;
     /**
      * Customized text for the terms of use link (default is "Background Terms of Use")
      */
-    readonly "terms-of-use-text"?: string
+    readonly "terms-of-use-text"?: string;
     /**
      * Specify a checksum for tiles, which aren't real tiles. `type` is the digest type and can be MD5, SHA-1, SHA-256, SHA-384 and SHA-512, value is the hex encoded checksum in lower case. To create a checksum save the tile as file and upload it to e.g. https://defuse.ca/checksums.htm.
      */
-    readonly "no-tile-checksum"?: string
+    readonly "no-tile-checksum"?: string;
     /**
      * header-name attribute specifies a header returned by tile server, that will be shown as `metadata-key` attribute in Show Tile Info dialog
      */
-    readonly "metadata-header"?: string
+    readonly "metadata-header"?: string;
     /**
      * Set to `true` if imagery source is properly aligned and does not need imagery offset adjustments. This is used for OSM based sources too.
      */
-    readonly "valid-georeference"?: boolean
+    readonly "valid-georeference"?: boolean;
     /**
      * Size of individual tiles delivered by a TMS service
      */
-    readonly "tile-size"?: number
+    readonly "tile-size"?: number;
     /**
      * Whether tiles status can be accessed by appending /status to the tile URL and can be submitted for re-rendering by appending /dirty.
      */
-    readonly "mod-tile-features"?: string
+    readonly "mod-tile-features"?: string;
     /**
      * HTTP headers to be sent to server. It has two attributes header-name and header-value. May be specified multiple times.
      */
     readonly "custom-http-headers"?: {
         readonly "header-name"?: string
         readonly "header-value"?: string
-    }
+    };
     /**
      * Default layer to open (when using WMS_ENDPOINT type). Contains list of layer tag with two attributes - name and style, e.g. `"default-layers": ["layer": { name="Basisdata_NP_Basiskart_JanMayen_WMTS_25829" "style":"default" } ]` (not allowed in `mirror` attribute)
      */
@@ -291,17 +324,17 @@ export interface EditorLayerIndexProperties extends RasterLayerProperties {
             [k: string]: unknown
         }
         [k: string]: unknown
-    }[]
+    }[];
     /**
      * format to use when connecting tile server (when using WMS_ENDPOINT type)
      */
-    readonly format?: string
+    readonly format?: string;
     /**
      * If `true` transparent tiles will be requested from WMS server
      */
-    readonly transparent?: boolean & string
+    readonly transparent?: boolean & string;
     /**
      * minimum expiry time for tiles in seconds. The larger the value, the longer entry in cache will be considered valid
      */
-    readonly "minimum-tile-expire"?: number
+    readonly "minimum-tile-expire"?: number;
 }

src/Models/ThemeConfig/Conversion/LegacyJsonConvert.ts

@@ -4,6 +4,7 @@ import LineRenderingConfigJson from "../Json/LineRenderingConfigJson"
 import { LayerConfigJson } from "../Json/LayerConfigJson"
 import { DesugaringStep, Each, Fuse, On } from "./Conversion"
 import PointRenderingConfigJson from "../Json/PointRenderingConfigJson"
+import { del } from "idb-keyval";
 
 export class UpdateLegacyLayer extends DesugaringStep<
     LayerConfigJson | string | { builtin; override }
@@ -41,7 +42,6 @@ export class UpdateLegacyLayer extends DesugaringStep<
                 delete preset["preciseInput"]
             } else if (preciseInput !== undefined) {
                 delete preciseInput["preferredBackground"]
-                console.log("Precise input:", preciseInput)
                 preset.snapToLayer = preciseInput.snapToLayer
                 delete preciseInput.snapToLayer
                 if (preciseInput.maxSnapDistance) {
@@ -146,7 +146,6 @@ export class UpdateLegacyLayer extends DesugaringStep<
             }
             const pr = <PointRenderingConfigJson>rendering
             let iconSize = pr.iconSize
-            console.log("Iconsize is", iconSize)
 
             if (Object.keys(pr.iconSize).length === 1 && pr.iconSize["render"] !== undefined) {
                 iconSize = pr.iconSize["render"]
@@ -198,6 +197,10 @@ class UpdateLegacyTheme extends DesugaringStep<LayoutConfigJson> {
             delete oldThemeConfig.socialImage
         }
 
+        if(oldThemeConfig.defaultBackgroundId === "osm"){
+            console.log("Removing old background in", json.id)
+        }
+
         if (oldThemeConfig["roamingRenderings"] !== undefined) {
             if (oldThemeConfig["roamingRenderings"].length == 0) {
                 delete oldThemeConfig["roamingRenderings"]

src/UI/BigComponents/BackgroundSwitcher.svelte

@@ -37,7 +37,7 @@
   function updatedAltLayer() {
     const available = availableRasterLayers.data
     const current = rasterLayer.data
-    const defaultLayer = AvailableRasterLayers.maplibre
+    const defaultLayer = AvailableRasterLayers.maptilerDefaultLayer
     const firstOther = available.find((l) => l !== defaultLayer)
     const secondOther = available.find((l) => l !== defaultLayer && l !== firstOther)
     raster0.setData(firstOther === current ? defaultLayer : firstOther)

src/UI/DownloadFlow/DownloadPdf.svelte

@@ -29,7 +29,7 @@
     const templateUrls = SvgToPdf.templates[templateName].pages
     const templates: string[] = await Promise.all(templateUrls.map((url) => Utils.download(url)))
     console.log("Templates are", templates)
-    const bg = state.mapProperties.rasterLayer.data ?? AvailableRasterLayers.maplibre
+    const bg = state.mapProperties.rasterLayer.data ?? AvailableRasterLayers.maptilerDefaultLayer
     const creator = new SvgToPdf(title, templates, {
       state,
       freeComponentId: "belowmap",

src/UI/Map/MapLibreAdaptor.ts

@@ -405,7 +405,7 @@ export class MapLibreAdaptor implements MapProperties, ExportableMap {
             this.removeCurrentLayer(map)
         } else {
             // Make sure that the default maptiler style is loaded as it gives an overlay with roads
-            const maptiler = AvailableRasterLayers.maplibre.properties
+            const maptiler = AvailableRasterLayers.maptilerDefaultLayer.properties
             if (!map.getSource(maptiler.id)) {
                 this.removeCurrentLayer(map)
                 map.addSource(maptiler.id, MapLibreAdaptor.prepareWmsSource(maptiler))

src/UI/Map/MaplibreMap.svelte

@@ -24,7 +24,7 @@
     writable({ lng: 0, lat: 0 })
   export let zoom: Readable<number> = writable(1)
 
-  const styleUrl = AvailableRasterLayers.maplibre.properties.url
+  const styleUrl = AvailableRasterLayers.maptilerDefaultLayer.properties.url
 
   let _map: Map
   onMount(() => {

src/UI/ThemeViewGUI.svelte

@@ -103,7 +103,7 @@
   let currentViewLayer = layout.layers.find((l) => l.id === "current_view")
   let rasterLayer: Store<RasterLayerPolygon> = state.mapProperties.rasterLayer
   let rasterLayerName =
-    rasterLayer.data?.properties?.name ?? AvailableRasterLayers.maplibre.properties.name
+    rasterLayer.data?.properties?.name ?? AvailableRasterLayers.maptilerDefaultLayer.properties.name
   onDestroy(
     rasterLayer.addCallbackAndRunD((l) => {
       rasterLayerName = l.properties.name

src/Utils/pngMapCreator.ts

@@ -46,7 +46,7 @@ export class PngMapCreator {
             const pixelRatio = 4
             const mapElem = new MlMap({
                 container: div.id,
-                style: AvailableRasterLayers.maplibre.properties.url,
+                style: AvailableRasterLayers.maptilerDefaultLayer.properties.url,
                 center: [l.lon, l.lat],
                 zoom: settings.zoom.data,
                 pixelRatio,