[WC-3158] Maps: mitigate not rendering (#1950)

r0b1n · web-flow · commit d3a160ca77cd · 2025-10-29T14:09:18.000+01:00
diff --git a/packages/pluggableWidgets/maps-web/CHANGELOG.md b/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.
diff --git a/packages/pluggableWidgets/maps-web/e2e/mapbox.spec.js-snapshots/mapboxMaps-chromium-linux.png b/packages/pluggableWidgets/maps-web/e2e/mapbox.spec.js-snapshots/mapboxMaps-chromium-linux.png
diff --git a/packages/pluggableWidgets/maps-web/e2e/openstreet.spec.js-snapshots/osmMaps-chromium-linux.png b/packages/pluggableWidgets/maps-web/e2e/openstreet.spec.js-snapshots/osmMaps-chromium-linux.png
diff --git a/packages/pluggableWidgets/maps-web/package.json b/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",
diff --git a/packages/pluggableWidgets/maps-web/src/components/LeafletMap.tsx b/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}
                             >
diff --git a/packages/pluggableWidgets/maps-web/src/components/__tests__/__snapshots__/LeafletMap.spec.tsx.snap b/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
diff --git a/packages/pluggableWidgets/maps-web/src/package.xml b/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>

Original file line number	Diff line number	Diff line change
`@@ -1,7 +1,7 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "@mendix/maps-web",`
`3`	`3`	`"widgetName": "Maps",`
`4`		`- "version": "4.0.1",`
	`4`	`+ "version": "4.1.0",`
`5`	`5`	`"description": "Show locations on Maps",`
`6`	`6`	`"copyright": "© Mendix Technology BV 2025. All rights reserved.",`
`7`	`7`	`"license": "Apache-2.0",`
Original file line number	Diff line number	Diff line change
`@@ -84,6 +84,7 @@ export function LeafletMap(props: LeafletProps): ReactElement {`
`84`	`84`	`scrollWheelZoom={scrollWheelZoom}`
`85`	`85`	`zoom={autoZoom ? translateZoom("city") : zoom}`
`86`	`86`	`zoomControl={zoomControl}`
	`87`	`+ style={{ top: 0, bottom: 0, left: 0, right: 0, position: "absolute", zIndex: 1 }}`
`87`	`88`	`>`
`88`	`89`	`<TileLayer {...baseMapLayer(mapProvider, mapsToken)} />`
`89`	`90`	`{locations`
`@@ -101,7 +102,7 @@ export function LeafletMap(props: LeafletProps): ReactElement {`
`101`	`102`	`}`
`102`	`103`	`interactive={!!marker.title \|\| !!marker.onClick}`
`103`	`104`	key={`marker_${marker.id ?? marker.latitude + "_" + marker.longitude}`}
`104`		`- eventHandlers={marker.title ? undefined : { click: marker.onClick }}`
	`105`	`+ eventHandlers={!marker.title && marker.onClick ? { click: marker.onClick } : undefined}`
`105`	`106`	`position={{ lat: marker.latitude, lng: marker.longitude }}`
`106`	`107`	`title={marker.title}`
`107`	`108`	`>`
Original file line number	Diff line number	Diff line change
@@ -11,7 +11,7 @@ exports[`Leaflet maps renders a map with HERE maps as provider 1`] = `
`11`	`11`	`>`
`12`	`12`	`<div`
`13`	`13`	`class="widget-leaflet-maps leaflet-container leaflet-touch leaflet-grab leaflet-touch-drag leaflet-touch-zoom"`
`14`		`- style="position: relative;"`
	`14`	`+ style="top: 0px; bottom: 0px; left: 0px; right: 0px; position: absolute; z-index: 1;"`
`15`	`15`	`tabindex="0"`
`16`	`16`	`>`
`17`	`17`	`<div`
@@ -120,7 +120,7 @@ exports[`Leaflet maps renders a map with MapBox maps as provider 1`] = `
`120`	`120`	`>`
`121`	`121`	`<div`
`122`	`122`	`class="widget-leaflet-maps leaflet-container leaflet-touch leaflet-grab leaflet-touch-drag leaflet-touch-zoom"`
`123`		`- style="position: relative;"`
	`123`	`+ style="top: 0px; bottom: 0px; left: 0px; right: 0px; position: absolute; z-index: 1;"`
