From d9a8d2d9cab3e099e6c68116e190a6ba3428af96 Mon Sep 17 00:00:00 2001
From: MatteoPistorello <pistorellomatteo8@gmail.com>
Date: Thu, 29 Jun 2023 09:49:21 +0200
Subject: [PATCH] Migliorie mappe

---
 modules/anagrafiche/edit.php             |  53 ++++++-----
 modules/anagrafiche/modals/posizione.php |  55 ++++++------
 modules/interventi/add.php               | 109 ++++++++++-------------
 modules/interventi/edit.php              |  51 ++++++-----
 plugins/sedi/edit.php                    |  85 +++++++++++++-----
 5 files changed, 198 insertions(+), 155 deletions(-)

diff --git a/modules/anagrafiche/edit.php b/modules/anagrafiche/edit.php
index 6afe77e07..62d3636e7 100755
--- a/modules/anagrafiche/edit.php
+++ b/modules/anagrafiche/edit.php
@@ -253,20 +253,22 @@ echo '
                     </div>
                     <div class="panel-body">';
 
-$map_load_message = tr('Clicca per visualizzare');
-
 if (!empty($sede_cliente->gaddress) || (!empty($sede_cliente->lat) && !empty($sede_cliente->lng))) {
     echo '
-                        <div id="map-edit" style="height: 200px;width: 100%;display: flex;align-items: center;justify-content: center;" onclick="caricaMappa()">
-                            <p class="clickable badge">'.$map_load_message.'</p>
-                        </div>
+                        <div id="map-edit" style="width: 100%;"></div>
 
                         <div class="clearfix"></div>
                         <br>';
 
+    // Navigazione diretta verso l'indirizzo
+    echo '
+                        <a class="btn btn-info btn-block" onclick="$(\'#map-edit\').height(235); caricaMappa(); $(this).hide();">
+                            '.tr('Carica mappa').'
+                        </a>';
+
     // Modifica manuale delle informazioni
     echo '
-                        <a class="btn btn-primary btn-block" onclick="modificaPosizione()">
+                        <a class="btn btn-info btn-block" onclick="modificaPosizione()">
                             <i class="fa fa-map"></i> '.tr('Aggiorna posizione').'
                         </a>';
 }else{
@@ -341,21 +343,29 @@ echo '
                 return [lat, lng, indirizzo_default];
             }
 
