Resize map to fit viewport on enter/exit of fullscreen

resources/js/webtrees.js

@@ -676,6 +676,15 @@
    * @returns Map
    */
   webtrees.buildLeafletJsMap = function (id, config, resetCallback) {
+    // Resize map on enter/exit fullscreen
+    document.addEventListener("fullscreenchange", (event) => {
+      map.closePopup();
+      //wait for fullscreen transition to complete
+      setTimeout(() => {
+        resetCallback(event);
+      }, 25);
+    });
+
     const zoomControl = new L.control.zoom({
       zoomInTitle: config.i18n.zoomIn,
       zoomoutTitle: config.i18n.zoomOut,
@@ -737,9 +746,8 @@
       defaultLayer = config.mapProviders[0].children[0].layer;
     }
 
-
     // Create the map with all controls and layers
-    return L.map(id, {
+    const map = L.map(id, {
       zoomControl: false,
     })
       .addControl(zoomControl)
@@ -751,6 +759,7 @@
         openedSymbol: config.icons.collapse,
       }));
 
+    return map;
   };
 
   /**

resources/views/modules/place-hierarchy/map.phtml

@@ -95,7 +95,7 @@ use Fisharebest\Webtrees\View;
 
       map.fitBounds(<?= json_encode($data['bounds'], JSON_THROW_ON_ERROR) ?>, { padding: [50, 30] });
       sidebar.innerHTML = <?= json_encode($data['sidebar'], JSON_THROW_ON_ERROR) ?>;
-   };
+    };
 
     window.onload = function() {
       // Activate marker popup when sidebar entry clicked

resources/views/modules/places/tab.phtml

@@ -102,7 +102,7 @@ use Fisharebest\Webtrees\I18N;
       }
     };
 
-    // Can't use window.onload here. seems to be because of AJAX loading
+    // Cannot use window.onload here. seems to be because of AJAX loading
     const _loadListeners = function() {
       // Activate marker popup when sidebar entry clicked
       sidebar.querySelectorAll('.gchart').forEach((element) => {