`124`	`124`	`tabindex="0"`
`125`	`125`	`>`
`126`	`126`	`<div`
@@ -229,7 +229,7 @@ exports[`Leaflet maps renders a map with attribution 1`] = `
`229`	`229`	`>`
`230`	`230`	`<div`
`231`	`231`	`class="widget-leaflet-maps leaflet-container leaflet-touch leaflet-grab leaflet-touch-drag leaflet-touch-zoom"`
`232`		`- style="position: relative;"`
	`232`	`+ style="top: 0px; bottom: 0px; left: 0px; right: 0px; position: absolute; z-index: 1;"`
`233`	`233`	`tabindex="0"`
`234`	`234`	`>`
`235`	`235`	`<div`
@@ -362,7 +362,7 @@ exports[`Leaflet maps renders a map with current location 1`] = `
`362`	`362`	`>`
`363`	`363`	`<div`
`364`	`364`	`class="widget-leaflet-maps leaflet-container leaflet-touch leaflet-grab leaflet-touch-drag leaflet-touch-zoom"`
`365`		`- style="position: relative;"`
	`365`	`+ style="top: 0px; bottom: 0px; left: 0px; right: 0px; position: absolute; z-index: 1;"`
`366`	`366`	`tabindex="0"`
`367`	`367`	`>`
`368`	`368`	`<div`
@@ -484,7 +484,7 @@ exports[`Leaflet maps renders a map with markers 1`] = `
`484`	`484`	`>`
`485`	`485`	`<div`
`486`	`486`	`class="widget-leaflet-maps leaflet-container leaflet-touch leaflet-grab leaflet-touch-drag leaflet-touch-zoom"`
`487`		`- style="position: relative;"`
	`487`	`+ style="top: 0px; bottom: 0px; left: 0px; right: 0px; position: absolute; z-index: 1;"`
`488`	`488`	`tabindex="0"`
`489`	`489`	`>`
`490`	`490`	`<div`
@@ -620,7 +620,7 @@ exports[`Leaflet maps renders a map with percentage of parent units renders the
`620`	`620`	`>`
`621`	`621`	`<div`
`622`	`622`	`class="widget-leaflet-maps leaflet-container leaflet-touch leaflet-grab leaflet-touch-drag leaflet-touch-zoom"`
`623`		`- style="position: relative;"`
	`623`	`+ style="top: 0px; bottom: 0px; left: 0px; right: 0px; position: absolute; z-index: 1;"`
`624`	`624`	`tabindex="0"`
`625`	`625`	`>`
`626`	`626`	`<div`
@@ -729,7 +729,7 @@ exports[`Leaflet maps renders a map with percentage of width and height units re
`729`	`729`	`>`
`730`	`730`	`<div`
`731`	`731`	`class="widget-leaflet-maps leaflet-container leaflet-touch leaflet-grab leaflet-touch-drag leaflet-touch-zoom"`
`732`		`- style="position: relative;"`
	`732`	`+ style="top: 0px; bottom: 0px; left: 0px; right: 0px; position: absolute; z-index: 1;"`
`733`	`733`	`tabindex="0"`
`734`	`734`	`>`
`735`	`735`	`<div`
@@ -838,7 +838,7 @@ exports[`Leaflet maps renders a map with pixels renders structure correctly 1`]
`838`	`838`	`>`
`839`	`839`	`<div`
`840`	`840`	`class="widget-leaflet-maps leaflet-container leaflet-touch leaflet-grab leaflet-touch-drag leaflet-touch-zoom"`
`841`		`- style="position: relative;"`
	`841`	`+ style="top: 0px; bottom: 0px; left: 0px; right: 0px; position: absolute; z-index: 1;"`
`842`	`842`	`tabindex="0"`
`843`	`843`	`>`
`844`	`844`	`<div`
@@ -947,7 +947,7 @@ exports[`Leaflet maps renders a map with right structure 1`] = `
`947`	`947`	`>`
`948`	`948`	`<div`
`949`	`949`	`class="widget-leaflet-maps leaflet-container leaflet-touch leaflet-grab leaflet-touch-drag leaflet-touch-zoom"`
`950`		`- style="position: relative;"`
	`950`	`+ style="top: 0px; bottom: 0px; left: 0px; right: 0px; position: absolute; z-index: 1;"`
`951`	`951`	`tabindex="0"`
`952`	`952`	`>`
`953`	`953`	`<div`