Manage operational layers | ArcGIS Maps SDK for Kotlin

View on GitHub

Sample 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

Get the operational layers MutableList<Layer> from the map using map.operationalLayers.
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.

Sample Code

MainActivity.kt

MapViewModel.kt

LayersList.kt

MainScreen.kt

/* 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

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.activity.enableEdgeToEdge
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Surface
import androidx.compose.runtime.Composable
import com.arcgismaps.ApiKey
import com.arcgismaps.ArcGISEnvironment
import com.esri.arcgismaps.sample.sampleslib.theme.SampleAppTheme
import com.esri.arcgismaps.sample.manageoperationallayers.screens.MainScreen

class MainActivity : ComponentActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        // authentication with an API key or named user is
        // required to access basemaps and other location services
        ArcGISEnvironment.apiKey = ApiKey.create(BuildConfig.ACCESS_TOKEN)

        enableEdgeToEdge()
        setContent {
            SampleAppTheme {
                ManageOperationalLayersApp()
            }
        }
    }

    @Composable
    private fun ManageOperationalLayersApp() {
        Surface(
            color = MaterialTheme.colorScheme.background
        ) {
            MainScreen(
                sampleName = getString(R.string.manage_operational_layers_app_name)
            )
        }
    }
}

/* 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
}

/* 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.screens

import android.content.res.Configuration
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.KeyboardArrowDown
import androidx.compose.material.icons.filled.KeyboardArrowUp
import androidx.compose.material3.Card
import androidx.compose.material3.Icon
import androidx.compose.material3.IconButton
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import com.arcgismaps.mapping.layers.Layer
import com.esri.arcgismaps.sample.manageoperationallayers.R

/**
 * Layout to display a list of operational layers on the map using [activateLayerNames].
 */
@Composable
fun LayersList(
    activateLayerNames: List<String>,
    inactiveLayers: List<Layer>,
    onMoveLayerUp: (String) -> Unit = {},
    onMoveLayerDown: (String) -> Unit = {},
    onRemoveLayer: (String) -> Unit = {},
    onAddLayer: (String) -> Unit = {},
) {
    Column {
        Text(
            modifier = Modifier.padding(12.dp),
            text = "Active layers"
        )
        LazyColumn(modifier = Modifier.padding(12.dp)) {
            items(activateLayerNames.size, key = { activateLayerNames[it] }) { index ->
                LayerRow(
                    modifier = Modifier.fillMaxWidth().animateItem(),
                    layerName = activateLayerNames[index],
                    onMoveLayerUp = onMoveLayerUp,
                    onMoveLayerDown = onMoveLayerDown,
                    onRemoveLayer = onRemoveLayer
                )
            }
        }
        Text(
            modifier = Modifier.padding(12.dp),
            text = "Inactive layers"
        )
        LazyColumn(modifier = Modifier.padding(12.dp)) {
            items(inactiveLayers.size, key = { inactiveLayers[it].name }) { index ->
                InactiveLayerRow(
                    modifier = Modifier.fillMaxWidth().animateItem(),
                    layerName = inactiveLayers[index].name,
                    onAddLayer = onAddLayer
                )
            }
        }
    }
}

@Composable
fun LayerRow(
    modifier: Modifier = Modifier,
    layerName: String,
    onMoveLayerUp: (String) -> Unit = {},
    onMoveLayerDown: (String) -> Unit = {},
    onRemoveLayer: (String) -> Unit = {},
) {
    Card(modifier = modifier.padding(4.dp)) {
        Row(modifier = modifier) {
            Text(
                modifier = Modifier.padding(12.dp),
                text = layerName
            )
            Spacer(Modifier.weight(1f))
            Row {
                IconButton(onClick = { onMoveLayerUp(layerName) }) {
                    Icon(
                        imageVector = Icons.Default.KeyboardArrowUp,
                        contentDescription = "Up arrow"
                    )
                }
                IconButton(onClick = { onMoveLayerDown(layerName) }) {
                    Icon(
                        imageVector = Icons.Default.KeyboardArrowDown,
                        contentDescription = "Down arrow"
                    )
                }
                IconButton(onClick = { onRemoveLayer(layerName) }) {
                    Icon(
                        painter = painterResource(R.drawable.ic_show),
                        contentDescription = "Show icon"
                    )
                }
            }
        }
    }
}

@Composable
fun InactiveLayerRow(
    modifier: Modifier = Modifier,
    layerName: String,
    onAddLayer: (String) -> Unit = {},
) {
    Card(modifier = modifier.padding(4.dp)) {
        Row(modifier = modifier) {
            Text(
                modifier = Modifier.padding(12.dp),
                text = layerName
            )
            Spacer(Modifier.weight(1f))
            Row {
                IconButton(onClick = { onAddLayer(layerName) }) {
                    Icon(
                        painter = painterResource(R.drawable.hide),
                        contentDescription = "Hide icon"
                    )
                }
            }
        }
    }
}


@Preview(showBackground = true)
@Preview(uiMode = Configuration.UI_MODE_NIGHT_YES, showBackground = true)
@Composable
fun PreviewLayersList() {
    LayersList(
        activateLayerNames = listOf("Layer 1", "Layer 2", "Layer 3"),
        inactiveLayers = listOf()
    )
}

/* 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.screens

import android.app.Application
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.padding
import androidx.compose.material3.Scaffold
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.platform.LocalContext
import com.arcgismaps.toolkit.geoviewcompose.MapView
import com.esri.arcgismaps.sample.manageoperationallayers.components.MapViewModel
import com.esri.arcgismaps.sample.sampleslib.components.SampleTopAppBar

/**
 * Main screen layout for the sample app
 */
@Composable
fun MainScreen(sampleName: String) {
    // create a ViewModel to handle MapView interactions
    val mapViewModel = MapViewModel(LocalContext.current.applicationContext as Application)

    Scaffold(
        topBar = { SampleTopAppBar(title = sampleName) },
        content = {
            Column(
                modifier = Modifier.fillMaxSize().padding(it)
            ) {
                MapView(
                    modifier = Modifier.fillMaxSize().weight(1f),
                    arcGISMap = mapViewModel.arcGISMap
                )
                LayersList(
                    activateLayerNames = mapViewModel.activateLayerNames,
                    inactiveLayers = mapViewModel.inactiveLayers,
                    onMoveLayerDown = mapViewModel::moveLayerDown,
                    onMoveLayerUp = mapViewModel::moveLayerUp,
                    onRemoveLayer = mapViewModel::removeLayerFromMap,
                    onAddLayer = mapViewModel::addLayerToMap
                )
            }
        }
    )
}