refactor(maps-web): extract tile layer config from ViewModel to utils/tile-layer.ts

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>

Author: iobuhov

packages/pluggableWidgets/maps-web/src/model/viewmodels/LeafletMap.viewModel.ts

@@ -1,9 +1,10 @@
-import { latLngBounds, Map as LeafletMapInstance, Marker as LeafletMarker, TileLayer, TileLayerOptions } from "leaflet";
+import { latLngBounds, Map as LeafletMapInstance, Marker as LeafletMarker, TileLayer } from "leaflet";
 import { reaction } from "mobx";
 import { ComputedAtom, DerivedPropsGate } from "@mendix/widget-plugin-mobx-kit/main";
 import { MapProviderEnum, MapsContainerProps } from "../../../typings/MapsProps";
 import { Marker } from "../../../typings/shared";
 import { createLeafletMarker } from "../../utils/leaflet-markers";
+import { getTileLayerConfig } from "../../utils/tile-layer";
 import { translateZoom } from "../../utils/zoom";
 import { CurrentLocationService } from "../services/CurrentLocation.service";
 import { LocationResolverService } from "../services/LocationResolver.service";
@@ -24,56 +25,6 @@ export class LeafletMapViewModel {
         return this.gate.props.mapProvider;
     }
 
-    private getTileLayerConfig(
-        mapProvider: MapProviderEnum,
-        apiKey: string | null
-    ): { url: string; options: TileLayerOptions } {
-        const customUrls = {
-            openStreetMap: "https://{s}.tile.osm.org/{z}/{x}/{y}.png",
-            mapbox: "https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}",
-            hereMaps: "https://2.base.maps.cit.api.here.com/maptile/2.1/maptile/newest/normal.day/{z}/{x}/{y}/256/png8"
-        };
-
-        const mapAttr = {
-            openStreetMapAttr: "&copy; <a href='https://osm.org/copyright'>OpenStreetMap</a> contributors",
-            mapboxAttr:
-                "Map data &copy; <a href='https://www.openstreetmap.org/'>OpenStreetMap</a> contributors, <a href='https://creativecommons.org/licenses/by-sa/2.0/'>CC-BY-SA</a>, Imagery © <a href='https://www.mapbox.com/'>Mapbox</a>",
-            hereMapsAttr: "Map &copy; 1987-2020 <a href='https://developer.here.com'>HERE</a>"
-        };
-
-        if (mapProvider === "mapBox") {
-            const token = apiKey ? `?access_token=${apiKey}` : "";
-            return {
-                url: customUrls.mapbox + token,
-                options: {
-                    attribution: mapAttr.mapboxAttr,
-                    id: "mapbox/streets-v11",
-                    tileSize: 512,
-                    zoomOffset: -1
-                }
-            };
-        } else if (mapProvider === "hereMaps") {
-            let token = "";
-            if (apiKey) {
-                if (apiKey.indexOf(",") > 0) {
-                    const [appId, appCode] = apiKey.split(",");
-                    token = `?app_id=${appId}&app_code=${appCode}`;
-                } else {
-                    token = `?apiKey=${apiKey}`;
-                }
-            }
-            return {
-                url: customUrls.hereMaps + token,
-                options: { attribution: mapAttr.hereMapsAttr }
-            };
-        } else {
-            return {
-                url: customUrls.openStreetMap,
-                options: { attribution: mapAttr.openStreetMapAttr }
-            };
-        }
-    }
-
     setupMap(node: HTMLDivElement): () => void {
         const {
             attributionControl,
@@ -98,7 +49,7 @@ export class LeafletMapViewModel {
 
         this.map = map;
 
-        const { url, options } = this.getTileLayerConfig(mapProvider, this.apiKeyAtom.get());
+        const { url, options } = getTileLayerConfig(mapProvider, this.apiKeyAtom.get());
         this.tileLayer = new TileLayer(url, options);
         this.tileLayer.addTo(map);
 

packages/pluggableWidgets/maps-web/src/utils/tile-layer.ts

@@ -0,0 +1,55 @@
+import { TileLayerOptions } from "leaflet";
+import { MapProviderEnum } from "../../typings/MapsProps";
+
+export interface TileLayerConfig {
+    url: string;
+    options: TileLayerOptions;
+}
+
+const urls = {
+    openStreetMap: "https://{s}.tile.osm.org/{z}/{x}/{y}.png",
+    mapbox: "https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}",
+    hereMaps: "https://2.base.maps.cit.api.here.com/maptile/2.1/maptile/newest/normal.day/{z}/{x}/{y}/256/png8"
+};
+
+const attributions = {
+    openStreetMap: "&copy; <a href='https://osm.org/copyright'>OpenStreetMap</a> contributors",
+    mapbox: "Map data &copy; <a href='https://www.openstreetmap.org/'>OpenStreetMap</a> contributors, <a href='https://creativecommons.org/licenses/by-sa/2.0/'>CC-BY-SA</a>, Imagery © <a href='https://www.mapbox.com/'>Mapbox</a>",
+    hereMaps: "Map &copy; 1987-2020 <a href='https://developer.here.com'>HERE</a>"
+};
+
+export function getTileLayerConfig(mapProvider: MapProviderEnum, apiKey: string | null): TileLayerConfig {
+    if (mapProvider === "mapBox") {
+        const token = apiKey ? `?access_token=${apiKey}` : "";
+        return {
+            url: urls.mapbox + token,
+            options: {
+                attribution: attributions.mapbox,
+                id: "mapbox/streets-v11",
+                tileSize: 512,
+                zoomOffset: -1
+            }
+        };
+    }
+
+    if (mapProvider === "hereMaps") {
+        let token = "";
+        if (apiKey) {
+            if (apiKey.indexOf(",") > 0) {
+                const [appId, appCode] = apiKey.split(",");
+                token = `?app_id=${appId}&app_code=${appCode}`;
+            } else {
+                token = `?apiKey=${apiKey}`;
+            }
+        }
+        return {
+            url: urls.hereMaps + token,
+            options: { attribution: attributions.hereMaps }
+        };
+    }
+
+    return {
+        url: urls.openStreetMap,
+        options: { attribution: attributions.openStreetMap }
+    };
+}