[GIS] Browse (add/remove) ArcGIS Server Services (Layers) from the ESRI Javascript API viewer

Question

I am quite new to the JavaScript API. I am not if there is a widget that does what I would like but I am trying to create a web map that allows the users to choose/add/remove layers located on our GIS Server. I can't figure out how to achieve something similar as the picture attachment. If anyone have any samples/tips, please let me know.

Answer 1

I'm not sure of a widget to do this although it wouldn't surprise me. I held off in case anyone else came along to offer a suggestion. However, in any event, it's actually quite easy to add and remove services. You add a service by declaring it and then calling the maps addLayer method, passing it the service to add, e.g.

var service = new ArcGISDynamicMapServiceLayer("http://blah.blah.blah");
map.addLayer(service);

Therefore to give the user the ability to do this you just need to present them with a text box to enter the URL and a button that when clicked will call code like the above, using the value of the text box as the URL for the service. You could offer some other options such as a radio button / drop down so they can specify the type of layer (e.g. dynamic, tiled) and then create the service using the appropriate constructor.

To remove a layer you can use the maps removeLayer function, passing it the service to remove. Again, the trickiest part is the UI needed to choose which layer is being removed rather than the actual removing of the layer. The map has a property called layerIds that is an array of IDs of the layers that have been added to the map, and a function called getLayer(id) that will return the layer with the specified ID.

So, you can remove the first layer that's been added to a map using:

map.removeLayer(map.getLayer(map.layerIds[0]));

To allow the user to choose which layer to remove you need for them to be able to specify the ID. Again, this could be a simply text box where you pass the number they enter to the removeLayer function. Althernatively, you could iterate through the layerIds array, getting each layer with the getLayer(id) function to build up a list, perhaps with a delete button for each layer. Each delete button should pass through the ID for the layer it corresponds to allowing it to be deleted. Remember to regenerate the list after a layer has been added or removed though!

Hope this helps.