console.log(' %c pp_draw v.0.1 ' ,'font-family:monospace;font-size:20px;color:darkblue;');
console.log(' %c peppepalma @4/2019 ' ,'font-family:monospace;font-size:11px;color:tomato;');
console.info("%cATTENZIONE", "color:Tomato", "\nla libreria presenta le seguenti dipendenze:\n - leaflet.pm.min.js \n - leaflet-control-button-group.js \n - leaflet.table.js \n - leaflet.shpfile.js \n - supagrid.js è stata modifica nella funzione relativa al focus ")
//################################################################################
function getProperties(f) {
return f.properties;
}
map.doubleClickZoom.disable();
map.pm.setPathOptions({
color: 'orange',
fillColor: 'green',
fillOpacity: 0.4,
});
var table_control = new L.control.Table({});
function addToList(layer){ // NB: aggiungi alla lista
layer.addTo(map);
var r = /(.*)\.[^.]+$/;
var _nameLayer = r.exec(fileName);
if (_nameLayer!=null) {
tempFileName = _nameLayer[1];
} else {
tempFileName ="senza nome";
}
panelLayers.addOverlay({active: true, name:tempFileName, layer: layer},tempFileName,"dati locali");
//list.enableButton(7);
console.log("Layer ("+tempFileName+") aggiunto alla lista")
makeLyrArrList();
}
var fields = [];
var arrLoadedItem = [];
var lyrLoadedItem = lyrLoadedItem || L.geoJson(null, {
pointToLayer: function(feature, latlng) {
return new L.circle(latlng, {
radius:12,
fillOpacity: 0.85
})
},
pmIgnore: false,
onEachFeature: function (feature, layer){
layer.on({
click:function (e) {
var geom = feature.geometry;
if (! map.pm.globalRemovalEnabled()){
if (globalSelect!=true) { // FIXME: trovare come bloccare il delete
lyrSelected.addData(geom);
lyrSelected.bringToFront();
lyrSelected.setStyle(selectedStyleOption);
lyrSelected.addTo(map);
} else {
lyrSelectedItem.addData(geom);
lyrSelectedItem.bringToFront();
lyrSelectedItem.setStyle(selectSTyleOption);
lyrSelectedItem.addTo(map);
}
}
attivaBottoni();
}
});
if (feature.properties) {
layer.bindPopup("id: "+feature.properties.id);
}
}
});
// ############################################################### MODIFICATO
var lyrSelectedItem = lyrSelectedItem || L.geoJson(null, {
pointToLayer: function(feature, latlng) {
return new L.circle(latlng, {
radius: 16,
fillOpacity: 0.85
})
},
pmIgnore: true,
onEachFeature: function (feature, layer){
layer.on({
click:function (e) {
console.log("lyrSelectedItem-->")
lyrSelectedItem.removeLayer(e.target._leaflet_id);
}
});
}
});
var lyrSelected = lyrSelected || L.geoJson(null, {
pointToLayer: function(feature, latlng) {
return new L.circle(latlng, {
radius: 16,
fillOpacity: 0.85
})
},
pmIgnore: true,
onEachFeature: function (feature, layer){
layer.on({
click:function (e) {
console.log("lyrSelected-->")
lyrSelected.removeLayer(e.target._leaflet_id);
}
});
}
});
// #############################################################################
var jsnSelectedItem;
var lyrLoadedItemBuffer = L.geoJson(null, { pmIgnore: false});
var jsnLoadedItemBuffer;
var lyrLoadedItemEnvelop;
var jsnLoadedItemEnvelop;
var selectSTyleOption = {color :'yellow',weight: 7, dashArray: '6 3', fillOpacity: 0};
//########## file da disco #######################################################
//########################################################## NB: save file on disk
function saveSingleFile() {
var json = lyrLoadedItem.toGeoJSON();
json.propToView = propToView;
var data = JSON.stringify(json, null, 4);
console.log(data)
//console.log(data)
var blob = new Blob( [ data ], {
type: 'application/json'
});
url = URL.createObjectURL( blob );
var link = document.createElement( 'a' );
link.setAttribute( 'href', url );
link.setAttribute( 'download', saveFileName );
var event = document.createEvent( 'MouseEvents' );
event.initMouseEvent( 'click', true, true, window, 1, 0, 0, 0, 0, false, false, false, false, 0, null);
link.dispatchEvent( event );
}
function zoomToXY(){
var coordinate = $("#xycoords").val().split(",");
console.log(coordinate[0],coordinate[1])
zoomTo(coordinate[0],coordinate[1],17,1)
}
function readSingleFile(e) {
var file = e.target.files[0];
if (!file) {
return;
}
fileName = file.name;
var r = /(.*)\.[^.]+$/;
var _nameLayer = r.exec(fileName);
tempFileName = _nameLayer[1];
console.log("file path: ",file.name)
var reader = new FileReader();
if (file.name.slice(-3) === 'zip') {
//########################################################## NB: load file from disk
//###### load zip file #################################
reader.onload = function(e) {
var contents = e.target.result;
shp(contents).then(function(geojson){
if (! jQuery.isEmptyObject(lyrLoadedItem._layers)) {
panelLayers.removeLayer({name:tempFileName ,layer: lyrLoadedItem});
lyrLoadedItem.clearLayers();
}
console.log("zip loaded... ");
for (var item in geojson.features){
var feature = geojson.features[item];
feature.properties.id = L.stamp(geojson.features[item]);
feature.properties._modified = false;
feature._polygonId = L.stamp(geojson.features[item]);
}
lyrLoadedItem.addData(geojson);
addToList(lyrLoadedItem);
setActive();
});
}
reader.readAsArrayBuffer(file);
} else if (file.name.slice(-4) === 'json'){
//###### load geoJSON file #############################
reader.onload = function(e) {
var contents = e.target.result;
var geojson = JSON.parse(contents)
if (! jQuery.isEmptyObject(lyrLoadedItem._layers)) {
panelLayers.removeLayer({name:tempFileName ,layer: lyrLoadedItem});
lyrLoadedItem.clearLayers();
}
console.log("json loaded... ");
lyrLoadedItem.addData(geojson);
lyrLoadedItem.eachLayer(function(eve){
var jsnFeature = eve.feature;
jsnFeature.properties._modified = false;
eve._polygonId = jsnFeature.properties.id;
})
addToList(lyrLoadedItem);
setActive();
};
reader.readAsText(file);
} else if (file.name.slice(-3) === 'gpx') {
//###### load gpx file #######################################################
reader.onload = function(e) {
var contents = e.target.result;
console.log ("gpx file loaded...");
if (! jQuery.isEmptyObject(lyrLoadedItem._layers)) {
panelLayers.removeLayer({name:tempFileName ,layer: lyrLoadedItem});
lyrLoadedItem.clearLayers();
}
//propToView = [];
var gpxLoadedItem = new L.GPX(contents, {async: true, marker_options: {
startIconUrl: './src/css/img/pin-icon-start.png',
endIconUrl: './src/css/img/pin-icon-end.png',
shadowUrl: './src/css/img/pin-shadow.png'}})
.on('loaded', function(e) {
map.fitBounds(e.target.getBounds());
alert("distanza: "+gpxLoadedItem.get_distance()+"\ntempo: "+gpxLoadedItem.get_duration_string(gpxLoadedItem.get_total_time()));
jsnLoadedItem = gpxLoadedItem.toGeoJSON().features[0].geometry;
for (var item in jsnLoadedItem.features){
var feature = jsnLoadedItem.features[item];
feature.properties.id = L.stamp(jsnLoadedItem.features[item]);
feature.properties._modified = false;
feature._polygonId = feature.properties.id;
if (feature.geometry.type!="Point") {
var dist = gpxLoadedItem.get_distance()/1000;
dist = dist.toFixed(2)+" km ";
feature.properties.descrizione = "distanza: "+dist+"\ntempo: "+gpxLoadedItem.get_duration_string(gpxLoadedItem.get_total_time())
} else {
feature.properties.descrizione = "start/stop";
}
}
lyrLoadedItem.addData(jsnLoadedItem);
addToList(lyrLoadedItem);
});
};
reader.readAsText(file);
}
//##############################################################################
}
//############################################################ NB: display table
/*
* PURPOSE : Crea la lista dei valori degli attributi partendo dalle properties
e le rappresenta in una Tabella
* PARAMS : geojson -
* RETURNS : function -
* NOTES : la tabella viene preparata mediante la libreria Supagrid.js . Fare
attenzione alle modifiche apportate alla libreria... modificata la
funzione on.change()
*/
function displayContents(geojson) {
fields = [];
if (!geojson || !geojson.geometry &&
(!geojson.features || !geojson.features.length)) {
} else {
rows = geojson.geometry ? [geojson.properties] : geojson.features.map(getProperties); // dati in tabella
}
for( var j in rows[0] ) {
if (($.inArray(j, noFieldsArr.filter(function(string){return string !="id";}) )<0 ) && (j.charAt(0)!="_")) {
fields.push(j.replace(/ /g,"_")); // lista nome campi
}
}
// crea tabella
var table = new Supagrid({
fields: fields,
id_field: ((fields.indexOf("id")>0)?"id":fields[0]),
data: rows,
on: {
change: function(obj) {
console.log("table change: ",obj);
bindPop(lyrLoadedItem);
},
focus: function(obj) {
console.log("table focus: ",obj);
findFeature(lyrLoadedItem,obj);
}
}
})
var my_table = table;
lyrLoadedItem.on('popupopen',function(e){
feature = e.layer.feature;
console.log("popup open: ", feature.properties[((fields.indexOf("id")>0)?"id":fields[0])])
my_table.focus(feature.properties[((fields.indexOf("id")>0)?"id":fields[0])]);
});
table_control.visibile = true;
table_control.addTo(map);
table_control.addTable(my_table.supagrid,'my_table',fileName)
// $("#closeTable").click(function() {
// alert("close")
// });
$(table_control.getContainer()).appendTo(".leaflet-control-container:first");
}
function findFeature(layer,obj){
jsnLoadedItem = layer.toGeoJSON();
lyrLoadedItem.eachLayer(function(lyr) {
highlightFeature(lyr,obj);
});
}
function highlightFeature(layer,obj) {
//if (layer.feature.geometry.type!="Point") layer.setStyle({color: '#3388ff'})
layer.setStyle({color: '#3388ff'})
if (layer.feature._polygonId==obj){
layer.setStyle({color :'tomato'});
//if (layer.feature.geometry.type!="Point") layer.setStyle({color :'tomato'});
}
if (!L.Browser.ie && !L.Browser.opera && !L.Browser.edge) {
lyrLoadedItem.bringToFront();
}
}
function resetFeature() {
lyrLoadedItem.eachLayer(function(item) {
console.log("Reset style: ",item.feature.geometry.type)
item.setStyle({color: '#3388ff'})
// if (item.feature.geometry.type!="Point") item.setStyle({color: '#3388ff'})
});
if (!L.Browser.ie && !L.Browser.opera && !L.Browser.edge) {
// lyrSelectedItem.bringToFront();
}
}
//###########################################################################
//##### BUTTUN LIST ########################################## NB: bottoni funzioni
function creaDrawTools(){
// aggiungi bottone editor
console.log("PMOptions",jQuery.isEmptyObject(PMOptions))
if (jQuery.isEmptyObject(PMOptions)) PMOptions = {
drawMarker: true,
drawPolygon: true,
editPolygon: false,
drawPolyline: true,
drawCircle: false,
deleteLayer: true,
editMode:false
};
if (leggiCookie("draw") == "drawON") map.pm.addControls(PMOptions);
}
// aggiungi bottone funzioni
var myButtons = [
{icon:'bacon',
hoverColor: 'red',
title: "Crea Buffer",
//text:'Set marker',
separatorBefore:true,
containerBefore:false,
onClick:bufferButton,
hidden:true
},
{icon:'object-group',
hoverColor: 'red',
title: "Unione",
//text:'Set marker',
separatorBefore:false,
containerBefore:false,
onClick:unionButton,
hidden:true
},
{icon:'ruler',
hoverColor: 'red',
title: "Misura",
separatorBefore:false,
containerBefore:false,
onClick:misureButton
},
{icon:'clone',
hoverColor: 'red',
title: "Incolla",
separatorBefore:true,
containerBefore:false,
onClick:copyButton
},
{icon:'expand-arrows-alt',
hoverColor: 'red',
title: "Zoom to..",
containerBefore:false,
onClick:extendButton
},
{icon:'hand-pointer',
hoverColor: 'red',
title: "Seleziona",
separatorBefore:false,
containerBefore:false,
onClick:selectButton,
selectable: true,
disabled: false
},
{icon:'trash-alt',
hoverColor: 'red',
title: "Annulla selezione",
separatorBefore:false,
containerBefore:false,
onClick:clearSelect
}
]
var list = new L.Control.ButtonGroup({
horizontal:false,
separateButtons: false,
small: false,
equalWidth: true,
buttons: myButtons
})
list.addTo(map);
//##############################################################################
//##### AZIONI DI DEFAULT SU MAPPA ###########################################
//############################################################### NB: map events
map.on('click', function (e) {
// lyrSelectedItem.clearLayers(); // CANCELLA I SELEZIONATI
// lyrLoadedItemBuffer.clearLayers(); // CANCELLA I BUFFER
});
map.on('dblclick', function (e) {
lyrSelectedItem.clearLayers(); // CANCELLA I SELEZIONATI
lyrLoadedItemBuffer.clearLayers(); // CANCELLA I BUFFER
})
lyrSelectedItem.on('contextmenu',function(e){
lyrSelectedItem.removeLayer(e.layer._leaflet_id);
})
lyrSelected.on('contextmenu',function(e){
lyrSelected.removeLayer(e.layer._leaflet_id);
})
//##############################################################################
//##### AGGIUNGI FILE FROM DISK ###############################################
//############################################################### NB: loadButton
var fileButton = L.control.custom({
// position: 'topright',
content : ''+
'
' +
'' +
'
'+
'Solo file nei formati json e shp',
classes : 'leaflet-panel-layers-group',
style :
{ margin: '0px 5px 0px 0px',
padding: '5px 5px 5px 5px' },
datas :
{
'foo': 'load',
},
events:
{ click: function(e){ },
dblclick: function(e){ },
contextmenu: function(e){ }
}
}).addTo(map);
//########################################################## NB: saveButton
var saveButton = L.control.custom({
// position: 'topright',
content : ''+
'' +
'' +
'
',
classes : 'leaflet-panel-layers-group',
style :
{ margin: '0px 5px 0px 0px',
padding: '5px 5px 5px 5px' },
datas :
{
'foo': 'save',
},
events:
{ click: function(e){ },
dblclick: function(e){ },
contextmenu: function(e){ }
}
}).addTo(map);
//##### AGGIUNGI XY coord ###############################################
//########################################################## NB: xycoords
var xycoords = L.control.custom({
// position: 'topright',
content : ''+
'' +
'' +
'' +
'
',
classes : 'leaflet-panel-layers-group',
style :
{ margin: '0px 5px 0px 0px',
padding: '5px 5px 5px 5px' },
datas :
{
'foo': 'xy',
},
events:
{ click: function(e){ },
dblclick: function(e){ },
contextmenu: function(e){ },
}
}).addTo(map);
//#############################################################################/
//### sposta controllo nel PANNELLO DESTRO #####################################
//############################################################################
$("", {class: 'mapbuttons2 leaflet-panel-layers-overlays',id: 'fileWidget'}).appendTo( ".leaflet-panel-layers" );
$(fileButton.getContainer()).appendTo(".mapbuttons2");
//$("
", {class: 'mapbuttons3 leaflet-panel-layers-overlays'}).appendTo( ".leaflet-panel-layers" );
$(saveButton.getContainer()).appendTo(".mapbuttons2");
$("
", {class: 'mapbuttons3 leaflet-panel-layers-overlays',id: 'xycoordsWidget'}).appendTo( ".leaflet-panel-layers" );
$(xycoords.getContainer()).appendTo(".mapbuttons3");
//#############################################################################
//#############################################################################/
//### AGGIUNGI BOTTONE AL PANNELLO sinistro #####################################/
//############################################################ NOTE: clearSelect
function clearSelect(){
lyrSelectedItem.clearLayers();
$("#infoBanner").html("Selezioni eliminate")
$("#infoBanner").show();
setTimeout(function() { $("#infoBanner").hide(); }, 4000);
console.log("Selezione eliminata")
}
function selectButton(){
if (globalSelect == true) {
globalSelect = false;
} else {
globalSelect = true;
}
}
//############################################################ NB: copyButton
function copyButton(){
var jsnSelectedItem = lyrSelectedItem.toGeoJSON();
console.log("jsnSelectedItem",jsnSelectedItem);
for (var item in jsnSelectedItem.features) {
var feature = jsnSelectedItem.features[item];
var property = feature.properties;
property.id = L.stamp(feature);
property._lastChange = new Date();
property._operation = "copied";
property._modified = true;
feature._polygonId = property.id;
// propToInput = [];
for (var prop in property) {
if (prop!="id") addProp(prop);
}
};
// addProp("id");
addProp("_lastChange");
addProp("_operation");
addProp("_modified");
lyrLoadedItem.addData(jsnSelectedItem);
lyrSelectedItem.clearLayers();
jsnLoadedItem = lyrLoadedItem.toGeoJSON();
// console.log("jsnLoadedItem->",jsnLoadedItem.features)
if (!map.hasLayer(lyrLoadedItem)) {
lyrLoadedItem.addTo(map);
panelLayers.addOverlay({active: true, name:tempFileName, layer: lyrLoadedItem},tempFileName,"dati locali");
// list.enableButton(7);
console.log("Layer ("+tempFileName+") aggiunto alla lista")
//SetZIndexByTitle($(fileName));
setActive();
}
}
//############################################################ NOTE: stampaButton
function stampaButton(){
$("#preview div#snapshot").html("
")
sidebar.open("preview");
leafletImage(map, doImage);
}
//############################################################ NOTE: rimuovi
function rimuovi(layerId){
var layer = map._layers[layerId];
var Layers = panelLayers._layers;
$.each(Layers,function( index,value ) {
if (value.id==layerId) {
var layerDef = {name:value.name,layer:value.layer};
panelLayers.removeLayer({name:value.name, layer:layerDef});
map.removeLayer(value.layer);
lyrLoadedItem.clearLayers();
console.log("Layer ("+value.name+") eliminato!")
}
});
}
//############################################################ NOTE: semplify
function semplify(layerId){
var layer = map._layers[layerId];
var geojson = layer.toGeoJSON();
var options = {tolerance: 0.003, highQuality: true};
var simplified = turf.simplify(geojson, options);
lyrLoadedItem.clearLayers();
lyrLoadedItem.addData(simplified);
}
//############################################################ NOTE: centroide
function centroide(layerId){
var layer = map._layers[layerId];
var geojson = layer.toGeoJSON();
var _layers = geojson.features;
lyrSelectedItem.clearLayers();
_layers.forEach(function(element,index){
var centri = turf.centroid(element, element.properties);
lyrSelectedItem.addData(centri);
});
lyrSelectedItem.setStyle(selectSTyleOption);
}
//############################################################ NOTE: centerOfMass
function centroDiMassa(layerId){
var layer = map._layers[layerId];
var geojson = layer.toGeoJSON();
var _layers = geojson.features;
lyrSelectedItem.clearLayers();
_layers.forEach(function(element,index){
var centri = turf.centerOfMass(element, element.properties);
lyrSelectedItem.addData(centri);
});
lyrSelectedItem.setStyle(selectSTyleOption);
}
//############################################################ NOTE: propertiesButton
function propertiesButton(id, map, button, buttonGroup, selected){
/* PURPOSE : Azioni legate alla pressione del pulsante per la gestione degli attributi. Viene generate la lista degli attributi
* e inserito i comandi per aggiungi, rimuovi e bindToPopup
* PARAMS : -
* RETURNS : -
* NOTES :
*/
geojson = lyrLoadedItem.toGeoJSON();
fields = [];
if (!geojson || !geojson.geometry &&
(!geojson.features || !geojson.features.length)) {
} else {
rows = geojson.geometry ? [geojson.properties] : geojson.features.map(getProperties); // dati in tabella
}
for( var j in rows[0] ) {
fields.push(j); // lista nome campi
}
// console.log( "fields: ",fields);
html = "
Lista degli attributi
";
html += '
';
html += ' | descrizione | |
';
$.each(fields, function(i, field) {
if (!noFieldsArr.includes(field)) html += ''+(i+1)+' | '+field+' | |
';
});
html += '
';
$("#home div").html(html)
sidebar.open("home");
}
function bindPop(layer){/*
* PURPOSE : Effettua il bind delle properties di ogni field sul relativo popup
* PARAMS : layer - è la feature da bindare
* RETURNS : -
* NOTES : propToView è l'array delle proprieta di visualizzare
*/
layer.eachLayer(function(item){
var properties = item.feature.properties;
var html = "";
propToView.forEach(function(entry) {
html += entry+": "+properties[entry]+"
";
});
item.bindPopup(html);
});
}
function addToPopup(prop){
var geojson = lyrLoadedItem.toGeoJSON();
var index = propToView.indexOf(fields[prop]);
if (index < 0) {
propToView.push(fields[prop]);
} else{
propToView.splice(index,1)
}
lyrLoadedItem.clearLayers();
lyrLoadedItem.addData(geojson);
bindPop(lyrLoadedItem);
propertiesButton();
}
function removeProperty(prop){
console.log("removeProperty: ",prop)
var geojson = lyrLoadedItem.toGeoJSON();
turf.propEach(geojson, function (currentProperties, featureIndex) {
// console.log(Object.keys(currentProperties)[prop],featureIndex );
delete currentProperties[Object.keys(currentProperties)[prop]];
});
var index = propToView.indexOf(fields[prop]);
if (index > 0) propToView.splice(index,1)
lyrLoadedItem.clearLayers();
lyrLoadedItem.addData(geojson);
propertiesButton();
}
function addProperty(){
var prop = prompt("Inserisci il nome del campo", "nota");
addProp(prop);
propertiesButton();
}
function addProp(prop){
var geojson = lyrLoadedItem.toGeoJSON();
var index = propToInput.indexOf(prop);
if (index < 0) {
var data = [];
data.id= prop;
data.label = prop;
data.type = 't';
data.default = '';
if ((prop.charAt(0)!="_")) propToInput.push(data);
} else {
console.log(prop, " già esiste!")
}
/* turf.propEach(geojson, function (currentProperties, featureIndex) {
console.log("currentProperties",prop,currentProperties );
});
*/
//console.log("propToInput",propToInput)
lyrLoadedItem.clearLayers();
lyrLoadedItem.addData(geojson);
}
//############################################################ NOTE: tableButton
// function tableButton(id, map, button, buttonGroup, selected){
// // jsnLoadedItem = lyrLoadedItem.toGeoJSON();
// if (id.selected) {
// // displayContents(jsnLoadedItem);
// table_control.on();
// // table_control.visibile = true;
// console.log("table visible: ", table_control.visibile)
// } else {
// resetFeature();
// table_control.off();
// // table_control.visibile = false;
// console.log("table visible: ", table_control.visibile)
// };
// }
//############################################################ NOTE: misureButton
function misureButton(){
if (!jQuery.isEmptyObject(lyrSelectedItem._layers)) {
jsnSelectedItem = lyrSelectedItem.toGeoJSON();
lyrSelectedItem.clearLayers();
} else if (!jQuery.isEmptyObject(lyrSelected._layers)) {
jsnSelectedItem = lyrSelected.toGeoJSON();
lyrSelected.clearLayers();
} else {
return false; // TODO: aggiungere una geometria puntuale con la posizione xy
}
var feature = jsnSelectedItem.features[0].geometry;
if ((feature.type=="Polygon")) {
var polygon = turf.polygon(feature.coordinates);
var area = turf.area(polygon);
var line = turf.polygonToLine(polygon);
var length = turf.length(line, {units: 'meters'});
alert ("Area = "+ area.toFixed(2) + " metri quadrati \nPerimetro = "+length.toFixed(2)+" metri");
} else if ((feature.type=="MultiPolygon")) {
var polygon = turf.multiPolygon(feature.coordinates);
var area = turf.area(polygon);
var line = turf.polygonToLine(polygon);
var length = turf.length(line, {units: 'meters'});
alert ("Area = "+ area.toFixed(2) + " metri quadrati\n Perimetro = "+length.toFixed(2)+" metri");
//alert ("Area = "+ area + " metri quadrati")
} else if ((feature.type=="LineString")) {
var explode = turf.explode(feature);
var line = turf.lineString(feature.coordinates);
var length = turf.length(line, {units: 'meters'});
alert ("Lunghezza = "+ length.toFixed(2) + " metri")
} else if ((feature.type=="MultiLineString")) {
var line = turf.multiLineString(feature.coordinates);
var length = turf.length(line, {units: 'meters'});
alert ("Lunghezza = "+ length.toFixed(2) + " metri")
}
}
//############################################################ NOTE: bufferButton
function bufferButton(){
var km = prompt("Inserisci la dimenzione del buffe in km", "0.5");
if (isNaN(parseFloat(km)) || !isFinite(km)) {
alert ("Spiritoso! ...deve essere un NUMERO!")
return
}
if (!jQuery.isEmptyObject(lyrSelectedItem._layers)) {
var lyrItemBuffer = lyrSelectedItem;
console.log("buffer alla selezione");
}
km = parseFloat(km);
// jsnLoadedItemBuffer = turf.buffer(lyrItemBuffer.toGeoJSON(),km, 'meters');
jsnLoadedItemBuffer = turf.buffer(lyrItemBuffer.toGeoJSON(),km, {units: 'kilometers'});
lyrLoadedItemBuffer = L.geoJSON(jsnLoadedItemBuffer);
lyrSelectedItem.clearLayers();
lyrSelectedItem.addData(jsnLoadedItemBuffer);
lyrSelectedItem.setStyle(selectSTyleOption);
}
//############################################################ NOTE: unionButton
function unionButton(){
if (!jQuery.isEmptyObject(lyrSelectedItem._layers)) {
var lyrItemUnion = lyrSelectedItem;
console.log("unione della selezione");
var jsnLoadedItemUnion = {};
turf.featureEach(lyrItemUnion.toGeoJSON(), function (currentFeature, featureIndex) {
if (featureIndex == 0) {
jsnLoadedItemUnion = currentFeature;
} else {
jsnLoadedItemUnion = turf.union(jsnLoadedItemUnion,currentFeature);
}
});
}
lyrSelectedItem.clearLayers();
lyrSelectedItem.addData(jsnLoadedItemUnion);
lyrSelectedItem.setStyle(selectSTyleOption);
}
//############################################################ NOTE: extendButton
function extendButton(){
if (!jQuery.isEmptyObject(lyrSelectedItem._layers)) {
var lyrLoadedItemEnvelop = lyrSelectedItem;
console.log("Extend alla selezione");
} else {
var lyrLoadedItemEnvelop = lyrLoadedItem;
console.log("Extend al layer");
}
jsnLoadedItemEnvelop = turf.envelope(lyrLoadedItemEnvelop.toGeoJSON());
var arrBbox = turf.bbox(jsnLoadedItemEnvelop);
var bbox =[[arrBbox[1],arrBbox[0]],[arrBbox[3],arrBbox[2]]];
map.fitBounds(bbox);
//lyrLoadedItemEnvelop = L.geoJSON(jsnLoadedItemEnvelop,{style:{color:'gray', fillOpacity:0.2}});
//panelLayers.addOverlay({group: "Road layers",name:'
Envelop di Loaded data' ,layer: lyrLoadedItemEnvelop});
}
//######### DRAW #################################################################
//############################################################## NB: pm:create
map.on('pm:drawstart', e => {
globalEdit = true;
});
map.on('pm:drawend', e => {
//globalEdit = false;
});
map.on('pm:create',function(e) {
var item = e.layer;
var jsnItem = item.toGeoJSON();
//jsnItem.properties = jsnItem.properties || {} ;
jsnItem.properties.id = L.stamp(item);
jsnItem.properties._lastChange = new Date();
jsnItem.properties._operation = "insert";
jsnItem.properties._modified = false;
jsnItem._polygonId = jsnItem.properties.id;
// addProp("id");
addProp("_lastChange");
addProp("_operation");
addProp("_modified");
//console.log("jsnItem->",jsnItem)
var content = '
';
map.fire('modal', {
title: 'Inserimento dati',
content: content,
template: ['',
'
{content}
',
''
].join(''),
okText: 'Ok',
cancelText: 'Annulla',
OK_CLS: 'modal-ok',
CANCEL_CLS: 'modal-cancel',
width: 500,
onShow: function(evt) {
var modal = evt.modal;
L.DomEvent
.on(modal._container.querySelector('.modal-ok'), 'click', function() {
// alert('you pressed ok');
$.each(propToInput, function(i, prop) {
jsnItem.properties[prop.id] = $("#"+prop.id).val();
content += '
';
});
modal.hide();
globalEdit = false;
})
.on(modal._container.querySelector('.modal-cancel'), 'click', function() {
alert('You pressed cancel');
modal.hide();
globalEdit = false;
});
}
});
lyrLoadedItem.addData(jsnItem);
map.removeLayer(item);
console.log("feature creata... ");
//if ($(lyrLoadedItem._layers).length>0) {
// lyrLoadedItem.addTo(map);
if (!map.hasLayer(lyrLoadedItem)) {
addToList(lyrLoadedItem);
setActive();
}
//}
});
//lyrLoadedItem.pm.enable();
//############################################################## NB: pm:cut
map.on('pm:cut',function(e) {
var originalLayer = e.originalLayer;
var layer = e.layer;
var jsnLayer = layer.toGeoJSON();
var jsnFeature = jsnLayer.features[0];
jsnFeature.properties._lastChange = new Date();
jsnFeature.properties._operation = "update";
jsnFeature.properties._modified = true;
jsnFeature._polygonId = jsnFeature.properties.id;
map.removeLayer(layer);
lyrLoadedItem.removeLayer(originalLayer);
lyrLoadedItem.addData(jsnFeature);
globalEdit = !globalEdit;
});
//############################################################## NB: pm:edit
var modificato = false;
lyrLoadedItem.on('contextmenu',function(e){
var layer = e.layer;
var json = layer.toGeoJSON();
layer.pm.toggleEdit({
//allowSelfIntersection: false
});
console.log("Edit mode... ",layer.pm.enabled());
if (!layer.pm.enabled()) LayerRefresh(layer,json,modificato);
layer.on('pm:edit', e => {
// var lyrLayer = e.target;
// var jsnLayer = lyrLayer.toGeoJSON();
});
layer.on('pm:markerdragend', e => {
var lyrLayer = e.target;
var jsnLayer = lyrLayer.toGeoJSON();
console.log("layer modificato(1)... ",jsnLayer._polygonId)
modificato = true;
LayerModified(lyrLayer,jsnLayer);
});
layer.on('pm:vertexadded', e => {
var lyrLayer = e.target;
var jsnLayer = lyrLayer.toGeoJSON();
console.log("layer modificato(2)... ",jsnLayer._polygonId)
modificato = true;
LayerModified(lyrLayer,jsnLayer);
});
layer.on('pm:vertexremoved', e => {
var lyrLayer = e.target;
var jsnLayer = lyrLayer.toGeoJSON();
console.log("layer modificato.(3).. ",jsnLayer._polygonId)
modificato = true;
LayerModified(lyrLayer,jsnLayer);
});
})
//############################################################## NB: pm:drag
lyrLoadedItem.on('pm:dragend',function(e) {
var _lyrLayer = e.target;
var _jsnLayer = _lyrLayer.toGeoJSON();
console.log("Layer spostato!",e);
lyrLoadedItem.clearLayers();
LayerRefresh(lyrLoadedItem,_jsnLayer,true);
//LayerModified(lyrLoadedItem,jsnLayer);
})
// lyrLoadedItem.on('pm:globaldrawmodetoggled', e => {
// console.log("---globaldrawmodetoggled",lyrLoadedItem.pm.toggleGlobalDragMode());
// });
function LayerRefresh(lyr,jsn,stato){
if (stato) {
console.log("layer refresh... ",jsn._leaflet_id)
lyrLoadedItem.removeLayer(lyr);
lyrLoadedItem.addData(jsn);
modificato = false;
}
}
function LayerModified(lyr,jsn){
console.log("layer salvato... ",jsn._polygonId)
jsn.properties._lastChange = new Date();
jsn.properties._operation = "update";
jsn.properties._modified = true;
modificato = true;
}
//############################################################## NB: pm:remove
map.on('pm:remove',function(e) {
var layer = e.layer
console.log("feature eliminata... ")
lyrLoadedItem.removeLayer(layer);
});
//#################################################################################
$(document).ready(function () {
// creaDrawTools();
document.getElementById('file-input').addEventListener('change', readSingleFile, false);
document.getElementById( 'file-save' ).addEventListener( 'click', saveSingleFile);
document.getElementById( 'xy-zoom' ).addEventListener( 'click', zoomToXY);
});