ArcGIS REST API: hide/show layers

Question

I've developed an application on leaflet JS, which loads the services from local ArcGIS server through Arcgis REST API.

The following code loads the service:

function addServiceToMap(service, layers = ""){

    if(service){

        let url = "http://domain/arcgis/rest/services/" + service + "/MapServer?layers=show:" + layers + "&token="+token;

        let new_service = L.esri.dynamicMapLayer({
          url: url,
          opacity : 1,
          useCors: false,
          f: 'image'
        });
        new_service.addTo(map);
    }
}

The problem is, to hide a layer, I have to call this function, showing the required layers in the URL. Therefore, I add the service repeatedly.

Is there a better way?

Answer 1

Like you mentioned the service could be a single layer or grouped. In my example below, the first layer (mcounty) just has layer 2 from the service (layers: [2],). The second method (fcounty) just has layer 2 defined in it's url. (/MapServer/2)

Even through these are basically the same service, in the layer control I can turn each on/off separately.

//MapService as a Dynamic Layer  //Symbology comes from ArcServer Service
    mcounty =  L.esri.dynamicMapLayer({
        url:'https://gisservices.its.ny.gov/arcgis/rest/services/NYS_Civil_Boundaries/MapServer',
        layers: [2],
        opacity : 1
    });

    mcounty.bindPopup(function (error, featureCollection) {
        if(error || featureCollection.features.length === 0) {
              return false;
            } else {
              return '<b>NY County</br> Name: </b> '+ featureCollection.features[0].properties.NAME;
            }
    });
//END MapService as a Dynamic Layer 

//MapService as a Feature Layer //Symbology comes from ArcServer Service or defined here.
    fcounty = L.esri.featureLayer({
        url: 'https://gisservices.its.ny.gov/arcgis/rest/services/NYS_Civil_Boundaries/MapServer/2',
        simplifyFactor: 0.5,
        precision: 5,
        style: function (feature) {
            return { 
            color: 'blue', 
            fillColor: 'green',
            weight: 2 };
        }
    });

Answer 2

Use the layer control.

http://esri.github.io/esri-leaflet/examples/layers-control.html

In addition, you can also bring in your mapservice as a featurelayer to have more control over symbology and popups. As an example:

http://www.gistechsolutions.com/leaflet/DEMO/ArcServer/EsriMapServer.html

Use the control to turn on/off the layers which are both mapservices.