Skip To Content ArcGIS for Developers Sign In Dashboard

ArcGIS Runtime SDK for Qt

Manage operational layers

Sample Viewer View Sample on GitHub

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

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 above other layers.

How to use the sample

When the app starts, a list displays the operational layers that are currently displayed in the map. Select the menu option on the list item to remove or reorder the layer. The map will be updated automatically.

The second list shows layers that have been removed from the map. Select the menu option on the list item to add it to the map.

How it works

  1. Get the operational layers LayerListModel from the map using map.operationalLayers.
  2. Subclass QSortFilterProxyModel so that the order in the view can be reversed. This is important when creating a table of contents so that the first layer in the map draws at the bottom of the list and the last layer in the map (which will render at the top) will draw on the top of the list.
  3. Set the LayerListModel as the source model on you sort proxy model.
  4. Create a QML ListView and set the model property to the reversed sort proxy model.
  5. Create a delegate that displays the layer name and a QML menu which provides options to add, remove, and reorder the layer.
  6. Add or remove layers using operationalLayers.append(layer) and operationalLayers.remove(layer) respectively.
  7. Move layers using operationalLayers.move(from, to).

Relevant API

  • ArcGISMapImageLayer
  • LayerListModel
  • LayerListModel.append
  • LayerListModel.move
  • LayerListModel.remove
  • Map

Tags

add, delete, layer, map, remove

Sample Code

import QtQuick 2.6
import QtQuick.Controls 2.5
import QtQuick.Layouts 1.3
import Esri.ArcGISRuntime 100.9
import Esri.Samples 1.0

