Manage operational layers

View on GitHubSample viewer app

Add, remove, and reorder operational layers in a map.

Image of manage operational layers

Use case

Operational layers display the primary content of the map and usually provide dynamic content for the user to interact with (as opposed to basemap layers that provide context).

The order of operational layers in a map determines the visual hierarchy of layers in the view. You can bring attention to a specific layer by rendering it above other layers.

How to use the sample

When the app starts, the display lists of operational layers and any removed layers. Tap the up/down buttons to change its position, or the visibility button to add it from the map. Tap removed layers to add them back to the map. The map will be updated automatically.

How it works

  1. Get the operational layers MutableList<Layer> from the map using map.operationalLayers.
  2. Add or remove layers using mutableLayerList.add(layer) and layerList.remove(layer) respectively. The last layer in the list will be rendered on top.

Relevant API

  • ArcGISMap
  • ArcGISMapImageLayer
  • LayerList

Additional information

This sample uses the GeoView-Compose Toolkit module to be able to implement a composable MapView. You cannot add the same layer to the map multiple times or add the same layer to multiple maps. Instead, clone the layer with layer.clone() before duplicating.

Tags

add, delete, geoview-compose, layer, map, remove, toolkit

Sample Code

MapViewModel.ktMapViewModel.ktMainActivity.ktMainScreen.ktLayersList.kt
Use dark colors for code blocksCopy
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
/* Copyright 2023 Esri
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *    http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 *
 */

package com.esri.arcgismaps.sample.manageoperationallayers.components

import android.app.Application
import androidx.compose.runtime.mutableStateListOf
import androidx.lifecycle.AndroidViewModel
import com.arcgismaps.mapping.ArcGISMap
import com.arcgismaps.mapping.BasemapStyle
import com.arcgismaps.mapping.Viewpoint
import com.arcgismaps.mapping.layers.ArcGISMapImageLayer
import com.arcgismaps.mapping.layers.Layer
import com.esri.arcgismaps.sample.manageoperationallayers.R

class MapViewModel(
    application: Application
) : AndroidViewModel(application) {

    // create an ArcGISMap
    val arcGISMap: ArcGISMap = ArcGISMap(BasemapStyle.ArcGISTopographic)

    // a list of the active map image layer names
    var activateLayerNames = mutableStateListOf<String>()
        private set

    // a list of the inactive map image layer names
    var inactiveLayers = mutableStateListOf<Layer>()
        private set

    init {
        // set the three map image layers
        val imageLayerElevation = ArcGISMapImageLayer(
            url = application.getString(R.string.elevationServiceURL)
        )
        val imageLayerCensus = ArcGISMapImageLayer(
            url = application.getString(R.string.censusServiceURL)
        )
        val imageLayerDamage = ArcGISMapImageLayer(
            url = application.getString(R.string.damageServiceURL)
        )
        // get a list of the layer names
        activateLayerNames.addAll(
            listOf(
                imageLayerElevation.name,
                imageLayerCensus.name,
                imageLayerDamage.name
            )
        )

        // add the layers to the map's operational layers
        arcGISMap.apply {
            initialViewpoint = Viewpoint(39.8, -98.6, 5e7)
            operationalLayers.addAll(
                listOf(
                    imageLayerElevation,
                    imageLayerCensus,
                    imageLayerDamage
                )
            )
        }
    }

    /**
     * Swap the active layer with the layer on top.
     */
    fun moveLayerUp(layerName: String) {
        // get a copy of the operational layers
        val operationalLayers = arcGISMap.operationalLayers.toMutableList()
        // if move up on the first item is selected, then return
        if (operationalLayers.first().name == layerName) {
            return
        }
        // get the index of the tapped layer
        val layerIndex = operationalLayers.indexOf(operationalLayers.find { it.name == layerName })
        // swap the selected layer with the layer on top
        operationalLayers.swap(layerIndex, layerIndex - 1)
        // update the layer names list
        activateLayerNames.apply {
            clear()
            addAll(operationalLayers.map { layer -> layer.name })
        }
        // update the operational layers
        arcGISMap.operationalLayers.apply {
            clear()
            addAll(operationalLayers)
        }
    }

    /**
     * Swap the active layer with the layer on bottom.
     */
    fun moveLayerDown(layerName: String) {
        // get a copy of the operational layers
        val operationalLayers = arcGISMap.operationalLayers.toMutableList()
        // if move down on the last item is selected, then return
        if (operationalLayers.last().name == layerName) {
            return
        }
        // get the index of the tapped layer
        val layerIndex = operationalLayers.indexOf(operationalLayers.find { it.name == layerName })
        // swap the selected layer with the layer on bottom
        operationalLayers.swap(layerIndex, layerIndex + 1)
        // update the layer names list
        activateLayerNames.apply {
            clear()
            addAll(operationalLayers.map { layer -> layer.name })
        }
        // update the operational layers
        arcGISMap.operationalLayers.apply {
            clear()
            addAll(operationalLayers)
        }
    }

    /**
     * Removes [layerName] from map and adds it to the list of [inactiveLayers].
     */
    fun removeLayerFromMap(layerName: String) {
        arcGISMap.operationalLayers.apply {
            val layerIndex = indexOf(find { it.name == layerName })
            inactiveLayers.add(get(layerIndex))
            removeAt(layerIndex)
            activateLayerNames.removeAt(layerIndex)
        }
    }

    /**
     * Adds the [layerName] from the list of [inactiveLayers] to the map's operational layers.
     */
    fun addLayerToMap(layerName: String) {
        inactiveLayers.apply {
            val layerIndex = indexOf(find { it.name == layerName })
            arcGISMap.operationalLayers.add(get(layerIndex))
            activateLayerNames.add(get(layerIndex).name)
            removeAt(layerIndex)
        }
    }
}

/**
 * Extension function to swap two values of a mutable list.
 */
private fun <T> MutableList<T>.swap(index1: Int, index2: Int) {
    val tmp = this[index1]
    this[index1] = this[index2]
    this[index2] = tmp
}

Your browser is no longer supported. Please upgrade your browser for the best experience. See our browser deprecation post for more details.