diff --git a/packages/pluggableWidgets/document-viewer-web/components/PDFViewer.tsx b/packages/pluggableWidgets/document-viewer-web/components/PDFViewer.tsx
index 591c378b60..7a375a22cb 100644
--- a/packages/pluggableWidgets/document-viewer-web/components/PDFViewer.tsx
+++ b/packages/pluggableWidgets/document-viewer-web/components/PDFViewer.tsx
@@ -35,18 +35,73 @@ const PDFViewer: DocRendererElement = (props: DocumentRendererProps) => {
     const [numberOfPages, setNumberOfPages] = useState<number>(1);
     const { zoomLevel, zoomIn, zoomOut, reset } = useZoomScale();
     const [currentPage, setCurrentPage] = useState<number>(1);
+    const [pageInputValue, setPageInputValue] = useState<string>("1");
     const [pdfUrl, setPdfUrl] = useState<string | null>(null);
 
     const onDownloadClick = useCallback(() => {
         downloadFile(file.value?.uri);
     }, [file]);
 
+    const handlePageInputChange = useCallback((event: React.ChangeEvent<HTMLInputElement>) => {
+        const value = event.target.value;
+        // Allow only numbers and empty string
+        if (value === "" || /^\d+$/.test(value)) {
+            setPageInputValue(value);
+        }
+    }, []);
+
+    const validateAndSetPage = useCallback(() => {
+        const pageNumber = parseInt(pageInputValue, 10);
+        if (!isNaN(pageNumber) && pageNumber >= 1 && pageNumber <= numberOfPages) {
+            setCurrentPage(pageNumber);
+        } else {
+            // Reset to current page if invalid input
+            setPageInputValue(currentPage.toString());
+        }
+    }, [pageInputValue, numberOfPages, currentPage]);
+
+    const handlePageInputSubmit = useCallback(
+        (event: React.FormEvent) => {
+            event.preventDefault();
+            validateAndSetPage();
+        },
+        [validateAndSetPage]
+    );
+
+    const handlePageInputBlur = useCallback(() => {
+        validateAndSetPage();
+    }, [validateAndSetPage]);
+
+    const handlePageInputKeyDown = useCallback(
+        (event: React.KeyboardEvent<HTMLInputElement>) => {
+            if (event.key === "Enter") {
+                event.preventDefault();
+                validateAndSetPage();
+            }
+            // Prevent non-numeric characters except backspace, delete, arrow keys, etc.
+            if (
+                !/[\d]/.test(event.key) &&
+                !["Backspace", "Delete", "ArrowLeft", "ArrowRight", "Home", "End", "Tab"].includes(event.key) &&
+                !event.ctrlKey &&
+                !event.metaKey
+            ) {
+                event.preventDefault();
+            }
+        },
+        [validateAndSetPage]
+    );
+
     useEffect(() => {
         if (file.status === "available" && file.value.uri) {
             setPdfUrl(file.value.uri);
         }
     }, [file, file.status, file.value?.uri]);
 
+    // Sync page input value with current page
+    useEffect(() => {
+        setPageInputValue(currentPage.toString());
+    }, [currentPage]);
+
     function onDocumentLoadSuccess({ numPages }: { numPages: number }): void {
         setNumberOfPages(numPages);
     }
@@ -69,11 +124,27 @@ const PDFViewer: DocRendererElement = (props: DocumentRendererProps) => {
                             aria-label={"Go to previous page"}
                             title={"Go to previous page"}
                         ></button>
-                        <span>
-                            {currentPage} / {numberOfPages}
-                        </span>
+                        <div className="widget-document-viewer-page-input">
+                            <form onSubmit={handlePageInputSubmit}>
+                                <input
+                                    type="text"
+                                    inputMode="numeric"
+                                    pattern="[0-9]*"
+                                    value={pageInputValue}
+                                    onChange={handlePageInputChange}
+                                    onKeyDown={handlePageInputKeyDown}
+                                    onBlur={handlePageInputBlur}
+                                    className="form-control widget-document-viewer-page-number-input"
+                                    aria-label="Page number"
+                                    title={`Go to page (1-${numberOfPages})`}
+                                    placeholder={currentPage.toString()}
+                                />
+                            </form>
+                            <span className="widget-document-viewer-total-pages">/ {numberOfPages}</span>
+                        </div>
                         <button
                             onClick={() => setCurrentPage(prev => Math.min(prev + 1, numberOfPages))}
+                            disabled={currentPage >= numberOfPages}
                             className="icons icon-Right btn btn-icon-only"
                             aria-label={"Go to next page"}
                             title={"Go to next page"}
diff --git a/packages/pluggableWidgets/document-viewer-web/package.json b/packages/pluggableWidgets/document-viewer-web/package.json
index c8f73eae99..23722d1b2b 100644
--- a/packages/pluggableWidgets/document-viewer-web/package.json
+++ b/packages/pluggableWidgets/document-viewer-web/package.json
@@ -1,7 +1,7 @@
 {
     "name": "@mendix/document-viewer-web",
     "widgetName": "DocumentViewer",
-    "version": "1.1.1",
+    "version": "1.1.2",
     "description": "View PDF and other document types",
     "copyright": "© Mendix Technology BV 2025. All rights reserved.",
     "license": "Apache-2.0",
diff --git a/packages/pluggableWidgets/document-viewer-web/ui/documentViewer.scss b/packages/pluggableWidgets/document-viewer-web/ui/documentViewer.scss
index 0d6f609dc9..2b7d6bd666 100644
--- a/packages/pluggableWidgets/document-viewer-web/ui/documentViewer.scss
+++ b/packages/pluggableWidgets/document-viewer-web/ui/documentViewer.scss
@@ -87,3 +87,16 @@ div.widget-document-viewer {
         background-position: right;
     }
 }
+
+.widget-document-viewer-page-input {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+}
+
+.widget-document-viewer-page-input .widget-document-viewer-page-number-input {
+    padding: 3px 3px !important;
+    text-align: center;
+    margin-right: 5px;
+    width: 5ch;
+}
diff --git a/packages/pluggableWidgets/maps-web/jest.config.js b/packages/pluggableWidgets/maps-web/jest.config.js
index 6c49746721..ad93d48df4 100644
--- a/packages/pluggableWidgets/maps-web/jest.config.js
+++ b/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"]
 };
diff --git a/packages/pluggableWidgets/maps-web/jest.setup.js b/packages/pluggableWidgets/maps-web/jest.setup.js
new file mode 100644
index 0000000000..082fe5288a
--- /dev/null
+++ b/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()
+}));
diff --git a/packages/pluggableWidgets/maps-web/package.json b/packages/pluggableWidgets/maps-web/package.json
index f598b8ba5b..9e63d8a66f 100644
--- a/packages/pluggableWidgets/maps-web/package.json
+++ b/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": {
diff --git a/packages/pluggableWidgets/maps-web/src/Maps.tsx b/packages/pluggableWidgets/maps-web/src/Maps.tsx
index 1b5496f987..3dc578532b 100644
--- a/packages/pluggableWidgets/maps-web/src/Maps.tsx
+++ b/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}
         />
     );
 }