Rectangle {
    id: rootRectangle
    clip: true
    width: 800
    height: 600

    property var deletedLayerListModel: []
    property alias layerListModel: map.operationalLayers

    MapView {
        id: mapView
        anchors.fill: parent

        Map {
            id: map
            BasemapTopographic {}

            onLoadStatusChanged: {
                if (loadStatus !== Enums.LoadStatusLoaded)
                    return;

                // add layers to the map
                operationalLayers.append(elevationLayer);
                operationalLayers.append(censusLayer);
                operationalLayers.append(damageLayer);

                drawOrderModel.setLayerListModel(operationalLayers);
            }
        }
    }

    ArcGISMapImageLayer {
        id: elevationLayer
        url: "https://sampleserver5.arcgisonline.com/arcgis/rest/services/Elevation/WorldElevations/MapServer"
    }

    ArcGISMapImageLayer {
        id: censusLayer
        url: "https://sampleserver5.arcgisonline.com/arcgis/rest/services/Census/MapServer"
    }

    ArcGISMapImageLayer {
        id: damageLayer
        url: "https://sampleserver5.arcgisonline.com/arcgis/rest/services/DamageAssessment/MapServer"
    }

    // Declare a custom DrawOrderListModel. This is a QSortFilterProxyModel used to
    // "reverse" the order appearance so the top level layer displays at the top
    // of the list view instead of the bottom, which is the default behavior. This
    // will closer match the widely accepted standard table of contents UX where
    // the top level layer displays at the top of the view.
    DrawOrderListModel {
        id: drawOrderModel
    }

    Rectangle {
        anchors {
            fill: layerListColumn
            margins: -3
        }
        color: "#F5F5F5"
    }

    Column {
        id: layerListColumn
        anchors {
            top: parent.top
            left: parent.left
            margins: 8
        }
        spacing: 2

        Label {
            text: "Layers in map"
            visible: layersList.count > 0
            font {
                pixelSize: 14
                bold: true
            }
        }

        // Declare the ListView, which will display the list of files
        ListView {
            id: layersList
            height: contentHeight
            width: 200
            interactive: true
            clip: true
            visible: count > 0
            spacing: 5
            model: drawOrderModel
            delegate: Component {
                RowLayout {
                    width: parent.width
                    height: 40
                    spacing: 5

                    Label {
                        text: name
                        Layout.leftMargin: 5
                    }

                    Image {
                        Layout.alignment: Qt.AlignRight
                        Layout.preferredHeight: 25
                        Layout.preferredWidth: 25
                        source: "qrc:/Samples/Layers/ManageOperationalLayers/menu.png"

                        MouseArea {
                            anchors.fill: parent
                            onClicked: {
                                layersList.currentIndex = index;
                                menu.open();
                            }
                        }

                        Menu {
                            id: menu
                            width: 125

                            Column {
                                width: parent.width
                                spacing: 10

                                Label {
                                    id: moveUpLabel
                                    text: "  Move down  "
                                    visible: layersList.currentIndex + 1 !== layersList.count

                                    MouseArea {
                                        anchors.fill: parent
                                        onClicked: {
                                            menu.close();
                                            const  modelIndex = drawOrderModel.mappedIndex(index);
                                            layerListModel.move(modelIndex, modelIndex - 1);
                                        }
                                    }
                                }

                                Label {
                                    id: moveDownLabel
                                    text: "  Move up  "
                                    visible: layersList.currentIndex !== 0

                                    MouseArea {
                                        anchors.fill: parent
                                        onClicked: {
                                            menu.close();
                                            const  modelIndex = drawOrderModel.mappedIndex(index);
                                            layerListModel.move(modelIndex, modelIndex + 1);
                                        }
                                    }
                                }

                                Label {
                                    text: "  Remove  "

                                    MouseArea {
                                        anchors.fill: parent
                                        onClicked: {
                                            menu.close();
                                            const  modelIndex = drawOrderModel.mappedIndex(index);
                                            deletedLayerListModel.push(layerListModel.get(modelIndex));
                                            deletedLayersList.model = deletedLayerListModel
                                            layerListModel.remove(modelIndex);
                                        }
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }

        Label {
            text: "Deleted layers"
            visible: deletedLayersList.count > 0
            font {
                pixelSize: 14
                bold: true
            }
        }

        // Declare the ListView, which will display the list of files
        ListView {
            id: deletedLayersList
            height: contentHeight
            visible: deletedLayersList.count > 0
            width: 200
            interactive: true
            clip: true
            spacing: 5
            model: deletedLayerListModel

            delegate: Component {
                RowLayout {
                    width: parent.width
                    height: 40
                    spacing: 5

                    Label {
                        text: modelData.name
                        Layout.leftMargin: 5
                    }

                    Image {
                        Layout.alignment: Qt.AlignRight
                        Layout.preferredHeight: 25
                        Layout.preferredWidth: 25
                        source: "qrc:/Samples/Layers/ManageOperationalLayers/menu.png"

                        MouseArea {
                            anchors.fill: parent
                            onClicked: {
                                layersList.currentIndex = index;
                                addMenu.open();
                            }
                        }

                        // add menu
                        Menu {
                            id: addMenu
                            width: 125

                            Column {
                                width: parent.width
                                spacing: 10

                                Label {
                                    text: "  Add to map  "

                                    MouseArea {
                                        anchors.fill: parent
                                        onClicked: {
                                            addMenu.close();
                                            layerListModel.append(deletedLayersList.model[index])
                                            deletedLayerListModel.splice(index, 1);
                                            deletedLayersList.model = deletedLayerListModel;
                                        }
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}
// Copyright 2019 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.

#include "DrawOrderLayerListModel.h"

DrawOrderLayerListModel::DrawOrderLayerListModel(QObject* parent):
  QSortFilterProxyModel(parent)
{
  sort(0);
}

DrawOrderLayerListModel::~DrawOrderLayerListModel()
{
}

void DrawOrderLayerListModel::setLayerListModel(QAbstractItemModel* layerListModel)
{
  setSourceModel(layerListModel);
}

int DrawOrderLayerListModel::mappedIndex(int index) const
{
  const QModelIndex sourceIndex = mapToSource(this->index(index, 0));
  return sourceIndex.row();
}

bool DrawOrderLayerListModel::lessThan(const QModelIndex& sourceLeft, const QModelIndex& sourceRight) const
{
  return sourceLeft.row() >= sourceRight.row();
}
// Copyright 2019 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.

#ifndef DRAWORDERLAYERLISTMODEL_H
#define DRAWORDERLAYERLISTMODEL_H

#include <QSortFilterProxyModel>

class DrawOrderLayerListModel : public QSortFilterProxyModel
{
  Q_OBJECT

public:
  explicit DrawOrderLayerListModel(QObject* parent = nullptr);
  ~DrawOrderLayerListModel() override;

  Q_INVOKABLE void setLayerListModel(QAbstractItemModel* layerListModel);
  Q_INVOKABLE int mappedIndex(int index) const;

protected:
  bool lessThan(const QModelIndex& sourceLeft, const QModelIndex& sourceRight) const override;
};

#endif // DRAWORDERLAYERLISTMODEL_H