MapImageLayer Sublayers

406
2
12-22-2021 06:25 PM
Wade
by
New Contributor II

I have one service and I want several. Can this method be used directly? Will it affect the speed of the web page?

 

 

<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
    <title>MapImageLayer - Toggle sublayer visibility | Sample | ArcGIS API for JavaScript 4.22</title>

    <link rel="stylesheet" href="https://js.arcgis.com/4.22/esri/themes/light/main.css" />
    <script src="https://js.arcgis.com/4.22/"></script>

    <script>
        require([
            "esri/Map",
            "esri/views/MapView",
            "esri/layers/MapImageLayer",
            "esri/widgets/LayerList"
        ], (
            Map,
            MapView,
            MapImageLayer,
            LayerList
        ) => {
            const layer0 = new MapImageLayer({
                url: "https://sampleserver6.arcgisonline.com/arcgis/rest/services/USA/MapServer",
                title: 'MapImageLayer1',
                sublayers: [
                    {
                        id: 0,
                        title: 'Cities',
                        visible: true
                    }
                ]
            });

            const layer1 = new MapImageLayer({
                url: "https://sampleserver6.arcgisonline.com/arcgis/rest/services/USA/MapServer",
                title: 'MapImageLayer2',
                sublayers: [
                    {
                        id: 1,
                        title: 'Highways',
                        visible: true
                    }
                ]
            });

            const layer2 = new MapImageLayer({
                url: "https://sampleserver6.arcgisonline.com/arcgis/rest/services/USA/MapServer",
                title: 'MapImageLayer3',
                sublayers: [
                    {
                        id: 2,
                        title: 'States',
                        visible: true
                    }
                ]
            });

            const layer3 = new MapImageLayer({
                url: "https://sampleserver6.arcgisonline.com/arcgis/rest/services/USA/MapServer",
                title: 'MapImageLayer4',
                sublayers: [
                    {
                        id: 3,
                        title: 'Counties',
                        visible: true
                    }
                ]
            });

            const map = new Map({
                basemap: "dark-gray-vector"
            });

            const view = new MapView({
                container: "viewDiv",
                map: map,
                zoom: 3,
                center: [-99, 39]
            });

            const layerList = new LayerList({
                view: view
            });

            view.ui.add(layerList, {
                position: "top-right"
            });

            view.on('layerview-create', (event) => {
                view.map.layers.add(layer3);
                view.map.layers.add(layer2);
                view.map.layers.add(layer1);
                view.map.layers.add(layer0);
            });
        });
    </script>

    <style>
        html,
        body {
            padding: 0;
            margin: 0;
            height: 100%;
            width: 100%;
        }

        #viewDiv {
            position: absolute;
            right: 0;
            left: 0;
            top: 0;
            bottom: 0;
        }
    </style>
</head>

<body>
    <div id="viewDiv"></div>
</body>
</html>

 

0 Kudos
2 Replies
ReneRubalcava
Frequent Contributor II

If you only want the individual layers, is there a reason you don't add them as FeatureLayers? Doing multiple layers from the same map service means multiple image requests instead of one, so would be less efficient.

0 Kudos
Wade
by
New Contributor II

For multiple FeatureLayers, loading time seems to be longer

0 Kudos