diff --git a/packages/pluggableWidgets/maps-web/src/Maps.xml b/packages/pluggableWidgets/maps-web/src/Maps.xml
index 54fdfb2ad0..83bdd224cd 100644
--- a/packages/pluggableWidgets/maps-web/src/Maps.xml
+++ b/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">
diff --git a/packages/pluggableWidgets/maps-web/src/components/LeafletMap.tsx b/packages/pluggableWidgets/maps-web/src/components/LeafletMap.tsx
index 45062329f0..d8b4667eca 100644
--- a/packages/pluggableWidgets/maps-web/src/components/LeafletMap.tsx
+++ b/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>
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
index 3ae4c90fa0..5f7480e898 100644
--- 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
@@ -10,13 +10,13 @@ exports[`Leaflet maps renders a map with HERE maps as provider 1`] = `
       class="widget-leaflet-maps-wrapper"
     >
       <div
-        class="widget-leaflet-maps leaflet-container leaflet-touch leaflet-grab leaflet-touch-drag leaflet-touch-zoom"
+        class="widget-leaflet-maps leaflet-container leaflet-touch leaflet-fade-anim leaflet-grab leaflet-touch-drag leaflet-touch-zoom"
         style="position: relative;"
         tabindex="0"
       >
         <div
           class="leaflet-pane leaflet-map-pane"
-          style="left: 0px; top: 0px;"
+          style="transform: translate3d(0px,0px,0);"
         >
           <div
             class="leaflet-pane leaflet-tile-pane"
@@ -27,13 +27,13 @@ exports[`Leaflet maps renders a map with HERE maps as provider 1`] = `
             >
               <div
                 class="leaflet-tile-container leaflet-zoom-animated"
