Leaflet bug - Mapbox tiles did not load in certain scenarios

packages/pluggableWidgets/maps-web/jest.config.js

@@ -1,4 +1,5 @@
 module.exports = {
     ...require("@mendix/pluggable-widgets-tools/test-config/jest.enzyme-free.config.js"),
-    transformIgnorePatterns: ["node_modules/(?!(.*leaflet.*))"]
+    transformIgnorePatterns: ["node_modules/(?!(.*leaflet.*))"],
+    setupFilesAfterEnv: ["../jest.setup.js"]
 };

packages/pluggableWidgets/maps-web/jest.setup.js

@@ -0,0 +1,8 @@
+// Jest setup file to add polyfills for testing
+
+// Polyfill for ResizeObserver which is required by Leaflet 2.0.0-alpha
+global.ResizeObserver = jest.fn().mockImplementation(() => ({
+    observe: jest.fn(),
+    unobserve: jest.fn(),
+    disconnect: jest.fn()
+}));

packages/pluggableWidgets/maps-web/package.json

@@ -46,7 +46,7 @@
         "@vis.gl/react-google-maps": "^0.8.3",
         "classnames": "^2.5.1",
         "deep-equal": "^2.2.3",
-        "leaflet": "^1.9.4",
+        "leaflet": "2.0.0-alpha",
         "react-leaflet": "^4.2.1"
     },
     "devDependencies": {

packages/pluggableWidgets/maps-web/src/components/LeafletMap.tsx

@@ -1,13 +1,16 @@
-import { createElement, ReactElement } from "react";
+import { createElement, ReactElement, useEffect } from "react";
 import { MapContainer, Marker as MarkerComponent, Popup, TileLayer, useMap } from "react-leaflet";
 import classNames from "classnames";
 import { getDimensions } from "@mendix/widget-plugin-platform/utils/get-dimensions";
 import { SharedProps } from "../../typings/shared";
 import { MapProviderEnum } from "../../typings/MapsProps";
 import { translateZoom } from "../utils/zoom";
-import { latLngBounds, Icon as LeafletIcon, DivIcon } from "leaflet";
+import { Icon as LeafletIcon, DivIcon } from "leaflet";
 import { baseMapLayer } from "../utils/leaflet";
 
+// Global variable for marker render delay
+const MARKER_RENDER_DELAY = 100;
+
 export interface LeafletProps extends SharedProps {
     mapProvider: MapProviderEnum;
     attributionControl: boolean;
@@ -36,20 +39,44 @@ function SetBoundsComponent(props: Pick<LeafletProps, "autoZoom" | "currentLocat
     const map = useMap();
     const { autoZoom, currentLocation, locations } = props;
 
-    const bounds = latLngBounds(
-        locations
-            .concat(currentLocation ? [currentLocation] : [])
-            .filter(m => !!m)
-            .map(m => [m.latitude, m.longitude])
-    );
+    useEffect(() => {
+        if (map) {
+            // Add a small delay to ensure markers are rendered
+            const timer = setTimeout(() => {
+                const allMarkers = locations.concat(currentLocation ? [currentLocation] : []).filter(m => !!m);
+
+                if (allMarkers.length > 0) {
+                    const lats = allMarkers.map(m => m.latitude);
+                    const lngs = allMarkers.map(m => m.longitude);
+
+                    const southWest = [Math.min(...lats), Math.min(...lngs)] as [number, number];
+                    const northEast = [Math.max(...lats), Math.max(...lngs)] as [number, number];
 
-    if (bounds.isValid()) {
-        if (autoZoom) {
-            map.flyToBounds(bounds, { padding: [0.5, 0.5], animate: false }).invalidateSize();
-        } else {
-            map.panTo(bounds.getCenter(), { animate: false });
+                    if (autoZoom) {
+                        // Use more conservative options for flyToBounds
+                        const flyOptions = {
+                            padding: [20, 20] as [number, number], // Use pixel padding
+                            animate: false,
+                            maxZoom: 15 // Limit maximum zoom to prevent over-zooming
+                        };
+
+                        map.flyToBounds([southWest, northEast], flyOptions);
+
+                        // Force invalidate size after bounds are set
+                        setTimeout(() => {
+                            map.invalidateSize();
+                        }, 50);
+                    } else {
+                        const centerLat = (southWest[0] + northEast[0]) / 2;
+                        const centerLng = (southWest[1] + northEast[1]) / 2;
+                        map.panTo([centerLat, centerLng], { animate: false });
+                    }
+                }
+            }, MARKER_RENDER_DELAY);
+
+            return () => clearTimeout(timer);
         }
-    }
+    }, [map, locations, currentLocation, autoZoom]);
 
     return null;
 }
@@ -71,6 +98,9 @@ export function LeafletMap(props: LeafletProps): ReactElement {
         optionDrag: dragging
     } = props;
 
+    // Use a lower initial zoom when autoZoom is enabled to prevent conflicts
+    const initialZoom = autoZoom ? Math.min(translateZoom("city"), zoom) : zoom;
+
     return (
         <div className={classNames("widget-maps", className)} style={{ ...style, ...getDimensions(props) }}>
             <div className="widget-leaflet-maps-wrapper">
@@ -82,7 +112,7 @@ export function LeafletMap(props: LeafletProps): ReactElement {
                     maxZoom={18}
                     minZoom={1}
                     scrollWheelZoom={scrollWheelZoom}
-                    zoom={autoZoom ? translateZoom("city") : zoom}
+                    zoom={initialZoom}
                     zoomControl={zoomControl}
                 >
                     <TileLayer {...baseMapLayer(mapProvider, mapsToken)} />