[WC-3158] Maps: mitigate not rendering

packages/pluggableWidgets/maps-web/CHANGELOG.md

@@ -8,6 +8,8 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 ### Fixed
 
+- We mitigated the issue with Maps widgets not rendering in some cases.
+
 - We fixed an issue where GoogleMap and LeafletMap uses array index for the list item which causes issues when filtering large amounts of locations. Thanks to @jeroen-huizer-conclusion for the contribution.
 
 - We fixed an issue where where browser console throw warning of unknown listener when the location has title in LeafletMap. Thanks to @jeroen-huizer-conclusion for the contribution.

packages/pluggableWidgets/maps-web/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@mendix/maps-web",
     "widgetName": "Maps",
-    "version": "4.0.1",
+    "version": "4.1.0",
     "description": "Show locations on Maps",
     "copyright": "© Mendix Technology BV 2025. All rights reserved.",
     "license": "Apache-2.0",

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

@@ -84,6 +84,7 @@ export function LeafletMap(props: LeafletProps): ReactElement {
                     scrollWheelZoom={scrollWheelZoom}
                     zoom={autoZoom ? translateZoom("city") : zoom}
                     zoomControl={zoomControl}
+                    style={{ top: 0, bottom: 0, left: 0, right: 0, position: "absolute", zIndex: 1 }}
                 >
                     <TileLayer {...baseMapLayer(mapProvider, mapsToken)} />
                     {locations
@@ -101,7 +102,7 @@ export function LeafletMap(props: LeafletProps): ReactElement {
                                 }
                                 interactive={!!marker.title || !!marker.onClick}
                                 key={`marker_${marker.id ?? marker.latitude + "_" + marker.longitude}`}
-                                eventHandlers={marker.title ? undefined : { click: marker.onClick }}
+                                eventHandlers={!marker.title && marker.onClick ? { click: marker.onClick } : undefined}
                                 position={{ lat: marker.latitude, lng: marker.longitude }}
                                 title={marker.title}
                             >

packages/pluggableWidgets/maps-web/src/components/__tests__/__snapshots__/LeafletMap.spec.tsx.snap

@@ -11,7 +11,7 @@ exports[`Leaflet maps renders a map with HERE maps as provider 1`] = `
     >
       <div
         class="widget-leaflet-maps leaflet-container leaflet-touch leaflet-grab leaflet-touch-drag leaflet-touch-zoom"
-        style="position: relative;"
+        style="top: 0px; bottom: 0px; left: 0px; right: 0px; position: absolute; z-index: 1;"
         tabindex="0"
       >
         <div
@@ -120,7 +120,7 @@ exports[`Leaflet maps renders a map with MapBox maps as provider 1`] = `
     >
       <div
         class="widget-leaflet-maps leaflet-container leaflet-touch leaflet-grab leaflet-touch-drag leaflet-touch-zoom"
-        style="position: relative;"
+        style="top: 0px; bottom: 0px; left: 0px; right: 0px; position: absolute; z-index: 1;"
         tabindex="0"
       >
         <div
@@ -229,7 +229,7 @@ exports[`Leaflet maps renders a map with attribution 1`] = `
     >
       <div
         class="widget-leaflet-maps leaflet-container leaflet-touch leaflet-grab leaflet-touch-drag leaflet-touch-zoom"
-        style="position: relative;"
+        style="top: 0px; bottom: 0px; left: 0px; right: 0px; position: absolute; z-index: 1;"
         tabindex="0"
       >
         <div
@@ -362,7 +362,7 @@ exports[`Leaflet maps renders a map with current location 1`] = `
     >
       <div
         class="widget-leaflet-maps leaflet-container leaflet-touch leaflet-grab leaflet-touch-drag leaflet-touch-zoom"
-        style="position: relative;"
+        style="top: 0px; bottom: 0px; left: 0px; right: 0px; position: absolute; z-index: 1;"
         tabindex="0"
       >
         <div
@@ -484,7 +484,7 @@ exports[`Leaflet maps renders a map with markers 1`] = `
     >
       <div
         class="widget-leaflet-maps leaflet-container leaflet-touch leaflet-grab leaflet-touch-drag leaflet-touch-zoom"
-        style="position: relative;"
+        style="top: 0px; bottom: 0px; left: 0px; right: 0px; position: absolute; z-index: 1;"
         tabindex="0"
       >
         <div
@@ -620,7 +620,7 @@ exports[`Leaflet maps renders a map with percentage of parent units renders the
     >
       <div
         class="widget-leaflet-maps leaflet-container leaflet-touch leaflet-grab leaflet-touch-drag leaflet-touch-zoom"
-        style="position: relative;"
+        style="top: 0px; bottom: 0px; left: 0px; right: 0px; position: absolute; z-index: 1;"
         tabindex="0"
       >
         <div
@@ -729,7 +729,7 @@ exports[`Leaflet maps renders a map with percentage of width and height units re
     >
       <div
         class="widget-leaflet-maps leaflet-container leaflet-touch leaflet-grab leaflet-touch-drag leaflet-touch-zoom"
-        style="position: relative;"
+        style="top: 0px; bottom: 0px; left: 0px; right: 0px; position: absolute; z-index: 1;"
         tabindex="0"
       >
         <div
@@ -838,7 +838,7 @@ exports[`Leaflet maps renders a map with pixels renders structure correctly 1`]
     >
       <div
         class="widget-leaflet-maps leaflet-container leaflet-touch leaflet-grab leaflet-touch-drag leaflet-touch-zoom"
-        style="position: relative;"
+        style="top: 0px; bottom: 0px; left: 0px; right: 0px; position: absolute; z-index: 1;"
         tabindex="0"
       >
         <div
@@ -947,7 +947,7 @@ exports[`Leaflet maps renders a map with right structure 1`] = `
     >
       <div
         class="widget-leaflet-maps leaflet-container leaflet-touch leaflet-grab leaflet-touch-drag leaflet-touch-zoom"
-        style="position: relative;"
+        style="top: 0px; bottom: 0px; left: 0px; right: 0px; position: absolute; z-index: 1;"
         tabindex="0"
       >
         <div

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

@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="utf-8" ?>
 <package xmlns="http://www.mendix.com/package/1.0/">
-    <clientModule name="Maps" version="4.0.1" xmlns="http://www.mendix.com/clientModule/1.0/">
+    <clientModule name="Maps" version="4.1.0" xmlns="http://www.mendix.com/clientModule/1.0/">
         <widgetFiles>
             <widgetFile path="Maps.xml" />
         </widgetFiles>