-                style="z-index: 18; left: 0px; top: 0px;"
+                style="z-index: 18; transform: translate3d(0px,0px,0) scale(1);"
               >
                 <img
                   alt=""
                   class="leaflet-tile"
                   src="https://2.base.maps.cit.api.here.com/maptile/2.1/maptile/newest/normal.day/10/524/338/256/png8"
-                  style="width: 256px; height: 256px; left: -196px; top: -172px;"
+                  style="width: 256px; height: 256px; transform: translate3d(-196px,-172px,0);"
                 />
               </div>
             </div>
@@ -53,6 +53,10 @@ exports[`Leaflet maps renders a map with HERE maps as provider 1`] = `
           <div
             class="leaflet-pane leaflet-popup-pane"
           />
+          <div
+            class="leaflet-proxy leaflet-zoom-animated"
+            style="transform: translate3d(134340.33129244443px,86700.37048118314px,0) scale(512);"
+          />
         </div>
         <div
           class="leaflet-control-container"
@@ -119,13 +123,13 @@ exports[`Leaflet maps renders a map with MapBox maps as provider 1`] = `
       class="widget-leaflet-maps-wrapper"
     >
       <div
-        class="widget-leaflet-maps leaflet-container leaflet-touch leaflet-grab leaflet-touch-drag leaflet-touch-zoom"
+        class="widget-leaflet-maps leaflet-container leaflet-touch leaflet-fade-anim leaflet-grab leaflet-touch-drag leaflet-touch-zoom"
         style="position: relative;"
         tabindex="0"
       >
         <div
           class="leaflet-pane leaflet-map-pane"
-          style="left: 0px; top: 0px;"
+          style="transform: translate3d(0px,0px,0);"
         >
           <div
             class="leaflet-pane leaflet-tile-pane"
@@ -136,13 +140,13 @@ exports[`Leaflet maps renders a map with MapBox maps as provider 1`] = `
             >
               <div
                 class="leaflet-tile-container leaflet-zoom-animated"
-                style="z-index: 18; left: 0px; top: 0px;"
+                style="z-index: 18; transform: translate3d(0px,0px,0) scale(1);"
               >
                 <img
                   alt=""
                   class="leaflet-tile"
                   src="https://api.mapbox.com/styles/v1/mapbox/streets-v11/tiles/9/262/169"
-                  style="width: 512px; height: 512px; left: -196px; top: -172px;"
+                  style="width: 512px; height: 512px; transform: translate3d(-196px,-172px,0);"
                 />
               </div>
             </div>
@@ -162,6 +166,10 @@ exports[`Leaflet maps renders a map with MapBox maps as provider 1`] = `
           <div
             class="leaflet-pane leaflet-popup-pane"
           />
+          <div
+            class="leaflet-proxy leaflet-zoom-animated"
+            style="transform: translate3d(134340.33129244443px,86700.37048118314px,0) scale(512);"
+          />
         </div>
         <div
           class="leaflet-control-container"
@@ -228,13 +236,13 @@ exports[`Leaflet maps renders a map with attribution 1`] = `
       class="widget-leaflet-maps-wrapper"
     >
       <div
-        class="widget-leaflet-maps leaflet-container leaflet-touch leaflet-grab leaflet-touch-drag leaflet-touch-zoom"
+        class="widget-leaflet-maps leaflet-container leaflet-touch leaflet-fade-anim leaflet-grab leaflet-touch-drag leaflet-touch-zoom"
         style="position: relative;"
         tabindex="0"
       >
         <div
           class="leaflet-pane leaflet-map-pane"
-          style="left: 0px; top: 0px;"
+          style="transform: translate3d(0px,0px,0);"
         >
           <div
             class="leaflet-pane leaflet-tile-pane"
@@ -245,13 +253,13 @@ exports[`Leaflet maps renders a map with attribution 1`] = `
             >
               <div
                 class="leaflet-tile-container leaflet-zoom-animated"