+            var map = null;
             function caricaMappa() {
-                const map_div = $("#map-edit");
-                if (map_div.text().trim() !== "'.$map_load_message.'"){
-                    return;
-                }
-
                 const lat = parseFloat("'.$sede_cliente->lat.'");
                 const lng = parseFloat("'.$sede_cliente->lng.'");
-
-                var map = L.map("map-edit", {
-                    center: [lat, lng],
-                    zoom: 10,
-                    gestureHandling: true
-                });
-
+            
+                var container = L.DomUtil.get("map-edit"); 
+                if(container._leaflet_id != null){ 
+                    map.eachLayer(function (layer) {
+                        if(layer instanceof L.Marker) {
+                            map.removeLayer(layer);
+                        }
+                    });
+                } else {
+                    map = L.map("map-edit", {
+                        gestureHandling: true
+                    });
+            
+                    L.tileLayer("'.setting("Tile server OpenStreetMap").'", {
+                        maxZoom: 17,
+                        attribution: "© OpenStreetMap"
+                    }).addTo(map); 
+                }
+            
                 var icon = new L.Icon({
                     iconUrl: globals.rootdir + "/assets/dist/img/marker-icon.png",
                     shadowUrl:globals.rootdir + "/assets/dist/img/leaflet/marker-shadow.png",
@@ -365,14 +375,11 @@ echo '
                     shadowSize: [41, 41]
                 });
 
-                L.tileLayer("'.setting("Tile server OpenStreetMap").'", {
-                    maxZoom: 17,
-                    attribution: "© OpenStreetMap"
-                }).addTo(map); 
-              
                 var marker = L.marker([lat, lng], {
                     icon: icon
                 }).addTo(map);
+            
+                map.setView([lat, lng], 10);
             }
 
             function risolviConto(tipo){
diff --git a/modules/anagrafiche/modals/posizione.php b/modules/anagrafiche/modals/posizione.php
index 2c8833ac8..dfc4dcabe 100644
--- a/modules/anagrafiche/modals/posizione.php
+++ b/modules/anagrafiche/modals/posizione.php
@@ -63,11 +63,9 @@ echo '
 <script>$(document).ready(init)</script>
 
 <script>
-$(document).ready(function(){
+$("#modals > div").on("shown.bs.modal", function () {
     if (input("lat").get() && input("lng").get()) {
-        setTimeout(function () {
-            caricaMappa();
-        }, 1000);
+        caricaMappa();
     }
 });
 
@@ -85,38 +83,43 @@ function initGeocomplete() {
     });
 }
 
+var map = null;
 function caricaMappa() {
     const lat = parseFloat(input("lat").get());
     const lng = parseFloat(input("lng").get());
 
     var container = L.DomUtil.get("map"); 
-    if(container != null){ 
-        container._leaflet_id = null; 
-    }
+    if(container._leaflet_id != null){ 
+        map.eachLayer(function (layer) {
+			if(layer instanceof L.Marker) {
+				map.removeLayer(layer);
+			}
+		});
+	} else {
+		map = L.map("map", {
+			gestureHandling: true
+		});
 
-    var map = L.map("map", {
-        center: [lat, lng],
-        zoom: 10,
-        gestureHandling: true
-    });
-    
-    var icon = new L.Icon({
-        iconUrl: globals.rootdir + "/assets/dist/img/marker-icon.png",
-        shadowUrl:globals.rootdir + "/assets/dist/img/leaflet/marker-shadow.png",
-        iconSize: [25, 41],
-        iconAnchor: [12, 41],
-        popupAnchor: [1, -34],
-        shadowSize: [41, 41]
-    });
+		L.tileLayer("'.setting("Tile server OpenStreetMap").'", {
+			maxZoom: 17,
+			attribution: "© OpenStreetMap"
+		}).addTo(map); 
+	}
+
+	var icon = new L.Icon({
+		iconUrl: globals.rootdir + "/assets/dist/img/marker-icon.png",
+		shadowUrl:globals.rootdir + "/assets/dist/img/leaflet/marker-shadow.png",
+		iconSize: [25, 41],
+		iconAnchor: [12, 41],
+		popupAnchor: [1, -34],
+		shadowSize: [41, 41]
+	});
 
-    L.tileLayer("'.setting("Tile server OpenStreetMap").'", {
-        maxZoom: 17,
-        attribution: "© OpenStreetMap"
-    }).addTo(map); 
-    
     var marker = L.marker([lat, lng], {
         icon: icon
     }).addTo(map);
+
+	map.setView([lat, lng], 10);
 }
 
 // Ricaricamento della pagina alla chiusura
diff --git a/modules/interventi/add.php b/modules/interventi/add.php
index 949f36ae9..38488bf1f 100755
--- a/modules/interventi/add.php
+++ b/modules/interventi/add.php
@@ -243,32 +243,25 @@ echo '
             ]);
             echo '
         </div>
+    </div>
+
+    <!-- POSIZIONE -->
+    <div class="box box-info collapsable collapsed-box">
+        <div class="box-header with-border">
+            <h3 class="box-title">'.tr('Posizione').'</h3>
+            <div class="box-tools pull-right">
+                <button type="button" class="btn btn-box-tool" data-widget="collapse" onclick="autoload_mappa=true; caricaMappa();">
+                    <i class="fa fa-plus"></i>
+                </button>
+            </div>
+        </div>
+
+        <div class="box-body">
+            <div id="map-add" style="height: 300px;width: 100%;display: flex;align-items: center;justify-content: center;"></div>
+        </div>
     </div>';
 
 
