refactor(maps-web): inline tile layer logic in LeafletMapViewModel, remove baseMapLayer utility

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

Author: iobuhov

packages/pluggableWidgets/maps-web/src/model/containers/Maps.container.ts

@@ -32,7 +32,7 @@ const _01_coreBindings: BindingGroup = {
     inject() {
         injected(LocationResolverService, CORE.setupService, CORE.mainGate, CORE.geocodeFunction, CORE.geodecodeApiKey);
         injected(CurrentLocationService, CORE.setupService, CORE.config, CORE.getLocationFunction);
-        injected(LeafletMapViewModel, CORE.mainGate, MAPS.locationResolver, MAPS.currentLocation);
+        injected(LeafletMapViewModel, CORE.mainGate, MAPS.locationResolver, MAPS.currentLocation, CORE.apiKey);
     },
     define(container) {
         container.bind(MAPS.locationResolver).toInstance(LocationResolverService).inSingletonScope();

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

@@ -1,9 +1,8 @@
-import { latLngBounds, Map as LeafletMapInstance, Marker as LeafletMarker, TileLayer } from "leaflet";
+import { latLngBounds, Map as LeafletMapInstance, Marker as LeafletMarker, TileLayer, TileLayerOptions } from "leaflet";
 import { reaction } from "mobx";
-import { DerivedPropsGate } from "@mendix/widget-plugin-mobx-kit/main";
+import { ComputedAtom, DerivedPropsGate } from "@mendix/widget-plugin-mobx-kit/main";
 import { MapProviderEnum, MapsContainerProps } from "../../../typings/MapsProps";
 import { Marker } from "../../../typings/shared";
-import { baseMapLayer } from "../../utils/leaflet";
 import { createLeafletMarker } from "../../utils/leaflet-markers";
 import { translateZoom } from "../../utils/zoom";
 import { CurrentLocationService } from "../services/CurrentLocation.service";
@@ -17,13 +16,64 @@ export class LeafletMapViewModel {
     constructor(
         private readonly gate: DerivedPropsGate<MapsContainerProps>,
         private readonly locationResolver: LocationResolverService,
-        private readonly currentLocationService: CurrentLocationService
+        private readonly currentLocationService: CurrentLocationService,
+        private readonly apiKeyAtom: ComputedAtom<string | null>
     ) {}
 
     get mapProvider(): MapProviderEnum {
         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,
@@ -48,10 +98,7 @@ export class LeafletMapViewModel {
 
         this.map = map;
 
-        const { url, ...options } = baseMapLayer(
-            mapProvider,
-            this.gate.props.apiKeyExp?.value ?? this.gate.props.apiKey
-        );
+        const { url, options } = this.getTileLayerConfig(mapProvider, this.apiKeyAtom.get());
         this.tileLayer = new TileLayer(url, options);
         this.tileLayer.addTo(map);