-                style="z-index: 18; left: 0px; top: 0px;"
+                style="z-index: 18; transform: translate3d(0px,0px,0) scale(1);"
               >
                 <img
                   alt=""
                   class="leaflet-tile"
                   src="https://b.tile.osm.org/10/524/338.png"
-                  style="width: 256px; height: 256px; left: -196px; top: -172px;"
+                  style="width: 256px; height: 256px; transform: translate3d(-196px,-172px,0);"
                 />
               </div>
             </div>
@@ -271,6 +279,10 @@ exports[`Leaflet maps renders a map with attribution 1`] = `
           <div
             class="leaflet-pane leaflet-popup-pane"
           />
+          <div
+            class="leaflet-proxy leaflet-zoom-animated"
+            style="transform: translate3d(134340.33129244443px,86700.37048118314px,0) scale(512);"
+          />
         </div>
         <div
           class="leaflet-control-container"
@@ -325,8 +337,30 @@ exports[`Leaflet maps renders a map with attribution 1`] = `
             >
               <a
                 href="https://leafletjs.com"
+                target="_blank"
                 title="A JavaScript library for interactive maps"
               >
+                <svg
+                  aria-hidden="true"
+                  class="leaflet-attribution-flag"
+                  height="8"
+                  viewBox="0 0 12 8"
+                  width="12"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    d="M0 0h12v4H0z"
+                    fill="#4C7BE1"
+                  />
+                  <path
+                    d="M0 4h12v3H0z"
+                    fill="#FFD500"
+                  />
+                  <path
+                    d="M0 7h12v1H0z"
+                    fill="#E0BC00"
+                  />
+                </svg>
                 Leaflet
               </a>
                
@@ -361,13 +395,13 @@ exports[`Leaflet maps renders a map with current location 1`] = `
       class="widget-leaflet-maps-wrapper"
     >
       <div
-        class="widget-leaflet-maps leaflet-container leaflet-touch leaflet-grab leaflet-touch-drag leaflet-touch-zoom"
+        class="widget-leaflet-maps leaflet-container leaflet-touch leaflet-fade-anim leaflet-grab leaflet-touch-drag leaflet-touch-zoom"
         style="position: relative;"
         tabindex="0"
       >
         <div
           class="leaflet-pane leaflet-map-pane"
-          style="left: 0px; top: 0px;"
+          style="transform: translate3d(0px,0px,0);"
         >
           <div
             class="leaflet-pane leaflet-tile-pane"
@@ -378,13 +412,13 @@ exports[`Leaflet maps renders a map with current location 1`] = `
             >
               <div
                 class="leaflet-tile-container leaflet-zoom-animated"
-                style="z-index: 18; left: 0px; top: 0px;"
+                style="z-index: 18; transform: translate3d(0px,0px,0) scale(1);"
               >
                 <img
                   alt=""
                   class="leaflet-tile"
-                  src="https://a.tile.osm.org/18/134340/86700.png"
-                  style="width: 256px; height: 256px; left: -85px; top: -95px;"
+                  src="https://b.tile.osm.org/10/524/338.png"
+                  style="width: 256px; height: 256px; transform: translate3d(-196px,-172px,0);"
                 />
               </div>
             </div>
@@ -399,9 +433,9 @@ exports[`Leaflet maps renders a map with current location 1`] = `
             class="leaflet-pane leaflet-marker-pane"
           >
             <div
-              class="leaflet-marker-icon custom-leaflet-map-icon-marker leaflet-zoom-hide"
+              class="leaflet-marker-icon custom-leaflet-map-icon-marker leaflet-zoom-animated"
               role="button"
-              style="margin-left: -6px; margin-top: -6px; width: 12px; height: 12px; left: 0px; top: 0px; z-index: 0;"
+              style="margin-left: -6px; margin-top: -6px; width: 12px; height: 12px; transform: translate3d(0px,0px,0); z-index: 0;"
               tabindex="0"
             >
               <img
@@ -417,6 +451,10 @@ exports[`Leaflet maps renders a map with current location 1`] = `
           <div
             class="leaflet-pane leaflet-popup-pane"
           />
