diff --git a/assets/src/img/marker-icon-2x.png b/assets/src/img/marker-icon-2x.png new file mode 100644 index 000000000..2568dfe7f Binary files /dev/null and b/assets/src/img/marker-icon-2x.png differ diff --git a/assets/src/img/marker-icon.png b/assets/src/img/marker-icon.png new file mode 100644 index 000000000..2d92e41f2 Binary files /dev/null and b/assets/src/img/marker-icon.png differ diff --git a/gulpfile.js b/gulpfile.js index 27d9ff388..5f6eb4b57 100755 --- a/gulpfile.js +++ b/gulpfile.js @@ -120,6 +120,8 @@ const JS = gulp.parallel(() => { 'datatables.net-buttons-bs/js/buttons.bootstrap.js', 'smartwizard/dist/js/jquery.smartWizard.min.js', 'bootstrap-maxlength/dist/bootstrap-maxlength.js', + 'leaflet/dist/leaflet.js', + 'leaflet-gesture-handling/dist/leaflet-gesture-handling.min.js', ]; for (const i in vendor) { @@ -178,6 +180,8 @@ const CSS = gulp.parallel(() => { 'select2-bootstrap-theme/dist/select2-bootstrap.css', 'smartwizard/dist/css/smart_wizard.min.css', 'smartwizard/dist/css/smart_wizard_theme_arrows.min.css', + 'leaflet-gesture-handling/dist/leaflet-gesture-handling.min.css', + 'leaflet/dist/leaflet.css', ]; for (const i in vendor) { @@ -244,6 +248,15 @@ function srcImages() { .pipe(gulp.dest(config.production + '/' + config.paths.images)); } +function leaflet() { + return gulp.src([ + config.nodeDirectory + '/leaflet/dist/images/*.{jpg,png,jpeg}', + ]) + .pipe(flatten()) + .pipe(gulp.dest(config.production + '/' + config.paths.images + '/leaflet')); +} + + // Elaborazione dei fonts const fonts = gulp.parallel(() => { @@ -516,7 +529,7 @@ function clean() { } // Operazioni di default per la generazione degli assets -const bower = gulp.series(clean, gulp.parallel(JS, CSS, images, fonts, phpDebugBar, ckeditor, colorpicker, i18n, pdfjs, hotkeys, chartjs, password_strength, csrf)); +const bower = gulp.series(clean, gulp.parallel(JS, CSS, images, fonts, phpDebugBar, ckeditor, colorpicker, i18n, pdfjs, hotkeys, chartjs, password_strength, csrf, leaflet)); // Debug su CSS e JS exports.srcJS = srcJS; diff --git a/modules/anagrafiche/edit.php b/modules/anagrafiche/edit.php index 42e62ef8c..1dafae80e 100755 --- a/modules/anagrafiche/edit.php +++ b/modules/anagrafiche/edit.php @@ -245,8 +245,6 @@ $sede_cliente = $anagrafica->sedeLegale; $anagrafica_azienda = Anagrafica::find(setting('Azienda predefinita')); $sede_azienda = $anagrafica_azienda->sedeLegale; -$google = setting('Google Maps API key'); - echo '
@@ -257,13 +255,7 @@ echo ' $map_load_message = tr('Clicca per visualizzare'); -if (empty($google)) { - echo ' -
- '.Modules::link('Impostazioni', null, tr('Per abilitare la visualizzazione delle anagrafiche nella mappa, inserire la Google Maps API Key nella scheda Impostazioni'), true, null, true, null, '&search=Google Maps API key').'. -
'; - -} elseif (!empty($sede_cliente->gaddress) || (!empty($sede_cliente->lat) && !empty($sede_cliente->lng))) { +if (!empty($sede_cliente->gaddress) || (!empty($sede_cliente->lat) && !empty($sede_cliente->lng))) { echo '

'.$map_load_message.'

@@ -294,10 +286,10 @@ if (empty($google)) { '.((!empty($sede_cliente->lat) && !empty($sede_azienda->lat)) ? tr('(GPS)'): '' ).' '; - // Ricerca diretta su Google Maps + // Ricerca diretta su Mappa echo ' - - '.tr('Cerca su Google Maps').' + + '.tr('Cerca su Mappa').' '.((!empty($sede_cliente->lat)) ? tr(' (GPS)'): '' ).' '; @@ -312,15 +304,19 @@ echo ' openModal("'.tr('Modifica posizione').'", "'.$module->fileurl('modals/posizione.php').'?id_module='.$id_module.'&id_record='.$id_record.'"); } - function cercaGoogleMaps() { + function cercaOpenStreetMap() { const indirizzo = getIndirizzoAnagrafica(); - window.open("https://maps.google.com/maps/search/" + indirizzo); + if (indirizzo[0] && indirizzo[1]) { + window.open("https://www.openstreetmap.org/?mlat=" + indirizzo[0] + "&mlon=" + indirizzo[1] + "#map=12/" + indirizzo[0] + "/" + indirizzo[1]); + } else { + window.open("https://www.openstreetmap.org/search?query=" + indirizzo[2]); + } } function calcolaPercorso() { const indirizzo_partenza = getIndirizzoAzienda(); const indirizzo_destinazione = getIndirizzoAnagrafica(); - window.open("https://www.google.com/maps/dir/?api=1&origin=" + indirizzo_partenza + "&destination=" + indirizzo_destinazione); + window.open("https://www.openstreetmap.org/directions?engine=fossgis_osrm_car&route=" + indirizzo_partenza + ";" + indirizzo_destinazione[0] + "," + indirizzo_destinazione[1]); } function getIndirizzoAzienda() { @@ -330,9 +326,6 @@ echo ' const lat = parseFloat("'.$sede_azienda->lat.'"); const lng = parseFloat("'.$sede_azienda->lng.'"); - const indirizzo_default = encodeURI(indirizzo) + "," + encodeURI(citta); - if (!lat || !lng) return indirizzo_default; - return lat + "," + lng; } @@ -344,9 +337,8 @@ echo ' const lng = parseFloat("'.$sede_cliente->lng.'"); const indirizzo_default = encodeURI(indirizzo) + "," + encodeURI(citta); - if (!lat || !lng) return indirizzo_default; - return lat + "," + lng; + return [lat, lng, indirizzo_default]; } function caricaMappa() { @@ -355,32 +347,32 @@ echo ' return; } - $.getScript("//maps.googleapis.com/maps/api/js?libraries=places&key='.$google.'", function() { - const map_element = map_div[0]; - const lat = parseFloat("'.$sede_cliente->lat.'"); - const lng = parseFloat("'.$sede_cliente->lng.'"); + const lat = parseFloat("'.$sede_cliente->lat.'"); + const lng = parseFloat("'.$sede_cliente->lng.'"); - if (!lat || !lng) return; - const position = new google.maps.LatLng(lat, lng); + var map = L.map("map-edit", { + center: [lat, lng], + zoom: 10, + gestureHandling: true + }); - // Create a Google Maps native view under the map_canvas div. - const 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"], - } - }); + 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] + }); - map.setCenter(position); - const marker = new google.maps.Marker({ - position: position, - map: map, - }); - }); + L.tileLayer("'.setting("Tile layer OpenStreetMap").'", { + maxZoom: 17, + attribution: "© OpenStreetMap" + }).addTo(map); + + var marker = L.marker([lat, lng], { + icon: icon + }).addTo(map); } function risolviConto(tipo){ diff --git a/modules/anagrafiche/modals/posizione.php b/modules/anagrafiche/modals/posizione.php index 78a7abd15..a438164f0 100644 --- a/modules/anagrafiche/modals/posizione.php +++ b/modules/anagrafiche/modals/posizione.php @@ -20,8 +20,6 @@ include_once __DIR__.'/../../../core.php'; include_once __DIR__.'/../init.php'; -$google = setting('Google Maps API key'); - echo '
@@ -29,16 +27,20 @@ echo '
- {[ "type": "text", "label": "'.tr('Indirizzo Google').'", "name": "gaddress", "value": "'.$record['gaddress'].'", "extra": "data-geo=\'formatted_address\'" ]} + {[ "type": "text", "label": "'.tr('Indirizzo').'", "name": "gaddress", "value": "'.$record['gaddress'].'", "extra": "data-geo=\'formatted_address\'" ]}
-
+
{[ "type": "text", "label": "'.tr('Latitudine').'", "name": "lat", "value": "'.$record['lat'].'", "extra": "data-geo=\'lat\'", "class": "text-right" ]}
-
+
{[ "type": "text", "label": "'.tr('Longitudine').'", "name": "lng", "value": "'.$record['lng'].'", "extra": "data-geo=\'lng\'", "class": "text-right" ]}
+ +
+
+
@@ -61,24 +63,60 @@ echo ' '; diff --git a/modules/mappa/css/app.css b/modules/mappa/css/app.css index 645b041b5..f8937f699 100644 --- a/modules/mappa/css/app.css +++ b/modules/mappa/css/app.css @@ -8,7 +8,7 @@ height:700px; position:fixed; top:100px; - + z-index: 10000; } .open-menu{ @@ -101,4 +101,8 @@ a:active, a:hover, a:focus { outline: 0; text-decoration: none; outline: 0 !important; +} + +.select2-container { + z-index: 10000; } \ No newline at end of file diff --git a/modules/mappa/edit.php b/modules/mappa/edit.php index b3a08f559..27481b07f 100644 --- a/modules/mappa/edit.php +++ b/modules/mappa/edit.php @@ -23,10 +23,6 @@ include_once __DIR__.'/../../core.php'; - -
@@ -48,7 +44,7 @@ if(!empty(setting('Google Maps API key'))){
- {[ "type": "select", "name": "idanagrafica", "id": "idanagrafica", "required": 1, "ajax-source": "clienti_fornitori" ]} + {[ "type": "select", "name": "idanagrafica", "id": "idanagrafica", "required": 1, "ajax-source": "clienti" ]}
@@ -82,19 +78,21 @@ if(!empty(setting('Google Maps API key'))){ - - - - - '.Modules::link('Impostazioni', null, tr('Per abilitare la visualizzazione della mappa, inserire la Google Maps API Key nella scheda Impostazioni'), true, null, true, null, '&search=Google Maps API key').'. -
'; -} -?> \ No newline at end of file + \ No newline at end of file diff --git a/modules/mappa/js/app.js b/modules/mappa/js/app.js index 08a4502b9..b97817014 100644 --- a/modules/mappa/js/app.js +++ b/modules/mappa/js/app.js @@ -1,42 +1,27 @@ -$(document).ready(function(){ +$(document).ready(function() { if(!$('body').hasClass('sidebar-collapse')){ $('.sidebar-toggle').trigger('click'); $('.nav').hide(); } - reload_pointers(); + setTimeout(function () { + caricaMappa(); + reload_pointers(); + }, 1000); }); let map; var markers = []; +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] +}); -function initialize(startLat, startLon) { - - if (startLat==undefined){ - startLat = 43.45291889; - } - if (startLon==undefined){ - startLon = 11.96411133; - } - - var myLatlng = new google.maps.LatLng(startLat, startLon); - - var mapOptions = { - zoom: 7, - center: myLatlng, - mapTypeId: google.maps.MapTypeId.ROADMAP, - mapTypeControl: false, - streetViewControl: false, - panControl: false, - scaleControl: false, - rotateControl: false - } - - map = new google.maps.Map(document.getElementById('mappa'), mapOptions); - -} - -$('#menu-filtri-toggle').click(function(){ +$('#menu-filtri-toggle').click(function() { if($(this).parent().parent().parent().hasClass("open-menu")){ $(this).parent().parent().parent().removeClass("open-menu"); @@ -57,75 +42,44 @@ $('#menu-filtri-toggle').click(function(){ } }); -function reload_pointers(){ - +function reload_pointers() { clearMarkers(); - var check = []; - $("input[type='checkbox']").each(function(){ + $("input[type='checkbox']").each(function() { if($(this).is(':checked')){ id = $(this).attr('id'); check.push(id); - } }); $.get(ROOTDIR+'/modules/mappa/actions.php?op=get_markers&idanagrafica='+$('#idanagrafica').val()+'&check='+check, function(data){ - - var infowindow = new google.maps.InfoWindow(); - var bounds = new google.maps.LatLngBounds (); - var dettagli = JSON.parse(data); - - var marker, i; - var counter = 0; - dettagli.forEach(function(dettaglio) { - const posizione = new google.maps.LatLng(dettaglio.lat, dettaglio.lng); - - marker = new google.maps.Marker({ - position: posizione, - map: map, - }); - - markers.push(marker); - bounds.extend(posizione); - - google.maps.event.addListener(marker, 'click', (function(marker, i) { - return function() { - infowindow.setContent(dettaglio.descrizione); - infowindow.open(map, marker); - } - })(marker, i)); - - counter++; + if (dettaglio.lat && dettaglio.lng) { + L.marker([dettaglio.lat, dettaglio.lng], { + icon: icon + }).addTo(map); + } }); + }); +} - if(counter>0){ - map.setCenter(bounds.getCenter()); // this will set the center of map to center of all markers - map.fitBounds(bounds); // this will fit all the markers to screen +function clearMarkers() { + map.eachLayer(function (layer) { + if(layer instanceof L.Marker) { + map.removeLayer(layer); } }); } -function setMapOnAll(map) { - for (let i = 0; i < markers.length; i++) { - markers[i].setMap(map); - } -} - -function clearMarkers() { - setMapOnAll(null); -} - -$("input[type='checkbox']").change(function(){ +$("input[type='checkbox']").change(function() { reload_pointers(); }); -$('#idanagrafica').change(function(){ +$('#idanagrafica').change(function() { reload_pointers(); }); diff --git a/package.json b/package.json index bff3794c2..e199832af 100755 --- a/package.json +++ b/package.json @@ -12,7 +12,7 @@ "bootstrap-daterangepicker": "^2.1.25", "bootstrap-maxlength": "^1.10.1", "chart.js": "^3.8.0", - "ckeditor4": "ckeditor/ckeditor4-releases#full/latest", + "ckeditor4": "^4.21.0", "components-jqueryui": "^1.12.1", "datatables.net-bs": "^1.10.15", "datatables.net-buttons-bs": "^1.3.1", @@ -30,10 +30,12 @@ "jquery-form": "^4.2.1", "jquery-ui-touch-punch": "^0.2.3", "jquery.shorten": "^1.0.0", + "leaflet": "^1.9.4", + "leaflet-gesture-handling": "^1.2.2", "moment": "^2.18.1", "numeral": "^2.0.6", "parsleyjs": "^2.7.2", - "pdf.js": "alekswebnet/pdfjs-viewer-element", + "pdfjs-viewer-element": "^2.3.1", "pwstrength-bootstrap": "^3.0.4", "select2": "^4.0.3", "select2-bootstrap-theme": "^0.1.0-beta.10", diff --git a/plugins/sedi/edit.php b/plugins/sedi/edit.php index d2513da3a..cd8164477 100755 --- a/plugins/sedi/edit.php +++ b/plugins/sedi/edit.php @@ -108,10 +108,8 @@ echo '
{[ "type": "textarea", "label": "'.tr('Note').'", "name": "note", "value": "$note$" ]}
-
'; +
-if (!empty($google)) { - echo '
{[ "type": "text", "label": "'.tr('Indirizzo Google').'", "name": "gaddress", "value": "$gaddress$", "extra": "data-geo=\'formatted_address\'" ]} @@ -125,31 +123,24 @@ if (!empty($google)) { {[ "type": "text", "label": "'.tr('Longitudine').'", "name": "lng", "id": "lng_", "value": "$lng$", "extra": "data-geo=\'lng\'", "class": "text-right" ]}
'; - // Vedi su google maps - if (!empty($record['indirizzo']) || (empty($record['citta']))) { - echo ' -
-
-    - '; +if (!empty($record['indirizzo']) || (empty($record['citta']))) { + echo ' +
+
+    + '; - echo ' - -
'; - } + echo ' + +
'; +} - echo ' -
'; +echo ' +
'; - if (!empty($record['gaddress']) || (!empty($record['lat']) && !empty($record['lng']))) { - echo ' -

'; - } -} else { - echo ' -
- '.Modules::link('Impostazioni', null, tr('Per abilitare la visualizzazione delle anagrafiche nella mappa, inserire la Google Maps API Key nella scheda Impostazioni'), true, null, true, null, '&search=Google Maps API key').'. -
'; +if (!empty($record['gaddress']) || (!empty($record['lat']) && !empty($record['lng']))) { + echo ' +

'; } // Permetto eliminazione tipo sede solo se non è utilizzata da nessun'altra parte nel gestionale diff --git a/update/2_4_47.sql b/update/2_4_47.sql index 0e70b9956..997772337 100644 --- a/update/2_4_47.sql +++ b/update/2_4_47.sql @@ -11,3 +11,8 @@ UPDATE `zz_settings` SET `help` = "Se abilitato viene effettuato un backup compl UPDATE `zz_settings` SET `editable` = 1 WHERE `zz_settings`.`nome` = 'Soft quota'; UPDATE `zz_settings` SET `help` = "Valore espresso in Giga superato il quale viene visualizzato un avviso di spazio in esaurimento." WHERE `zz_settings`.`nome` = 'Soft quota'; + +-- Rimozione google maps +DELETE FROM `zz_settings` WHERE `zz_settings`.`nome` = 'Google Maps API key'; + +INSERT INTO `zz_settings` (`id`, `nome`, `valore`, `tipo`, `editable`, `sezione`, `created_at`, `order`, `help`) VALUES (NULL, 'Tile layer OpenStreetMap', 'https://{s}.tile.openstreetmap.de/{z}/{x}/{y}.png', 'string', '1', 'Generali', NULL, NULL, '') \ No newline at end of file