Aggiunta plugin LeafletJS per mappe a schermo intero

This commit is contained in:
loviuz 2024-06-30 14:48:45 +02:00
parent e8ac15ccac
commit 779c441ecc
6 changed files with 49 additions and 5 deletions

View File

@ -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;

View File

@ -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}',
])

View File

@ -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){

View File

@ -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);

View File

@ -244,7 +244,7 @@ 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();">
<a class="btn btn-xs btn-default btn-block" onclick="$(\'#map-edit\').css(\'height\', \'100%\'); caricaMappa(); $(this).hide();">
<i class="fa fa-compass"></i> '.tr('Carica mappa').'
</a>
</div>
@ -359,7 +359,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"

View File

@ -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",