+          <div
+            class="leaflet-proxy leaflet-zoom-animated"
+            style="transform: translate3d(134340.33129244443px,86700.37048118314px,0) scale(512);"
+          />
         </div>
         <div
           class="leaflet-control-container"
@@ -428,9 +466,9 @@ exports[`Leaflet maps renders a map with current location 1`] = `
               class="leaflet-control-zoom leaflet-bar leaflet-control"
             >
               <a
-                aria-disabled="true"
+                aria-disabled="false"
                 aria-label="Zoom in"
-                class="leaflet-control-zoom-in leaflet-disabled"
+                class="leaflet-control-zoom-in"
                 href="#"
                 role="button"
                 title="Zoom in"
@@ -483,13 +521,13 @@ exports[`Leaflet maps renders a map with markers 1`] = `
       class="widget-leaflet-maps-wrapper"
     >
       <div
-        class="widget-leaflet-maps leaflet-container leaflet-touch leaflet-grab leaflet-touch-drag leaflet-touch-zoom"
+        class="widget-leaflet-maps leaflet-container leaflet-touch leaflet-fade-anim leaflet-grab leaflet-touch-drag leaflet-touch-zoom"
         style="position: relative;"
         tabindex="0"
       >
         <div
           class="leaflet-pane leaflet-map-pane"
-          style="left: 0px; top: 0px;"
+          style="transform: translate3d(0px,0px,0);"
         >
           <div
             class="leaflet-pane leaflet-tile-pane"
@@ -500,13 +538,13 @@ exports[`Leaflet maps renders a map with markers 1`] = `
             >
               <div
                 class="leaflet-tile-container leaflet-zoom-animated"
-                style="z-index: 18; left: 0px; top: 0px;"
+                style="z-index: 18; transform: translate3d(0px,0px,0) scale(1);"
               >
                 <img
                   alt=""
                   class="leaflet-tile"
-                  src="https://c.tile.osm.org/18/134337/86690.png"
-                  style="width: 256px; height: 256px; left: -38px; top: -217px;"
+                  src="https://b.tile.osm.org/10/524/338.png"
+                  style="width: 256px; height: 256px; transform: translate3d(-196px,-172px,0);"
                 />
               </div>
             </div>
@@ -521,9 +559,9 @@ exports[`Leaflet maps renders a map with markers 1`] = `
             class="leaflet-pane leaflet-marker-pane"
           >
             <div
-              class="leaflet-marker-icon custom-leaflet-map-icon-marker leaflet-zoom-hide leaflet-interactive"
+              class="leaflet-marker-icon custom-leaflet-map-icon-marker leaflet-zoom-animated leaflet-interactive"
               role="button"
-              style="margin-left: -6px; margin-top: -6px; width: 12px; height: 12px; left: 815px; top: 2438px; z-index: 2438;"
+              style="margin-left: -6px; margin-top: -6px; width: 12px; height: 12px; transform: translate3d(0px,0px,0); z-index: 0;"
               tabindex="0"
               title="Mendix HQ"
             >
@@ -534,9 +572,9 @@ exports[`Leaflet maps renders a map with markers 1`] = `
               />
             </div>
             <div
-              class="leaflet-marker-icon custom-leaflet-map-icon-marker leaflet-zoom-hide leaflet-interactive"
+              class="leaflet-marker-icon custom-leaflet-map-icon-marker leaflet-zoom-animated leaflet-interactive"
               role="button"
-              style="margin-left: -6px; margin-top: -6px; width: 12px; height: 12px; left: -814px; top: -2438px; z-index: -2438;"
+              style="margin-left: -6px; margin-top: -6px; width: 12px; height: 12px; transform: translate3d(-6px,-19px,0); z-index: -19;"
               tabindex="0"
               title="Gementee Rotterdam"
             >
@@ -553,6 +591,10 @@ exports[`Leaflet maps renders a map with markers 1`] = `
           <div
             class="leaflet-pane leaflet-popup-pane"
           />
