Ottimizzazione apertura riquadro mappa

assets/src/css/style.css

@@ -1625,6 +1625,10 @@ body:not(.sidebar-collapse) .sidebar .nav-treeview .nav-treeview .nav-link {
     padding: 0 5px;
 }
 
+.fullscreen-icon {
+	background-image: url('../img/leaflet/icon-fullscreen.svg');
+}
+
 @media screen and (max-width: 767px) {
     .navbar-left {
         display: inline-block;

gulpfile.js

@@ -123,6 +123,7 @@ const JS = gulp.parallel(() => {
         'bootstrap-maxlength/dist/bootstrap-maxlength.js',
         'leaflet/dist/leaflet.js',
         'leaflet-gesture-handling/dist/leaflet-gesture-handling.min.js',
+        'leaflet.fullscreen/Control.FullScreen.js',
         'ismobilejs/dist/isMobile.min.js',
         'ua-parser-js/dist/ua-parser.min.js',
     ];
@@ -184,6 +185,7 @@ const CSS = gulp.parallel(() => {
         'smartwizard/dist/css/smart_wizard_theme_arrows.min.css',
         'leaflet-gesture-handling/dist/leaflet-gesture-handling.min.css',
         'leaflet/dist/leaflet.css',
+        'leaflet.fullscreen/Control.FullScreen.css',
         '@ttskch/select2-bootstrap4-theme/dist/select2-bootstrap4.min.css'
     ];
 
@@ -252,6 +254,10 @@ function srcImages() {
 }
 
 function leaflet() {
+    gulp.src([
+        config.nodeDirectory + '/leaflet.fullscreen/icon-fullscreen.svg',
+    ]).pipe(gulp.dest(config.production + '/' + config.paths.images + '/leaflet'));
+
     return gulp.src([
         config.nodeDirectory + '/leaflet/dist/images/*.{jpg,png,jpeg}',
     ])

modules/anagrafiche/edit.php

@@ -387,7 +387,7 @@ echo '
                     L.tileLayer("'.setting('Tile server OpenStreetMap').'", {
                         maxZoom: 17,
                         attribution: "© OpenStreetMap"
-                    }).addTo(map); 
+                    }).addTo(map);
                 }
             
                 var icon = new L.Icon({
@@ -402,8 +402,19 @@ echo '
                 var marker = L.marker([lat, lng], {
                     icon: icon
                 }).addTo(map);
+
+                L.control
+                .fullscreen({
+                    position: "topright",
+                    title: "'.tr('Vai a schermo intero').'",
+                    titleCancel: "'.tr('Esci dalla modalità schermo intero').'",
+                    content: null,
+                    forceSeparateButton: true,
+                    forcePseudoFullscreen: true,
+                    fullscreenElement: false
+                }).addTo(map);
             
-                map.setView([lat, lng], 10);
+                map.setView([lat, lng], 14);
             }
 
             function risolviConto(tipo){

modules/anagrafiche/modals/posizione.php

@@ -159,7 +159,18 @@ function caricaMappa() {
         icon: icon
     }).addTo(map);
 
-	map.setView([lat, lng], 10);
+    L.control
+        .fullscreen({
+            position: "topright",
+            title: "'.tr('Vai a schermo intero').'",
+            titleCancel: "'.tr('Esci dalla modalità schermo intero').'",
+            content: null,
+            forceSeparateButton: true,
+            forcePseudoFullscreen: true,
+            fullscreenElement: false
+        }).addTo(map);
+
+	map.setView([lat, lng], 14);
 
     map.on("click", function(e) {
         marker.setLatLng(e.latlng);

modules/interventi/header.php

@@ -244,9 +244,10 @@ if (!empty($sede_cliente->gaddress) || (!empty($sede_cliente->lat) && !empty($se
                     <div class="col-md-6">';
     // Navigazione diretta verso l'indirizzo
     echo '
-                        <a class="btn btn-xs btn-default btn-block" onclick="$(\'#map-edit\').height(180); caricaMappa(); $(this).hide();">
-                            <i class="fa fa-compass"></i> '.tr('Carica mappa').'
-                        </a>
+                        <button class="btn btn-xs btn-default btn-block" onclick="caricaMappa();">
+                            <div class="load"><i class="fa fa-compass"></i> '.tr('Carica mappa').'</div>
+                            <a class="go-to hidden" href="geo://'.$sede['lat'].','.$sede['lng'].'"><i class="fa fa-map"></i> '.tr('Apri mappa').'</a>
+                        </button>
                     </div>
                     
                     <div class="col-md-6">';
@@ -345,6 +346,16 @@ echo '
 
     var map = null;
     function caricaMappa() {
+        const $map_container = $(".module-header:visible .card").eq(2);
+
+        // Ingrandimento area mappa
+        $map_container.css("height", "300px");
+        alignMaxHeight(".module-header .card");
+        $("#map-edit").css("height", "80%");
+
+        $map_container.find(".load").addClass("hidden");
+        $map_container.find(".go-to").removeClass("hidden");
+
         const lat = parseFloat("'.$sede_cliente->lat.'");
         const lng = parseFloat("'.$sede_cliente->lng.'");
     
@@ -359,7 +370,18 @@ echo '
             map = L.map("map-edit", {
                 gestureHandling: true
             });
-    
+
+            L.control
+                .fullscreen({
+                    position: "topright",
+                    title: "'.tr('Vai a schermo intero').'",
+                    titleCancel: "'.tr('Esci dalla modalità schermo intero').'",
+                    content: null,
+                    forceSeparateButton: true,
+                    forcePseudoFullscreen: true,
+                    fullscreenElement: false
+                }).addTo(map);
+
             L.tileLayer("'.setting('Tile server OpenStreetMap').'", {
                 maxZoom: 17,
                 attribution: "© OpenStreetMap"
@@ -382,11 +404,15 @@ echo '
         map.setView([lat, lng], 10);
     }
 
-    max_height = 0;
-    $(".module-header .card").each( function(){
-        if($(this).height() > max_height){
-            max_height = $(this).height();
-        }
-    });
-    $(".module-header .card").height(max_height);
+    function alignMaxHeight(element){
+        max_height = 0;
+        $(element).each( function(){
+            if($(this).height() > max_height){
+                max_height = $(this).height();
+            }
+        });
+        $(element).height(max_height);
+    }
+
+    alignMaxHeight(".module-header .card");
 </script>';

package.json

@@ -35,6 +35,7 @@
         "jquery.shorten": "^1.0.0",
         "leaflet": "^1.9.4",
         "leaflet-gesture-handling": "^1.2.2",
+        "leaflet.fullscreen": "^3.0.2",
         "moment": "^2.18.1",
         "numeral": "^2.0.6",
         "parsleyjs": "^2.7.2",