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/Maps.tsx

@@ -49,6 +49,7 @@ export default function Maps(props: MapsContainerProps): ReactNode {
             width={props.width}
             widthUnit={props.widthUnit}
             zoomLevel={translateZoom(props.zoom)}
+            maxAutoZoom={props.maxAutoZoom}
         />
     );
 }

packages/pluggableWidgets/maps-web/src/Maps.xml

@@ -199,6 +199,10 @@
                     <caption>Rotate</caption>
                     <description />
                 </property>
+                <property key="maxAutoZoom" type="integer" defaultValue="13">
+                    <caption>Maximum autozoom</caption>
+                    <description>Not available for Google maps</description>
+                </property>
             </propertyGroup>
         </propertyGroup>
         <propertyGroup caption="Dimensions">

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

@@ -1,16 +1,20 @@
-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 { DivIcon, latLngBounds, Icon as LeafletIcon } from "leaflet";
+import { Icon as LeafletIcon, DivIcon, latLngBounds } 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;
+    maxAutoZoom: number; // Maximum zoom level when autoZoom is enabled
 }
 
 /**
@@ -32,24 +36,50 @@ const defaultMarkerIcon = new LeafletIcon({
     iconAnchor: [12, 41]
 });
 
-function SetBoundsComponent(props: Pick<LeafletProps, "autoZoom" | "currentLocation" | "locations">): null {
+function SetBoundsComponent(
+    props: Pick<LeafletProps, "autoZoom" | "currentLocation" | "locations" | "maxAutoZoom">
+): null {
     const map = useMap();
-    const { autoZoom, currentLocation, locations } = props;
+    const { autoZoom, currentLocation, locations, maxAutoZoom } = 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: maxAutoZoom // 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;
 }
@@ -68,9 +98,13 @@ export function LeafletMap(props: LeafletProps): ReactElement {
         optionZoomControl: zoomControl,
         style,
         zoomLevel: zoom,
-        optionDrag: dragging
+        optionDrag: dragging,
+        maxAutoZoom: maxAutoZoom = 13
     } = 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 +116,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)} />
@@ -117,7 +151,12 @@ export function LeafletMap(props: LeafletProps): ReactElement {
                                 )}
                             </MarkerComponent>
                         ))}
-                    <SetBoundsComponent autoZoom={autoZoom} currentLocation={currentLocation} locations={locations} />
+                    <SetBoundsComponent
+                        autoZoom={autoZoom}
+                        currentLocation={currentLocation}
+                        locations={locations}
+                        maxAutoZoom={maxAutoZoom}
+                    />
                 </MapContainer>
             </div>
         </div>