I am trying to rebuild this ESRI example with my own feature layers: https://developers.arcgis.com/javascript/jssamples/dataadapterfeaturelayer.html
Since I just want a dropdown menu existing out of the 5 layers I assume my script is going to be a simplified version of the example I have given above. I do succeed in visualizing my data and making the dropdown menu. I however do not succeed in making the dropdown menu active. I do not know where I am going wrong, I think I do not have enough understanding of the fundamentels of Javascript to put this together. Therefore I am asking it here.
Where am I going wrong? Or do you have any tips for me to continue in a more effective way?
What I made so far:
var map;
require(["esri/map","esri/layers/FeatureLayer", "dojo/domReady!", "esri/InfoTemplate"],
function(Map, FeatureLayer) {
map = new Map("mapDiv", {
center: [ 5.5, 52.485],
zoom: 08,
basemap: "satellite"});
map.on("load", function() {
query("#lplist").on("change", function(e) {
var value = e.currentTarget.value;
// Remove previously added layer
if (layer) {map.removeLayer(layer);
layer = null;
}
switch (value) {
case "Nederland":
layer = "http://.../MapServer/0";
case "Provincies":
layer = "http://.../MapServer/1";
case "Gemeenten":
layer = "http://.../MapServer/2";
case "Wijken":
layer = "http://.../MapServer/3";
case "Buurten":
layer = "http://.../MapServer/4";
break;
}))
if (layer) {
featureLayer = new FeatureLayer(layer,{
mode: FeatureLayer.MODE_ONDEMAND,
outFields: ["*"],
});
map.addLayer(featureLayer);
map.infoWindow.resize(155,75);
};
}}});
Underneath I am calling the above script (which is saved as a .js file) from a HTML file. I am under the understanding nothing is going wrong here, since it is exactly the same code as in the example.
<div id="map" data-dojo-type="dijit.layout.ContentPane" data-dojo-pros="region:'center'">
<div id="lppanel" class="roundedCorners">
<table>
<tr>
<td style="padding:5px;">
<div style="font-size: 16pt; font-weight:bold;">
Voeg het gewenste schaalniveau toe aan de kaart:
</div>
<div style="padding:10px;">
<select id="lplist">
<option value="choose" selected="selected">(Selecteer een optie)</option>
<option value="Nederland">Nederland</option>
<option value="Provincies">Provincies</option>
<option value="Gemeenten">Gemeenten</option>
<option value="Wijken">Wijken</option>
<option value="Buurten">Buurten</option>
</select>
</div>
</td>
</tr>
</table>
</div>
<script src=map_.js>
</script>