Migliorie mappe
This commit is contained in:
MatteoPistorello
parent
b9b81d2e27
commit
d9a8d2d9ca
|
|
@ -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){
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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>';
|
||||
|
|
|
|||
|
|
@ -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>';
|
||||
|
||||
|
|
|
|||
|
|
@ -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> </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() ) );"> <i class="fa fa-map-marker"> </i></a>
|
||||
<a class="btn btn-info" title="'.tr('Mostra la sede su Mappa').'" onclick="cercaOpenStreetMap();"> <i class="fa fa-map-marker"> </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) {
|
||||
|
|
|
|||
Loading…
Reference in New Issue