mappe/last_version/assets/app/read.php

function _displayMapRead (divtarget) {
	divtarget = typeof divtarget !== 'undefined' ? divtarget : 'app';
	document.getElementById(divtarget).innerHTML = "<div id='map' class='map-wrapper'></div>";
	document.getElementById('home').className = "nav-link flat active";
  document.getElementById('leaflet_crud_create').className = "nav-link flat";
  document.getElementById('leaflet_crud_read').className = "nav-link flat active";
  document.getElementById('navbarDropdownUpdate').className = "nav-link dropdown-toggle";
  document.getElementById('leaflet_crud_delete').className = "nav-link flat";
	
	var map, isCollapsed, odm1;
	
	if (document.body.clientWidth <= 767) {
		isCollapsed = true;
	} else {
		isCollapsed = false;
	}
	
	var promisePoint = $.ajax({ url: "assets/dataservice/read_point.php",
		method: "GET",
		dataType: "json",
		data: {command:"POINT"},
		username: null,
		password: null
	});
	
	var pointObjects = L.geoJson(null, {
		onEachFeature: function (feature, layer) {
			if (feature.properties) {
				layer.on({
					click: function (e) {
						var htmlformcomponent = "" +
								"<table id='feature_data' class='table table-condensed table-bordered table-striped'>" +
									"<thead>" +
										"<tr>" +
											"<th colspan='2' class='text-center'>Dati indetificativi</th>" +
										"</tr>" +
									"</thead>" +
									"<tbody>" +
										"<tr>" +
											"<td class=''>Note</td>" +
											"<td class=''><strong>"+feature.properties.notes+"</strong></td>" +
										"</tr>" +
									"</tbody>" +
								"</table>" +
							"";
						$("#app_modal_body").empty();
						$("#app_modal_body").removeClass().addClass('modal-body');
						$("#app_modal_size").removeClass().addClass('modal-dialog');
						$("#app_modal_body").html(htmlformcomponent);
						$("#app_modal_label").html("POINT");
						
						$("#modalbox").modal('show');
					}
				});
			}
		}
	});
	promisePoint.then(function (data) {
		pointObjects.addData(data);
		map.addLayer(pointObjects);
	});
	
	var promiseLinestring = $.ajax({ url: "assets/dataservice/read_linestring.php",
		method: "GET",
		dataType: "json",
		data: {command:"LINESTRING"},
		username: null,
		password: null
	});
	
	var linestringObjects = L.geoJson(null, {
		onEachFeature: function (feature, layer) {
			if (feature.properties) {
				layer.on({
					click: function (e) {
						var htmlformcomponent = "" +
								"<table id='feature_data' class='table table-condensed table-bordered table-striped'>" +
									"<thead>" +
										"<tr>" +
											"<th colspan='2' class='text-center'>Dati indetificativi</th>" +
										"</tr>" +
									"</thead>" +
									"<tbody>" +
										"<tr>" +
											"<td class=''>Note</td>" +
											"<td class=''><strong>"+feature.properties.notes+"</strong></td>" +
										"</tr>" +
									"</tbody>" +
								"</table>" +
							"";
						$("#app_modal_body").empty();
						$("#app_modal_body").removeClass().addClass('modal-body');
						$("#app_modal_size").removeClass().addClass('modal-dialog');
						$("#app_modal_body").html(htmlformcomponent);
						$("#app_modal_label").html("LINESTRING");
						
						$("#modalbox").modal('show');
					}
				});
			}
		}
	});
	promiseLinestring.then(function (data) {
		linestringObjects.addData(data);
		map.addLayer(linestringObjects);
	});
	
	var promisePolygon = $.ajax({ url: "assets/dataservice/read_polygon.php",
		method: "GET",
		dataType: "json",
		data: {command:"POLYGON"},
		username: null,
		password: null
	});
	
	var polygonObjects = L.geoJson(null, {
		onEachFeature: function (feature, layer) {
			if (feature.properties) {
				layer.on({
					click: function (e) {
						var htmlformcomponent = "" +
								"<table id='feature_data' class='table table-condensed table-bordered table-striped'>" +
									"<thead>" +
										"<tr>" +
											"<th colspan='2' class='text-center'>Dati indetificativi</th>" +
										"</tr>" +
									"</thead>" +
									"<tbody>" +
										"<tr>" +
											"<td class=''>Notes</td>" +
											"<td class=''><strong>"+feature.properties.notes+"</strong></td>" +
										"</tr>" +
									"</tbody>" +
								"</table>" +
							"";
						$("#app_modal_body").empty();
						$("#app_modal_body").removeClass().addClass('modal-body');
						$("#app_modal_size").removeClass().addClass('modal-dialog');
						$("#app_modal_body").html(htmlformcomponent);
						$("#app_modal_label").html("POLYGON");
						
						$("#modalbox").modal('show');
					}
				});
			}
		}
	});
	promisePolygon.then(function (data) {
		polygonObjects.addData(data);
		map.addLayer(polygonObjects);
	});
										
										
										
	var url = "https://test-paesaggistica.lavoripubblici.sicilia.it/geoserver/mappers/wms";
										
	//################# INIZIO PARTICELLA SELEZIONATA #################
	<?php if ( strlen($_SESSION['SELECT_PARTICELLA']) > 100 ) { ?>
		particella = L.geoJson(<?php echo $_SESSION['SELECT_PARTICELLA'];?>, {
					style: {'color': "#ff0000",'fillColor': "rgb(255, 255, 0)",'fillOpacity': 0.4,'dashArray': 4,'weight': 3,'opacity': 0.9}
			});
	<?php } ?>	  
	//################# FINE PARTICELLA SELEZIONATA #################
										
	odm1 = L.tileLayer ('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
		  maxZoom: 20,
		  minZoom: 1,
		  transparent: true,
		  attribution: 'OpenStreetMap | contributors CC-BY-SA.'
		});


	odm2 = L.tileLayer ('http://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}', {
		  maxZoom: 20,
		  minZoom: 1,
		  transparent: true,
		  attribution: '© Esri | Source: Esri, USDA, USGS, AEX, GeoEye and the GIS User Community'
		});


	odm3 = L.tileLayer.wms (url, {
		  maxZoom: 20,
		  minZoom: 5,
		  transparent: true,
		  layers: 'mappers:provincie',
		  attribution: '© mapcloud services'
		});
										
	ctr10k = L.tileLayer.wms ('http://geoportal.mapcloud.it:8080/geoserver/wms', {
		  format: 'image/png',
		  transparent: true,
		  maxZoom: 20,
		  minZoom: 5,
		  transparent: true,
		  layers: 'mapcloud:ctr10k',
		  attribution: 'Carta Tecnica Regionale 1:10.000 - Regione Sicilia (Servizio WMS)'
		});
	
										
  	particelle = L.tileLayer.wms(url, {
            layers: "mappers:particelle_<?php echo $_SESSION['COMUNE_BELF']; ?>",
            format: "image/png",
			maxZoom: 20,
			minZoom: 10,
            transparent: true,
		   attribution: '© mapcloud services'
  	}),										
		
										
	map = L.map("map", {
		zoom: <?php echo $_SESSION['ZOOM'];?>,
		center: [<?php echo $_SESSION['CENTER'];?>],
		layers: [odm1,particella],
		minZoom: 3,
		maxZoom: 20,
		zoomControl: false,
		attributionControl: false
	});
	
	map.setMaxBounds([<?php echo $_SESSION['BOUND']; ?>]);

	var zoomControl = L.control.zoom({
		position: "topleft"
	}).addTo(map);
								
										
	var baseLayers = [
                {label: '<b>Opendata Map</b>', noShow: false, children: [
						 {label: 'OpenStreetMap', layer: odm1},
						 {label: 'Satellite Image', layer: odm2},
						 {label: 'Limiti provinciali', layer: odm3},
                ]},
                {label: '<b>Cartografia Regionale</b>', children: [
                         {label: 'CTR 10K - volo 2012-2013', layer: ctr10k },
                ]},
			];
										
	var overlayLayers =
        {
		label: '<b>CARTOGRAFICI</b>',
		noShow: true,
		children: [
			{label: '<b>Catasto</b>', children: [
				 {label: 'Particelle catastali', layer: particelle},
			]},
			{label: '<b>Particelle progetto</b>', children: [
				 {label: 'Particelle selezionate', layer: particella},
			]},
			{label: '<b>Elelenti del progetto</b>', children: [
				 {label: 'Elementi puntuali', layer: pointObjects},
				 {label: 'Elementi lineari', layer: linestringObjects},
				 {label: 'Elementi poligonali', layer: polygonObjects},
			]},
			
            ]
        };

	var options = {
		collapsed: true,
		closedSymbol: '<i class="fal fa-plus-square" style="margin-right:5px"></i>',
		openedSymbol: '<i class="fal fa-minus-square" style="margin-right:5px"></i>',
		namedToggle: false,
		spaceSymbol: ' ',
		selectorBack: false,
		collapseAll: '',
		expandAll: '',
		};
											
	var layerControlTree = L.control.layers.tree(baseLayers, overlayLayers, options).addTo(map);

										
}