-
Notifications
You must be signed in to change notification settings - Fork 0
/
MappaComuni.aspx
195 lines (164 loc) · 8.17 KB
/
MappaComuni.aspx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
<%@ Page
Title="Mappa comuni"
Language="C#"
MasterPageFile="~/Site.Master"
AutoEventWireup="true"
CodeBehind="MappaComuni.aspx.cs"
Inherits="PortFolio.comuni_italiani_json_api.MappaComuni"
%>
<asp:Content ID="HeadContet" ContentPlaceHolderID="Head" runat="server">
<style>
#map { height: 480px; }
</style>
<link href="Assets/Vendors/leaflet-1.8.0/leaflet.css" rel="stylesheet" />
<link href="Assets/Vendors/Leaflet.markercluster-1.5.3/dist/MarkerCluster.css" rel="stylesheet" />
<link href="Assets/Vendors/Leaflet.markercluster-1.5.3/dist/MarkerCluster.Default.css" rel="stylesheet" />
<script src="Assets/Vendors/leaflet-1.8.0/leaflet.js"></script>
<script src="Assets/Vendors/Leaflet.markercluster-1.5.3/dist/leaflet.markercluster.js"></script>
</asp:Content>
<asp:Content ID="BodyContent" ContentPlaceHolderID="MainContent" runat="server" class="container-fluid">
<h4>Mappa dei comuni italiani</h4>
<p>Ho implementato questa mappa utilizzanto la libreria leaflet.js in modo da poter consultare tutti i comuni italiani.<br />
I punti della mappa vengono generati tramite un file json precedentemente scaricato tramite un mio altro progetto ovvero
<a href="https://github.com/DarisCappelletti/comuni-italiani-json-api">"Comuni italiani json"</a>.<br />
Cliccando su un punto verranno mostrare le informazioni collegate a quel determinato comune.
Gli stemmi sono stati scaricati utilizzando il mio progetto <a href="https://github.com/DarisCappelletti/Stemmi-comuni-italiani">"Stemmi comuni italiani"</a>.
</p>
<div id="map"></div>
<script>
var siteUrl = <asp:Literal ID="litSiteUrl" runat="server" />
var map
$(document).ready(function () {
// Inizializzo la mappa
map = L.map('map').setView([43.5, 13.5], 8);
L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
maxZoom: 19,
attribution: '© OpenStreetMap'
}).addTo(map);
// Group we will append our markers to
var element = document.getElementById('map')
if (element !== null) {
// Set up cluster group
markers = new L.MarkerClusterGroup()
} else {
// Otherwise set up normal groupx`
markers = new L.LayerGroup()
}
markers.on("click", generatePopup);
// Name of lat, long columns in Google spreadsheet
var latitudine = 'Latitudine'
var longitudine = 'Longitudine'
// Marker options
var global_markers_data
// chiamata alla funzione di inizializzazione mappa con i dati dal json...
initMap()
});
// Imposta i dati del json sulla mappa
function loadMarkersToMap(markers_data) {
// If we haven't captured the Tabletop data yet
// We'll set the Tabletop data to global_markers_data
if (global_markers_data !== undefined) {
markers_data = global_markers_data;
// If we have, we'll load global_markers_data instead of loading Tabletop again
} else {
global_markers_data = markers_data;
}
for (var num = 0; num < markers_data.length; num++) {
// Capture current iteration through JSON file
current = markers_data[num];
let lat = current.latitude.replace(',', '.')
let long = current.longitude.replace(',', '.')
console.log(lat)
console.log(long)
//controllo se la proprieta' latitudine non e' vuota...
if ((lat !== null) && (long !== null)) {
// Add lat, long to marker
var marker_location = new L.LatLng(lat, long);
// Options for our circle marker
var layer_marker = L.marker(marker_location, {
opacity: 1
});
// Generate popup
layer_marker.bindPopup(generatePopup(current), { minWidth: 250, maxWidth: 350 });
// Add the ID
feature = layer_marker.feature = layer_marker.feature || {}; // Initialize feature
feature.type = feature.type || "Feature"; // Initialize feature.type
// Preparo i parametri per i dettagli
var props = feature.properties = feature.properties || {}; // Initialize feature.properties
//props.Id = current.Id;
//props.IdTpe = current.IdTpe;
//props.Nome = current.Nome;
//props.TipoEnte = current.TipoEnte;
//props.Ente = current.Ente;
//props.Uo = current.Uo;
//props.Stemma = current.Stemma;
//props.Categoria = current.Categoria;
//props.Descrizione = current.Descrizione;
// Add to feature group
markers.addLayer(layer_marker);
}
}
// Add feature group to map
map.addLayer(markers);
}
async function initMap(filtroTesto, filtroTipoEnte) {
// resetto i markers
markers.clearLayers();
global_markers_data = undefined;
// imposto i parametri per la chiamata
filtroTesto = filtroTesto == undefined ? "" : filtroTesto
await fetch(siteUrl + 'api/ComuniItalianiCoordinate?dataFromJson=true'
, {
method: 'GET',
headers: {
'Content-Type': 'application/json'
}
})
.then(async (response) => {
let data = await response.json();
loadMarkersToMap(data);
if (data.length == 1) {
var latitudine = data[0].Latitudine == undefined ? "" : data[0].Latitudine.toString()
var longitudine = data[0].Longitudine == undefined ? "" : data[0].Longitudine.toString()
simulaClickEvento(latitudine, longitudine);
generateDettagli(data[0])
}
else {
/*$('.dettagli-ente').empty()*/
}
})
}
function generatePopup(content) {
// Generate header
var nome_comune = content['NomeComune'];
/*var popup_header = '<h4><img class="stemma" src="https://procedimenti.regione.marche.it/images/stemmi/';
popup_header += cf_comune + '.png" alt="stemma ' + nome_comune + '">';
popup_header += nome_comune + '</h4><hr>'; */
// Imposto lo stemma del comune
var popup_header = '<div class="row"><div class="col-md-3">';
popup_header += '<img class="stemma" src="' + siteUrl +'/comuni-italiani-json-api/Assets/Images/Stemmi/' + nome_comune;
popup_header += '-Stemma.png" alt="stemma ' + nome_comune + '" style="width: 64px;"></div>';
popup_header += '<div class="col-md-9"><h4>' + nome_comune + '</h4></div></div><hr>';
// Generate content
var popup_content = '<div class="row">';
//if (totale_procedimenti === 0) //il comune ha aderito ma non ha inserito procedimenti, quindi visualizzo solo il pulsante con link generico
//{
// popup_content += '<div class="col-md-5"><a href="/TipologieProcedimento/Index2"';
// popup_content += '" class="btn btn-primary btn-sm" target="_blank" alt="visualizza tutti i procedimenti">Visualizza</a></div>';
//}
popup_content += '<div class="col-md-5"><strong>Sito web:</strong></div>';
popup_content += '<div class="col-md-2"></div>';
popup_content += '<div class="col-md-5"><a href="/TipologieProcedimento/Index2?enteCf=';
popup_content += '" class="btn btn-primary btn-sm" target="_blank" alt="visualizza tutti i procedimenti del ';
popup_content += nome_comune + '">Link</a></div>';
popup_content += '</div>';
/* var contatti = '<div class="row"><div class="col-md-12"><strong>Contatti</strong></div><div class="col-md-12">sportellolavorocingoli@regione.marche.it<br> regione.marche.centroimpiegomacerata@emarche.it<br> 0733/604715-602686</div></div>';
var pec = "non disponibile";
if(content['Pec'] !== null)
{
pec = content['Pec'];
} */
return popup_header + popup_content;
}
</script>
</asp:Content>