Hallo allemaal,
Ik ben heel nieuw met Leaflet.
Ik probeer een dynamicMapLayer op te zetten om een pop-up te hebben voor elke laag in de kaartservice.
Alle voorbeelden die ik tot nu toe heb gezien gebruiken kant-en-klare voorbeelden met eenvoudige laagdefinities. Ik gebruik een kaartservice met meer dan twee dozijn lagen, elk met een unieke set velden.
Wat ik graag zou willen doen is pop-up definities maken die uniek zijn voor elke laag. Waar ik vastloop is dat ik niet weet hoe ik de laagnamen kan identificeren die worden verzameld in de featureCollection array.
Dit is de code die ik hieronder gebruik. Het geeft een pop-up terug wanneer het een feature identificeert met de Facility Identifier en LegacyID velden.
Idealiter zou ik een methode hebben die de juiste pop-up velden retourneert op basis van de laagnaam (bijv. Sewer Manholes, Streets, Sewer Cleanout, enzovoort...).
Kan iemand me in de juiste richting wijzen? Dank u wel.
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Learning Leaflet</title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<!-- Laad Leaflet van CDN-->
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" />
<script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
<script src="http://cdn-geoweb.s3.amazonaws.com/esri-leaflet/0.0.1-beta.5/esri-leaflet.js"></script>
<style>
html, body, #map {
width : 100%;
height : 100%;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
document.getElement
var map = L.map('map').setView([35.578, -82.50], 17);
<!-- L.esri.basemapLayer("Gray").addTo(map); -->
var networkInfrastructure = L.esri.dynamicMapLayer('http://gis.msdbc.org/arcgis/rest/services/InternalViewer/NetworkInfrastructureI/MapServer',{useCors: false}).addTo(map);
var networkArray = networkInfrastructure.getLayers();
networkInfrastructure.bindPopup(function(error, featureCollection) {
if (error || featureCollection.features.length === 0) {
alert("je hebt gemist.");
return false;
} else {
var obj = featureCollection.features[1].properties;
// pop-up info
var facilityID = obj["Facility Identifier"];
var legacyID = obj["LEGACYID"];
// retourneer pop-up
return 'Facility ID: ' + facilityID + "<br>" +
'Legacy ID: ' + legacyID;
}
});
</script>
</body>
</html>
