document_map_solr_search_results.html
1 <section id="map-result">
2
3 <#include "document_search_solr_search_results.html">
4
5 <div class="container">
6 <div class="map-msg">
7 #i18n{participatorybudget.search.map.legendProjectsWithoutAddress}
8 </div>
9
10 <div id="map" class="clearfix" ></div>
11 </div>
12
13 </section>
14
15 <#-- *********************************************************************************** -->
16 <#-- * Javascript Javascript Javascript Javascript Javascript Javascript Javascript Ja * -->
17 <#-- * Javascript Javascript Javascript Javascript Javascript Javascript Javascript Ja * -->
18 <#-- *********************************************************************************** -->
19
20 <script type='text/javascript'>
21 var loadresource = document.createElement('link');
22 loadresource.setAttribute("rel", "stylesheet");
23 loadresource.setAttribute("type", "text/css");
24 loadresource.setAttribute("href", "js/plugins/leaflet/leaflet/leaflet.css");
25 document.getElementsByTagName("head")[0].appendChild(loadresource);
26
27 loadresource = document.createElement('link');
28 loadresource.setAttribute("rel", "stylesheet");
29 loadresource.setAttribute("type", "text/css");
30 loadresource.setAttribute("href", "js/plugins/leaflet/leaflet/MarkerCluster.css");
31 document.getElementsByTagName("head")[0].appendChild(loadresource);
32
33 loadresource = document.createElement('link');
34 loadresource.setAttribute("rel", "stylesheet");
35 loadresource.setAttribute("type", "text/css");
36 loadresource.setAttribute("href", "js/plugins/leaflet/leaflet/MarkerCluster.Default.css");
37 document.getElementsByTagName("head")[0].appendChild(loadresource);
38 </script>
39 <script type="text/javascript" src="js/plugins/leaflet/leaflet/leaflet.js"></script>
40 <script type="text/javascript" src="js/plugins/leaflet/esri/esri-leaflet.js"></script>
41 <script type="text/javascript" src="js/plugins/leaflet/leaflet/leaflet.markercluster.js"></script>
42 <script type="text/javascript" src="js/plugins/leaflet/esri/esri-leaflet-clustered-feature-layer.js"></script>
43 <script src='https://api.mapbox.com/mapbox.js/plugins/leaflet-fullscreen/v1.0.1/Leaflet.fullscreen.min.js'></script>
44 <link href='https://api.mapbox.com/mapbox.js/plugins/leaflet-fullscreen/v1.0.1/leaflet.fullscreen.css' rel='stylesheet' />
45
46 <script type="text/javascript">
47 var arrondissements = {
48 "0": {"pos": [48.859085, 2.347403], "cnt": 0, "geoloc_cnt": 0},
49 "1": {"pos": [48.862422, 2.337595], "cnt": 0, "geoloc_cnt": 0},
50 "2": {"pos": [48.868222, 2.343667], "cnt": 0, "geoloc_cnt": 0},
51 "3": {"pos": [48.863219, 2.360162], "cnt": 0, "geoloc_cnt": 0},
52 "4": {"pos": [48.854448, 2.357675], "cnt": 0, "geoloc_cnt": 0},
53 "5": {"pos": [48.844653, 2.351109], "cnt": 0, "geoloc_cnt": 0},
54 "6": {"pos": [48.849865, 2.334951], "cnt": 0, "geoloc_cnt": 0},
55 "7": {"pos": [48.856129, 2.312587], "cnt": 0, "geoloc_cnt": 0},
56 "8": {"pos": [48.873376, 2.312882], "cnt": 0, "geoloc_cnt": 0},
57 "9": {"pos": [48.877544, 2.338310], "cnt": 0, "geoloc_cnt": 0},
58 "10": {"pos": [48.876526, 2.361216], "cnt": 0, "geoloc_cnt": 0},
59 "11": {"pos": [48.859391, 2.380633], "cnt": 0, "geoloc_cnt": 0},
60 "12": {"pos": [48.841399, 2.390914], "cnt": 0, "geoloc_cnt": 0},
61 "13": {"pos": [48.829421, 2.366010], "cnt": 0, "geoloc_cnt": 0},
62 "14": {"pos": [48.831096, 2.329405], "cnt": 0, "geoloc_cnt": 0},
63 "15": {"pos": [48.843012, 2.294905], "cnt": 0, "geoloc_cnt": 0},
64 "16": {"pos": [48.860419, 2.279201], "cnt": 0, "geoloc_cnt": 0},
65 "17": {"pos": [48.887349, 2.308634], "cnt": 0, "geoloc_cnt": 0},
66 "18": {"pos": [48.891820, 2.348945], "cnt": 0, "geoloc_cnt": 0},
67 "19": {"pos": [48.886983, 2.386271], "cnt": 0, "geoloc_cnt": 0},
68 "20": {"pos": [48.863604, 2.401843], "cnt": 0, "geoloc_cnt": 0},
69 };
70
71
72 var map = L.map('map', {fullscreenControl:true} );
73
74 var defaultIcon = L.Icon.extend({
75 options: {
76 iconSize: [25, 41],
77 iconAnchor: [12, 41],
78 popupAnchor: [1, -34],
79 shadowSize: [41, 41],
80 shadowUrl: L.Icon.Default.imagePath + '/marker-shadow.png'
81 }
82 });
83 var brownIcon = new defaultIcon({
84 iconUrl: L.Icon.Default.imagePath + '/marker-icon-brown.png',
85 iconRetinaUrl: L.Icon.Default.imagePath + '/marker-icon-brown-2x.png'
86 });
87 var createProjetOPCluster = function (cluster) {
88 var childCount = cluster.getChildCount();
89 return new L.DivIcon({ html: '<div><span>' + childCount + '</span></div>', className: 'marker-cluster marker-cluster-opproject', iconSize: new L.Point(40, 40) });
90 };
91 var createProjetCluster = function (cluster) {
92 var childCount = cluster.getChildCount();
93 return new L.DivIcon({ html: '<div><span>' + childCount + '</span></div>', className: 'marker-cluster marker-cluster-project', iconSize: new L.Point(40, 40) });
94 };
95
96 var arr = "${arr!""}";
97 if ((arr == "") || (arr == "whole_city") || (arr == "all_arr")) {
98 map.setView([48.85632, 2.33272], 12);
99 } else {
100 var arrondissemnt= arr.split("e arrond");
101 map.setView(arrondissements[parseInt(arrondissemnt)]["pos"], 14);
102 }
103
104 // Adding first basemap to map
105 var esri_streets = L.esri.basemapLayer('Streets').addTo(map);
106
107 var markers = new L.MarkerClusterGroup({
108 iconCreateFunction: createProjetCluster
109 });
110 var layergroup_arrondissements = L.layerGroup();
111 var layergroup_currentcampaign = L.layerGroup();
112 var layergroup_qpvqva = L.layerGroup();
113 layergroup_currentcampaign.addLayer(markers);
114 layergroup_currentcampaign.addLayer(layergroup_arrondissements);
115 var markers_projectsOP = new L.MarkerClusterGroup({
116 iconCreateFunction: createProjetOPCluster
117 });
118
119 // Adding layers to map
120 map.addLayer(layergroup_currentcampaign)
121
122 map.addLayer(layergroup_qpvqva); // To charge all informations
123 map.removeLayer(layergroup_qpvqva);
124
125 map.addLayer(markers_projectsOP);
126
127
128
129 var arrondissements_layer_qpv = L.esri.featureLayer({
130 // "url": 'http://capgeo.sig.paris.fr/arcgis/rest/services/capgeo_dsti/DSTI_BP2016_QPV_QVA_WGS84/MapServer/0',
131 // "url": 'https://services1.arcgis.com/yFAX7hJID4ONeUHP/arcgis/rest/services/SECTEUR_NPQV_WGS84/FeatureServer/0',
132 "url": 'https://services1.arcgis.com/yFAX7hJID4ONeUHP/arcgis/rest/services/QPV_QVA_GPRU/FeatureServer/0',
133 "style": {
134 "color": "#ffffff",
135 "weight": 0,
136 "opacity": 1,
137 "fillOpacity": 0.3,
138 "fillColor": "#33ff33",
139 },
140 "where": "C_DEP='75' AND C_NAT_QPV='NQPV'"
141 });
142 //To have a popup giving the name (removed but might be added again)
143 //arrondissements_layer_qpv.bindPopup(function (feature) {
144 // feature.properties["CodePostal"] = feature.properties["C_CAINSEE"] - 100;
145 // return L.Util.template('<p style="padding-top:10px"><strong>{L_NQPV}</strong><br/>{CodePostal}</p>', feature.properties);
146 //});
147 var arrondissements_layer_qva = L.esri.featureLayer( {
148 // "url": 'http://capgeo.sig.paris.fr/arcgis/rest/services/capgeo_dsti/DSTI_BP2016_QPV_QVA_WGS84/MapServer/0',
149 // "url": 'https://services1.arcgis.com/yFAX7hJID4ONeUHP/arcgis/rest/services/SECTEUR_NPQV_WGS84/FeatureServer/0',
150 "url": 'https://services1.arcgis.com/yFAX7hJID4ONeUHP/arcgis/rest/services/QPV_QVA_GPRU/FeatureServer/0',
151 "style": {
152 "color": "#ffffff",
153 "weight": 0,
154 "opacity": 1,
155 "fillOpacity": 0.3,
156 "fillColor": "#33ff33",
157 },
158 "where": "C_DEP='75' AND C_NAT_QPV='QVA'"
159 });
160 //To have a popup giving the name (removed but might be added again)
161 //arrondissements_layer_qva.bindPopup(function (feature) {
162 // feature.properties["CodePostal"] = feature.properties["C_CAINSEE"] - 100;
163 // return L.Util.template('<p style="padding-top:10px"><strong>{L_NQPV}</strong><br/>{CodePostal}</p>', feature.properties);
164 //});
165 var arrondissements_layer_gpru = L.esri.featureLayer( {
166 "url": 'https://services1.arcgis.com/yFAX7hJID4ONeUHP/arcgis/rest/services/QPV_QVA_GPRU/FeatureServer/0',
167 "style": {
168 "color": "#ffffff",
169 "weight": 0,
170 "opacity": 1,
171 "fillOpacity": 0.3,
172 "fillColor": "#33ff33",
173 },
174 "where": "GPRU_NOM!=''"
175 });
176 var arrondissements_layer_qbp = L.esri.featureLayer( {
177 "url": 'https://services1.arcgis.com/yFAX7hJID4ONeUHP/arcgis/rest/services/QPV_QVA_GPRU/FeatureServer/0',
178 "style": {
179 "color": "#ffffff",
180 "weight": 0,
181 "opacity": 1,
182 "fillOpacity": 0.3,
183 "fillColor": "#33ff33",
184 },
185 "where": "EXT_BP!=''"
186 });
187 layergroup_qpvqva.addLayer(arrondissements_layer_qpv);
188 layergroup_qpvqva.addLayer(arrondissements_layer_qva);
189 layergroup_qpvqva.addLayer(arrondissements_layer_gpru);
190 layergroup_qpvqva.addLayer(arrondissements_layer_qbp);
191
192 var points_tmp = [
193 <#list points as point>
194 {
195 "type": "${point.type}",
196 "code": "${point.code}",
197 "id": "${point.id}",
198 "geojson": ${point.geojson}
199 }<#if point_has_next>,</#if>
200 </#list>
201 ];
202 var points_projects_op_tmp = [
203 <#list projects_op_points as point>
204 {
205 "type": "${point.type}",
206 "code": "${point.code}",
207 "id": "${point.id}",
208 "geojson": ${point.geojson}
209 }<#if point_has_next>,</#if>
210 </#list>
211 ];
212 var points = [];
213 var match_geoloc = "doc_geoloc-";
214 var match_geoloc_length = match_geoloc.length;
215 var match_ardt = "doc_ardt-";
216 var match_ardt_length = match_ardt.length;
217 var match_paris = "doc_paris-";
218 var match_paris_length = match_paris.length;
219 var match_geoloc_ardt = "ardt-";
220 var match_geoloc_ardt_length = match_geoloc_ardt.length;
221 var match_geoloc_paris = "paris-";
222 var match_geoloc_paris_length = match_geoloc_paris.length;
223 for (var i =0; i<points_tmp.length; i++) {
224 var code_icon = points_tmp[i]["geojson"]["properties"]["icon"];
225 if (code_icon.slice(0,match_geoloc_length) == match_geoloc) {
226 if (code_icon.slice(match_geoloc_length, match_geoloc_length + match_geoloc_ardt_length) == match_geoloc_ardt) {
227 var ardt_code = code_icon.slice(match_geoloc_length+match_geoloc_ardt_length,match_geoloc_length+match_geoloc_ardt_length+5); // "750XX"
228 var ardt_n = parseInt(ardt_code) - 75000;
229 if (1 <= ardt_n && ardt_n <= 20) {
230 arrondissements[ardt_n]["geoloc_cnt"] = arrondissements[ardt_n]["geoloc_cnt"] + 1;
231 }
232 points.push(points_tmp[i]);
233 } else if (code_icon.slice(match_geoloc_length, match_geoloc_length + match_geoloc_paris_length) == match_geoloc_paris) {
234 arrondissements["0"]["geoloc_cnt"] = arrondissements["0"]["geoloc_cnt"] + 1;
235 points.push(points_tmp[i]);
236 }
237 } else if (code_icon.slice(0,match_ardt_length) == match_ardt) {
238 var ardt_code = code_icon.slice(match_ardt_length,match_ardt_length+5); // "750XX"
239 var ardt_n = parseInt(ardt_code) - 75000;
240 if (1 <= ardt_n && ardt_n <= 20) {
241 arrondissements[ardt_n]["cnt"] = arrondissements[ardt_n]["cnt"] + 1;
242 }
243 } else if (code_icon.slice(0,match_paris_length) == match_paris) {
244 arrondissements["0"]["cnt"] = arrondissements["0"]["cnt"] + 1;
245 } else if (points_tmp[i]["type"] == "doc") {
246 points.push(points_tmp[i]);
247 }
248 }
249 for (var i =0; i<points_projects_op_tmp.length; i++) {
250 points.push(points_projects_op_tmp[i]);
251 }
252
253 for (var i in arrondissements) {
254 if (arrondissements[i]["cnt"] != 0) {
255 var radius = i == 0 ? 40 : 15+Math.floor(5*Math.log(Math.max(1, arrondissements[i]["cnt"])) / Math.LN10);
256 var clazz = i == 0 ? "paris-cluster paris-cluster-small" : "ardt-cluster ardt-cluster-small";
257 var icon = new L.DivIcon({
258 className: 'label',
259 html: "<div class=\"leaflet-marker-icon " + clazz + "\"><div style=\"width: " + radius + "px; height:" + radius + "px; margin-top:-" + (radius/2) + "px; margin-left:-" + (radius/2) + "px;\"><span style=\"line-height:" + radius + "px\">"+arrondissements[i]["cnt"]+"</span></div></div>"
260 });
261 var circleLabel = L.marker(arrondissements[i]["pos"], {icon:icon});
262 layergroup_arrondissements.addLayer(circleLabel);
263
264 var strProjet = "projet" + ((arrondissements[i]["geoloc_cnt"] + arrondissements[i]["cnt"]) != 1 ? "s" : "");
265 var strArdtTitle = (i==0) ? "whole_city" : (i+ "e arrondissement");
266 var strArdtDescription = (i==0) ? "pour Paris" : "dans cet arrondissement";
267 var strPopup = "<p><strong>" + strArdtTitle + " :</strong></p><p>Il y a " +(arrondissements[i]["cnt"] + arrondissements[i]["geoloc_cnt"]) + " " + strProjet + " " + strArdtDescription + ", dont " + arrondissements[i]["cnt"] + " sans adresse precise.</p><p><button type=\"button\" class=\"btn btn-default\" onclick=\"onClickArdtPopup("+i+");\">Voir ces projets</button></p>";
268 circleLabel.bindPopup(strPopup);
269 }
270 }
271 for (var i =0; i<points.length; i++) {
272 points[i].loc = [points[i].geojson.geometry.coordinates[1], points[i].geojson.geometry.coordinates[0]];
273 points[i].portlet_id= "foo";
274 }
275
276 for (var i in points) {
277 var marker;
278 if (points[i]["type"] == "gagnant") { // --------------------------------------
279 marker = L.marker(points[i]["loc"], {icon: brownIcon});
280 } else {
281 marker = L.marker(points[i]["loc"]);
282 }
283 popupContent = "<p>Chargement de " + points[i]["type"] + " " + points[i]["id"] + " " + points[i]["code"] + "...</p>";
284 marker.bindPopup(popupContent)
285 marker.on('click', (function(point) {
286 return function(e) {
287 var popup = e.target.getPopup();
288 if (!popup._LuteceUpdated) {
289 var properties = point["properties"];
290 var url;
291 if ( (typeof(properties) != 'undefined') && (typeof(properties["popupAjax"]) != 'undefined') ) {
292 url = properties["popupAjax"];
293 } else {
294 url = "rest/leaflet/popup/" + "doc" + "/" + point["id"] + "/" + point["code"];
295 }
296 $.get(url).done(function(data) {
297 popup.setContent(data);
298 popup.update();
299 popup._LuteceUpdated = true;
300 }).fail(function() {
301 map.closePopup();
302 });
303 }
304 };
305 })(points[i]));
306 if (points[i]["type"] == "gagnant") {
307 markers_projectsOP.addLayer(marker);
308 } else {
309 markers.addLayer(marker);
310 }
311 }
312
313 var positron = L.tileLayer('http://s.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png', {
314 attribution: 'CartoDB base map, data from <a href="http://openstreetmap.org">OpenStreetMap</a>'
315 });
316 var esri_imagery = L.esri.basemapLayer('Imagery', {
317 maxNativeZoom: 18,
318 });
319
320 var baseMaps = {
321 "Fond de plan standard": esri_streets,
322 "Fond de plan grisé": positron,
323 "Vue Satellite" : esri_imagery
324 };
325
326 var overlayMaps = {
327 "Voir les Projets lauréats" : layergroup_currentcampaign,
328 "Voir les Chantiers localisés" : markers_projectsOP,
329 "Quartiers Populaires" : layergroup_qpvqva
330 };
331
332 // parametrage et ajout du L.control.layers a la carte
333 var control = L.control.layers(baseMaps, overlayMaps, {collapsed:false}).addTo(map);
334
335 // Leaflet Legend
336 var legend = L.control({position: 'bottomleft'});
337 legend.onAdd = function (map) {
338 var div = L.DomUtil.create('div', 'map-legend leaflet-control-layers leaflet-control-layers-expanded');
339 div.innerHTML += '<div class="map-legend-line"><div class="marker"><img src="' + (L.Icon.Default.imagePath + '/marker-icon.png') + '"></div>Projet gagnant</div>';
340 div.innerHTML += '<div class="map-legend-line"><div class="marker"><img src="' + (L.Icon.Default.imagePath + '/marker-icon-brown.png') + '"></div>Chantier localise</div>';
341 return div;
342 };
343 legend.addTo(map);
344
345 </script>