+          <div
+            class="leaflet-proxy leaflet-zoom-animated"
+            style="transform: translate3d(134340.33129244443px,86700.37048118314px,0) scale(512);"
+          />
         </div>
         <div
           class="leaflet-control-container"
@@ -564,9 +606,9 @@ exports[`Leaflet maps renders a map with markers 1`] = `
               class="leaflet-control-zoom leaflet-bar leaflet-control"
             >
               <a
-                aria-disabled="true"
+                aria-disabled="false"
                 aria-label="Zoom in"
-                class="leaflet-control-zoom-in leaflet-disabled"
+                class="leaflet-control-zoom-in"
                 href="#"
                 role="button"
                 title="Zoom in"
@@ -619,13 +661,13 @@ exports[`Leaflet maps renders a map with percentage of parent units renders the
       class="widget-leaflet-maps-wrapper"
     >
       <div
-        class="widget-leaflet-maps leaflet-container leaflet-touch leaflet-grab leaflet-touch-drag leaflet-touch-zoom"
+        class="widget-leaflet-maps leaflet-container leaflet-touch leaflet-fade-anim leaflet-grab leaflet-touch-drag leaflet-touch-zoom"
         style="position: relative;"
         tabindex="0"
       >
         <div
           class="leaflet-pane leaflet-map-pane"
-          style="left: 0px; top: 0px;"
+          style="transform: translate3d(0px,0px,0);"
         >
           <div
             class="leaflet-pane leaflet-tile-pane"