-$api_key = setting('Google Maps API key');
-$map_load_message = tr('Clicca per visualizzare');
-
-if (!empty($api_key)) {
-    echo '
-        <!-- POSIZIONE -->
-        <div class="box box-info collapsable collapsed-box">
-            <div class="box-header with-border">
-                <h3 class="box-title">'.tr('Posizione').'</h3>
-                <div class="box-tools pull-right">
-                    <button type="button" class="btn btn-box-tool" data-widget="collapse" onclick="autoload_mappa=true; caricaMappa(current_lat, current_lng);">
-                        <i class="fa fa-plus"></i>
-                    </button>
-                </div>
-            </div>
-
-            <div class="box-body">
-                <div id="map-edit" style="height: 300px;width: 100%;display: flex;align-items: center;justify-content: center;"></div>
-            </div>
-        </div>';
-}
-
-
 $espandi_dettagli = setting('Espandi automaticamente la sezione "Dettagli aggiuntivi"');
 echo '
     <!-- DATI AGGIUNTIVI -->
@@ -797,53 +790,45 @@ echo '
         }
     });
 
-    var marker = null;
-    var position = null;
     var map = null;
-    var current_lat = null;
-    var current_lng = null;
-
     function caricaMappa(lat, lng) {
-        current_lat = lat;
-        current_lng = lng;
-
         if (!autoload_mappa){
             return false;
         }
-
-        const map_div = $("#map-edit");
-
+        
         if (input("idanagrafica").getData("select-options")) {
-            if (map === null) {
-                if (lat || lng) {
-                    $.getScript("//maps.googleapis.com/maps/api/js?libraries=places&key='.$api_key.'", function() {
-                        const map_element = map_div[0];
-                        position = new google.maps.LatLng(lat, lng);
-
-                        // Create a Google Maps native view under the map_canvas div.
-                        map = new google.maps.Map(map_element, {
-                            zoom: 14,
-                            scrollwheel: false,
-                            mapTypeControl: true,
-                            mapTypeId: "roadmap",
-                            mapTypeControlOptions: {
-                                style: google.maps.MapTypeControlStyle.DROPDOWN_MENU,
-                                mapTypeIds: ["roadmap", "terrain"],
-                            }
-                        });
-
-                        map.setCenter(position);
-                        marker = new google.maps.Marker({
-                            position: position,
-                            map: map,
-                        });
-                    });
-                }
+            var container = L.DomUtil.get("map-add");
+            if(container._leaflet_id != null){ 
+                map.eachLayer(function (layer) {
+                    if(layer instanceof L.Marker) {
+                        map.removeLayer(layer);
+                    }
+                });
             } else {
-                position = new google.maps.LatLng(lat, lng);
-                marker.setPosition(position);
-                map.setCenter(position);
+                map = L.map("map-add", {
+                    gestureHandling: true
+                });
+        
+                L.tileLayer("'.setting("Tile server OpenStreetMap").'", {
+                    maxZoom: 17,
+                    attribution: "© OpenStreetMap"
+                }).addTo(map); 
             }
+        
+            var icon = new L.Icon({
+                iconUrl: globals.rootdir + "/assets/dist/img/marker-icon.png",
+                shadowUrl:globals.rootdir + "/assets/dist/img/leaflet/marker-shadow.png",
+                iconSize: [25, 41],
+                iconAnchor: [12, 41],
+                popupAnchor: [1, -34],
+                shadowSize: [41, 41]
+            });
+            
+            var marker = L.marker([lat, lng], {
+                icon: icon
+            }).addTo(map);
+            
+            map.setView([lat, lng], 14);
         }
     }
 </script>';
diff --git a/modules/interventi/edit.php b/modules/interventi/edit.php
index f25208f8d..97963e28c 100755
--- a/modules/interventi/edit.php
+++ b/modules/interventi/edit.php
@@ -151,17 +151,19 @@ echo '
                     </div>
                     <div class="panel-body">';
 
-$map_load_message = tr('Clicca per visualizzare');
-
 if (!empty($sede_cliente->gaddress) || (!empty($sede_cliente->lat) && !empty($sede_cliente->lng))) {
     echo '
-                        <div id="map-edit" style="height: 200px;width: 100%;display: flex;align-items: center;justify-content: center;" onclick="caricaMappa()">
-                            <p class="clickable badge">'.$map_load_message.'</p>
-                        </div>
+                        <div id="map-edit" style="width: 100%;"></div>
 
                         <div class="clearfix"></div>
                         <br>';
 
+    // Navigazione diretta verso l'indirizzo
+    echo '
+                        <a class="btn btn-info btn-block" onclick="$(\'#map-edit\').height(235); caricaMappa(); $(this).hide();">
+                            '.tr('Carica mappa').'
+                        </a>';
+
     // Navigazione diretta verso l'indirizzo
     echo '
                         <a class="btn btn-info btn-block" onclick="calcolaPercorso()">
@@ -230,21 +232,29 @@ echo '
                 return [lat, lng, indirizzo_default];
             }
 
+            var map = null;
             function caricaMappa() {
-                const map_div = $("#map-edit");
-                if (map_div.text().trim() !== "'.$map_load_message.'"){
-                    return;
-                }
-
                 const lat = parseFloat("'.$sede_cliente->lat.'");
                 const lng = parseFloat("'.$sede_cliente->lng.'");
-
-                var map = L.map("map-edit", {
-                    center: [lat, lng],
-                    zoom: 10,
-                    gestureHandling: true
-                });
-
+            
+                var container = L.DomUtil.get("map-edit"); 
+                if(container._leaflet_id != null){ 
+                    map.eachLayer(function (layer) {
+                        if(layer instanceof L.Marker) {
+                            map.removeLayer(layer);
+                        }
+                    });
+                } else {
+                    map = L.map("map-edit", {
+                        gestureHandling: true
+                    });
+            
+                    L.tileLayer("'.setting("Tile server OpenStreetMap").'", {
+                        maxZoom: 17,
+                        attribution: "© OpenStreetMap"
+                    }).addTo(map); 
+                }
+            
                 var icon = new L.Icon({
                     iconUrl: globals.rootdir + "/assets/dist/img/marker-icon.png",
                     shadowUrl:globals.rootdir + "/assets/dist/img/leaflet/marker-shadow.png",
@@ -254,14 +264,11 @@ echo '
                     shadowSize: [41, 41]
                 });
 
-                L.tileLayer("'.setting("Tile server OpenStreetMap").'", {
-                    maxZoom: 17,
-                    attribution: "© OpenStreetMap"
-                }).addTo(map); 
-              
                 var marker = L.marker([lat, lng], {
                     icon: icon
                 }).addTo(map);
+            
+                map.setView([lat, lng], 10);
             }
         </script>';
 
diff --git a/plugins/sedi/edit.php b/plugins/sedi/edit.php
index 95f7d7cd0..efda73d25 100755
--- a/plugins/sedi/edit.php
+++ b/plugins/sedi/edit.php
@@ -19,8 +19,6 @@
 
 include_once __DIR__.'/../../core.php';
 
-$google = setting('Google Maps API key');
-
 echo '
 <form action="" method="post" role="form" id="form_sedi">
     <input type="hidden" name="id_plugin" value="'.$id_plugin.'">
@@ -104,8 +102,8 @@ echo '
 	</div>
 
 	<div class="row">
-		<div class="col-md-6" id="geocomplete">
-			{[ "type": "text", "label": "'.tr('Indirizzo Google').'", "name": "gaddress", "value": "$gaddress$", "extra": "data-geo=\'formatted_address\'" ]}
+		<div class="col-md-4" id="geocomplete">
+			{[ "type": "text", "label": "'.tr('Indirizzo Mappa').'", "name": "gaddress", "value": "$gaddress$", "extra": "data-geo=\'formatted_address\'" ]}
 		</div>
 
 		<div class="col-md-2">
@@ -114,17 +112,21 @@ echo '
 
 		<div class="col-md-2">
 			{[ "type": "text", "label": "'.tr('Longitudine').'", "name": "lng", "id": "lng_", "value": "$lng$", "extra": "data-geo=\'lng\'", "class": "text-right" ]}
-		</div>';
+		</div>
+		
+		<div class="col-md-2">
+            <br><button type="button" class="btn btn-lg btn-default pull-right" onclick="initGeocomplete();"><i class="fa fa-search"></i> '.tr('Cerca').'</button>
+        </div>';
 
 if (!empty($record['indirizzo']) || (empty($record['citta']))) {
 	echo '
 		<div  class="btn-group col-md-2"  >
 			<label>&nbsp;</label><br>
-			<a class="btn btn-info" title="'.tr('Mostra la sede su Openstreetmap').'" onclick="window.open(\'https://maps.google.com/maps/search/\'+encodeURI( $(\'#indirizzo_\').val() )+\', \'+encodeURI( $(\'#citta_\').val() ) );">&nbsp;<i class="fa fa-map-marker">&nbsp;</i></a>
+			<a class="btn btn-info" title="'.tr('Mostra la sede su Mappa').'" onclick="cercaOpenStreetMap();">&nbsp;<i class="fa fa-map-marker">&nbsp;</i></a>
 		';
 
 	echo '
-			<a title="'.tr('Calcola percoso da sede legale a questa sede').'" class="btn btn-primary btn-secondary" onclick="window.open(\'https://maps.google.com/maps/dir/\'+encodeURI( $(\'#indirizzo_\').val() )+\', \'+encodeURI( $(\'#citta_\').val() )+\'/\'+encodeURI( $(\'#indirizzo\').val() )+\',\'+encodeURI( $(\'#citta\').val() )+\',8z\');"><i class="fa fa-car"></i></a>
+			<a title="'.tr('Calcola percoso da sede legale a questa sede').'" class="btn btn-primary btn-secondary" onclick="calcolaPercorso();"><i class="fa fa-car"></i></a>
 		</div>';
 }
 
@@ -199,24 +201,63 @@ echo '
 <script>$(document).ready(init)</script>
 
 <script>
-if(window.google){
-    initGeocomplete();
-} else {
-    $.getScript("//maps.googleapis.com/maps/api/js?libraries=places&key='.$google.'", function() {
-        initGeocomplete();
+$("#modals > div").on("shown.bs.modal", function () {
+    if (input("lat").get() && input("lng").get()) {
+        caricaMappaSede();
+    }
+});
+
+function initGeocomplete() {
+    $.ajax({
+        url: "https://nominatim.openstreetmap.org/search.php?q=" + encodeURI(input("gaddress").get()) + "&format=jsonv2",
+        type : "GET",
+        dataType: "JSON",
+        success: function(data){
+            input("lat").set(data[0].lat);
+            input("lng").set(data[0].lon);
+            input("gaddress").set(data[0].display_name);
+            caricaMappaSede();
+        }
     });
 }
 
-function initGeocomplete() {
-    $("#form_sedi #geocomplete input").geocomplete({
-        map: $("#form_sedi #map").length ? "#map" : false,
-        location: $("#form_sedi #gaddress").val() ? $("#form_sedi #gaddress").val() : [$("#form_sedi #lat_").val(), $("#form_sedi #lng_").val()],
-        details: ".details",
-        detailsAttribute: "data-geo"
-    }).bind("geocode:result", function (event, result) {
-        $("#form_sedi #lat_").val(result.geometry.location.lat());
-        $("#form_sedi #lng_").val(result.geometry.location.lng());
-    });
+var map = null;
+function caricaMappaSede() {
+    const lat = parseFloat(input("lat").get());
+    const lng = parseFloat(input("lng").get());
+
+    var container = L.DomUtil.get("map"); 
+    if(container._leaflet_id != null){ 
+        map.eachLayer(function (layer) {
+			if(layer instanceof L.Marker) {
+				map.removeLayer(layer);
+			}
+		});
+	} else {
+		map = L.map("map", {
+			gestureHandling: true
+		});
+
+		L.tileLayer("'.setting("Tile server OpenStreetMap").'", {
+			maxZoom: 17,
+			attribution: "© OpenStreetMap"
+		}).addTo(map); 
+	}
+
+	var icon = new L.Icon({
+		iconUrl: globals.rootdir + "/assets/dist/img/marker-icon.png",
+		shadowUrl:globals.rootdir + "/assets/dist/img/leaflet/marker-shadow.png",
+		iconSize: [25, 41],
+		iconAnchor: [12, 41],
+		popupAnchor: [1, -34],
+		shadowSize: [41, 41]
+	});
+    
+    var marker = L.marker([lat, lng], {
+        icon: icon
+    }).addTo(map);
+
+	map.setView([lat, lng], 10);
 }
 
 function rimuoviSede(button) {