Manage popup content for features
This commit is contained in:
		
							parent
							
								
									a67d3dc274
								
							
						
					
					
						commit
						3f512497be
					
				| @ -19,7 +19,7 @@ GIS.initMap = async function (mapId, zoomLevel = 15) { | |||||||
|     }); |     }); | ||||||
|     let map = L.map(mapId, { |     let map = L.map(mapId, { | ||||||
|         attributionControl: false, |         attributionControl: false, | ||||||
|         minZoom: 6, |         minZoom: 11, | ||||||
|         layers: [osmap, layerVincoli] |         layers: [osmap, layerVincoli] | ||||||
|     }).setView([40.5492, 14.2317], zoomLevel); |     }).setView([40.5492, 14.2317], zoomLevel); | ||||||
| 
 | 
 | ||||||
| @ -38,6 +38,7 @@ GIS.initMap = async function (mapId, zoomLevel = 15) { | |||||||
|     // Il sistema di riferimento per i livelli geoJSON è EPSG3857
 |     // Il sistema di riferimento per i livelli geoJSON è EPSG3857
 | ||||||
| } | } | ||||||
| /** | /** | ||||||
|  |  * @todo Distinguere tipo di geojson per contenuto popup  | ||||||
|  * @param {string} geoJSON  |  * @param {string} geoJSON  | ||||||
|  * @param {Map} map  |  * @param {Map} map  | ||||||
|  */ |  */ | ||||||
| @ -46,6 +47,7 @@ GIS.loadLayer = async function (geoJSON, color = '#987db7') { | |||||||
|         .then(res => res.json()) |         .then(res => res.json()) | ||||||
|         .catch(error => console.error(`Can't load layer ${geoJSON}. Reason: ${error}`)); |         .catch(error => console.error(`Can't load layer ${geoJSON}. Reason: ${error}`)); | ||||||
| 
 | 
 | ||||||
|  |     // DEBUG
 | ||||||
|     console.log(data.features); |     console.log(data.features); | ||||||
| 
 | 
 | ||||||
|     // Show data from feature in popUp?
 |     // Show data from feature in popUp?
 | ||||||
| @ -61,18 +63,33 @@ GIS.loadLayer = async function (geoJSON, color = '#987db7') { | |||||||
|             return style; |             return style; | ||||||
|         }, |         }, | ||||||
|         onEachFeature: function (feature, layer) { |         onEachFeature: function (feature, layer) { | ||||||
|             layer.bindPopup(` |             layer.bindPopup(GIS.featurePopup(geoJSON, feature)); | ||||||
|  |         } | ||||||
|  |     }); | ||||||
|  | 
 | ||||||
|  |     return layer; | ||||||
|  | } | ||||||
|  | /** | ||||||
|  |  * Generate proper content for features popup | ||||||
|  |  * @todo Hard-coded names!! | ||||||
|  |  *  | ||||||
|  |  * @param {string} layerName | ||||||
|  |  * @param {object} feature | ||||||
|  |  * @returns {string} The popup's content | ||||||
|  |  */ | ||||||
|  | GIS.featurePopup = function (layerName, feature) { | ||||||
|  |     const content = { | ||||||
|  |         'vincoli.geojson' : ` | ||||||
|                 <table class="table m-2"> |                 <table class="table m-2"> | ||||||
|                 <tr><td class="text-bold">Oggetto</td><td>${feature.properties.OGGETTO}</td></tr> |                 <tr><td class="text-bold">Oggetto</td><td>${feature.properties.OGGETTO}</td></tr> | ||||||
|                 <tr><td class="text-bold">Anno</td><td>${feature.properties.ANNO}</td></tr> |                 <tr><td class="text-bold">Anno</td><td>${feature.properties.ANNO}</td></tr> | ||||||
|                 <tr><td class="text-bold">Comune</td><td>${feature.properties.COMUNE}</td></tr> |                 <tr><td class="text-bold">Comune</td><td>${feature.properties.COMUNE}</td></tr> | ||||||
|                 <tr><td class="text-bold">Proprietà</td><td>${feature.properties.PROPRIETA}</td></tr> |                 <tr><td class="text-bold">Proprietà</td><td>${feature.properties.PROPRIETA}</td></tr> | ||||||
|                 </table> |                 </table> | ||||||
|             `);
 |             `,
 | ||||||
|         } |     }; | ||||||
|     }); |  | ||||||
| 
 | 
 | ||||||
|     return layer; |     return content[layerName]; | ||||||
| } | } | ||||||
| 
 | 
 | ||||||
| export default GIS; | export default GIS; | ||||||
		Loading…
	
		Reference in New Issue
	
	Block a user