@@ -636,13 +678,13 @@ exports[`Leaflet maps renders a map with percentage of parent units renders the
             >
               <div
                 class="leaflet-tile-container leaflet-zoom-animated"
-                style="z-index: 18; left: 0px; top: 0px;"
+                style="z-index: 18; transform: translate3d(0px,0px,0) scale(1);"
               >
                 <img
                   alt=""
                   class="leaflet-tile"
                   src="https://b.tile.osm.org/10/524/338.png"
-                  style="width: 256px; height: 256px; left: -196px; top: -172px;"
+                  style="width: 256px; height: 256px; transform: translate3d(-196px,-172px,0);"
                 />
               </div>
             </div>
@@ -662,6 +704,10 @@ exports[`Leaflet maps renders a map with percentage of parent units renders the
           <div
             class="leaflet-pane leaflet-popup-pane"
           />
+          <div
+            class="leaflet-proxy leaflet-zoom-animated"
+            style="transform: translate3d(134340.33129244443px,86700.37048118314px,0) scale(512);"
+          />
         </div>
         <div
           class="leaflet-control-container"
@@ -728,13 +774,13 @@ exports[`Leaflet maps renders a map with percentage of width and height units re
       class="widget-leaflet-maps-wrapper"
     >
       <div
-        class="widget-leaflet-maps leaflet-container leaflet-touch leaflet-grab leaflet-touch-drag leaflet-touch-zoom"
+        class="widget-leaflet-maps leaflet-container leaflet-touch leaflet-fade-anim leaflet-grab leaflet-touch-drag leaflet-touch-zoom"
         style="position: relative;"
         tabindex="0"
       >
         <div
           class="leaflet-pane leaflet-map-pane"
-          style="left: 0px; top: 0px;"
+          style="transform: translate3d(0px,0px,0);"
         >
           <div
             class="leaflet-pane leaflet-tile-pane"
@@ -745,13 +791,13 @@ exports[`Leaflet maps renders a map with percentage of width and height units re
             >
               <div
                 class="leaflet-tile-container leaflet-zoom-animated"
-                style="z-index: 18; left: 0px; top: 0px;"
+                style="z-index: 18; transform: translate3d(0px,0px,0) scale(1);"
               >
                 <img
                   alt=""
                   class="leaflet-tile"
                   src="https://b.tile.osm.org/10/524/338.png"
-                  style="width: 256px; height: 256px; left: -196px; top: -172px;"
+                  style="width: 256px; height: 256px; transform: translate3d(-196px,-172px,0);"
                 />
               </div>
             </div>
@@ -771,6 +817,10 @@ exports[`Leaflet maps renders a map with percentage of width and height units re
           <div
             class="leaflet-pane leaflet-popup-pane"
           />
+          <div
+            class="leaflet-proxy leaflet-zoom-animated"
+            style="transform: translate3d(134340.33129244443px,86700.37048118314px,0) scale(512);"
+          />
         </div>
         <div
           class="leaflet-control-container"
@@ -837,13 +887,13 @@ exports[`Leaflet maps renders a map with pixels renders structure correctly 1`]
       class="widget-leaflet-maps-wrapper"
     >
       <div
-        class="widget-leaflet-maps leaflet-container leaflet-touch leaflet-grab leaflet-touch-drag leaflet-touch-zoom"
+        class="widget-leaflet-maps leaflet-container leaflet-touch leaflet-fade-anim leaflet-grab leaflet-touch-drag leaflet-touch-zoom"
         style="position: relative;"
         tabindex="0"
       >
         <div
           class="leaflet-pane leaflet-map-pane"
-          style="left: 0px; top: 0px;"
+          style="transform: translate3d(0px,0px,0);"
         >
           <div
             class="leaflet-pane leaflet-tile-pane"
@@ -854,13 +904,13 @@ exports[`Leaflet maps renders a map with pixels renders structure correctly 1`]
             >
               <div
                 class="leaflet-tile-container leaflet-zoom-animated"
-                style="z-index: 18; left: 0px; top: 0px;"
+                style="z-index: 18; transform: translate3d(0px,0px,0) scale(1);"
               >
                 <img
                   alt=""
                   class="leaflet-tile"
                   src="https://b.tile.osm.org/10/524/338.png"
-                  style="width: 256px; height: 256px; left: -196px; top: -172px;"
+                  style="width: 256px; height: 256px; transform: translate3d(-196px,-172px,0);"
                 />
               </div>
             </div>
@@ -880,6 +930,10 @@ exports[`Leaflet maps renders a map with pixels renders structure correctly 1`]
           <div
             class="leaflet-pane leaflet-popup-pane"
           />
+          <div
+            class="leaflet-proxy leaflet-zoom-animated"
+            style="transform: translate3d(134340.33129244443px,86700.37048118314px,0) scale(512);"
+          />
         </div>
         <div
           class="leaflet-control-container"
@@ -946,13 +1000,13 @@ exports[`Leaflet maps renders a map with right structure 1`] = `
       class="widget-leaflet-maps-wrapper"
     >
       <div
-        class="widget-leaflet-maps leaflet-container leaflet-touch leaflet-grab leaflet-touch-drag leaflet-touch-zoom"
+        class="widget-leaflet-maps leaflet-container leaflet-touch leaflet-fade-anim leaflet-grab leaflet-touch-drag leaflet-touch-zoom"
         style="position: relative;"
         tabindex="0"
       >
         <div
           class="leaflet-pane leaflet-map-pane"
-          style="left: 0px; top: 0px;"
+          style="transform: translate3d(0px,0px,0);"
         >
           <div
             class="leaflet-pane leaflet-tile-pane"
@@ -963,13 +1017,13 @@ exports[`Leaflet maps renders a map with right structure 1`] = `
             >
               <div
                 class="leaflet-tile-container leaflet-zoom-animated"
-                style="z-index: 18; left: 0px; top: 0px;"
+                style="z-index: 18; transform: translate3d(0px,0px,0) scale(1);"
               >
                 <img
                   alt=""
                   class="leaflet-tile"
                   src="https://b.tile.osm.org/10/524/338.png"
-                  style="width: 256px; height: 256px; left: -196px; top: -172px;"
+                  style="width: 256px; height: 256px; transform: translate3d(-196px,-172px,0);"
                 />
               </div>
             </div>
@@ -989,6 +1043,10 @@ exports[`Leaflet maps renders a map with right structure 1`] = `
           <div
             class="leaflet-pane leaflet-popup-pane"
           />
+          <div
+            class="leaflet-proxy leaflet-zoom-animated"
+            style="transform: translate3d(134340.33129244443px,86700.37048118314px,0) scale(512);"
+          />
         </div>
         <div
           class="leaflet-control-container"
diff --git a/packages/pluggableWidgets/maps-web/typings/MapsProps.d.ts b/packages/pluggableWidgets/maps-web/typings/MapsProps.d.ts
index 724ea70ea6..9d034b20ac 100644
--- a/packages/pluggableWidgets/maps-web/typings/MapsProps.d.ts
+++ b/packages/pluggableWidgets/maps-web/typings/MapsProps.d.ts
@@ -90,6 +90,7 @@ export interface MapsContainerProps {
     mapTypeControl: boolean;
     fullScreenControl: boolean;
     rotateControl: boolean;
+    maxAutoZoom: number;
     widthUnit: WidthUnitEnum;
     width: number;
     heightUnit: HeightUnitEnum;
@@ -126,6 +127,7 @@ export interface MapsPreviewProps {
     mapTypeControl: boolean;
     fullScreenControl: boolean;
     rotateControl: boolean;
+    maxAutoZoom: number | null;
     widthUnit: WidthUnitEnum;
     width: number | null;
     heightUnit: HeightUnitEnum;
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 7fbb71d00b..8759eb0cba 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -1757,11 +1757,11 @@ importers:
         specifier: ^2.2.3
         version: 2.2.3
       leaflet:
-        specifier: ^1.9.4
-        version: 1.9.4
+        specifier: 2.0.0-alpha
+        version: 2.0.0-alpha
       react-leaflet:
         specifier: ^4.2.1
-        version: 4.2.1(leaflet@1.9.4)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+        version: 4.2.1(leaflet@2.0.0-alpha)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
     devDependencies:
       '@googlemaps/jest-mocks':
         specifier: ^2.10.0
@@ -8571,8 +8571,8 @@ packages:
     resolution: {integrity: sha512-b94GiNHQNy6JNTrt5w6zNyffMrNkXZb3KTkCZJb2V1xaEGCk093vkZ2jk3tpaeP33/OiXC+WvK9AxUebnf5nbw==}
     engines: {node: '>= 0.6.3'}
 
-  leaflet@1.9.4:
-    resolution: {integrity: sha512-nxS1ynzJOmOlHp+iL3FyWqK89GtNL8U8rvlMOsQdTTssxZwCXh8N2NB3GDQOL+YR3XnWyZAxwQixURb+FA74PA==}
+  leaflet@2.0.0-alpha:
+    resolution: {integrity: sha512-RnEJ3UYcuHPFFsDq0e2/QovyIaR3hhwiQpq3wrKnvprA/lsiAJpcxvkRZL3UwQ2xnKm1r2pYcMa+rcSKVwEQag==}
 
   leven@3.1.0:
     resolution: {integrity: sha512-qsda+H8jTaUaN/x5vzW2rzc+8Rw4TAQ/4KjB46IwK5VH+IlVeeeje/EoZRpiXvIqjFgK84QffqPztGI3VBLG1A==}
@@ -14690,9 +14690,9 @@ snapshots:
     optionalDependencies:
       '@types/react': 18.2.36
 
-  '@react-leaflet/core@2.1.0(leaflet@1.9.4)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
+  '@react-leaflet/core@2.1.0(leaflet@2.0.0-alpha)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
     dependencies:
-      leaflet: 1.9.4
+      leaflet: 2.0.0-alpha
       react: 18.2.0
       react-dom: 18.2.0(react@18.2.0)
 
@@ -20170,7 +20170,7 @@ snapshots:
     dependencies:
       readable-stream: 2.3.8
 
-  leaflet@1.9.4: {}
+  leaflet@2.0.0-alpha: {}
 
   leven@3.1.0: {}
 
@@ -21943,10 +21943,10 @@ snapshots:
 
   react-is@18.2.0: {}
 
-  react-leaflet@4.2.1(leaflet@1.9.4)(react-dom@18.2.0(react@18.2.0))(react@18.2.0):
+  react-leaflet@4.2.1(leaflet@2.0.0-alpha)(react-dom@18.2.0(react@18.2.0))(react@18.2.0):
     dependencies:
-      '@react-leaflet/core': 2.1.0(leaflet@1.9.4)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      leaflet: 1.9.4
+      '@react-leaflet/core': 2.1.0(leaflet@2.0.0-alpha)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+      leaflet: 2.0.0-alpha
       react: 18.2.0
       react-dom: 18.2.0(react@18.2.0)