Manage operational layers | ArcGIS Maps SDK for Qt

View on GitHub

Sample viewer app

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

Get the operational layers LayerListModel from the map using Map::operationalLayers.
Add or remove layers using operationalLayers()->append(layer) and operationalLayers()->remove(layer) respectively. The last layer in the list will be rendered on top.

Relevant API

Map
ArcGISMapImageLayer
LayerListModel
LayerListModel::append
LayerListModel::move
LayerListModel::removeAt

Sample code

ManageOperationalLayers.cpp

ManageOperationalLayers.h

DrawOrderLayerListModel.cpp

DrawOrderLayerListModel.h

ManageOperationalLayers.qml

// [WriteFile Name=ManageOperationalLayers, Category=Layers]
// [Legal]
// 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.
// [Legal]

#ifdef PCH_BUILD
#include "pch.hpp"
#endif // PCH_BUILD

// sample headers
#include "DrawOrderLayerListModel.h"
#include "ManageOperationalLayers.h"

// ArcGIS Maps SDK headers
#include "ArcGISMapImageLayer.h"
#include "LayerListModel.h"
#include "Map.h"
#include "MapQuickView.h"
#include "MapTypes.h"

using namespace Esri::ArcGISRuntime;

ManageOperationalLayers::ManageOperationalLayers(QObject* parent /* = nullptr */):
  QObject(parent),
  m_map(new Map(BasemapStyle::ArcGISTopographic, this)),
  m_elevationLayer(new ArcGISMapImageLayer(QUrl("https://sampleserver5.arcgisonline.com/arcgis/rest/services/Elevation/WorldElevations/MapServer"), this)),
  m_censusLayer(new ArcGISMapImageLayer(QUrl("https://sampleserver5.arcgisonline.com/arcgis/rest/services/Census/MapServer"), this)),
  m_damageLayer(new ArcGISMapImageLayer(QUrl("https://sampleserver5.arcgisonline.com/arcgis/rest/services/DamageAssessment/MapServer"), this)),
  m_drawOrderListModel(new DrawOrderLayerListModel(this))
{
  // add layers to the map
  m_map->operationalLayers()->append(m_elevationLayer);
  m_map->operationalLayers()->append(m_censusLayer);
  m_map->operationalLayers()->append(m_damageLayer);

  // Create 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.
  m_drawOrderListModel->setLayerListModel(m_map->operationalLayers());
}

ManageOperationalLayers::~ManageOperationalLayers() = default;

void ManageOperationalLayers::init()
{
  // Register the map view for QML
  qmlRegisterType<MapQuickView>("Esri.Samples", 1, 0, "MapView");
  qmlRegisterType<ManageOperationalLayers>("Esri.Samples", 1, 0, "ManageOperationalLayersSample");
  qmlRegisterUncreatableType<QAbstractItemModel>("Esri.Samples", 1, 0, "AbstractItemModel", "AbstractItemModel is uncreateable");
}

MapQuickView* ManageOperationalLayers::mapView() const
{
  return m_mapView;
}

// Set the view (created in QML)
void ManageOperationalLayers::setMapView(MapQuickView* mapView)
{
  if (!mapView || mapView == m_mapView)
    return;

  m_mapView = mapView;
  m_mapView->setMap(m_map);

  emit mapViewChanged();
}

QAbstractItemModel* ManageOperationalLayers::layerListModel() const
{
  return m_drawOrderListModel;
}

void ManageOperationalLayers::moveLayerUp(int index)
{
  if (!m_drawOrderListModel || !m_map)
    return;

  // get the index and move the layer up
  int modelIndex = m_drawOrderListModel->mappedIndex(index);
  m_map->operationalLayers()->move(modelIndex, modelIndex + 1);
}

void ManageOperationalLayers::moveLayerDown(int index)
{
  if (!m_drawOrderListModel || !m_map)
    return;

  // get the index and move the layer down
  int modelIndex = m_drawOrderListModel->mappedIndex(index);
  m_map->operationalLayers()->move(modelIndex, modelIndex - 1);
}

void ManageOperationalLayers::removeLayer(int index)
{
  if (!m_drawOrderListModel || !m_map)
    return;

  // get the index
  int modelIndex = m_drawOrderListModel->mappedIndex(index);
  Layer* lyr = m_map->operationalLayers()->at(modelIndex);

  // add the layer to the other list
  m_deletedLayers.append(lyr);
  m_deletedLayersListNames.append(lyr->name());
  emit deletedLayersListChanged();

  // remove from the map
  m_map->operationalLayers()->removeAt(modelIndex);
}

void ManageOperationalLayers::addLayer(int index)
{
  if (!m_drawOrderListModel || !m_map)
    return;

  // get the layer from the deleted list
  Layer* lyr = m_deletedLayers.at(index);
  if (!lyr)
    return;

  // remove the layer from the deleted list
  m_deletedLayers.removeAt(index);
  m_deletedLayersListNames.removeAt(index);
  emit deletedLayersListChanged();

  // add the layer to the map's operational layers
  m_map->operationalLayers()->append(lyr);
}

// [WriteFile Name=ManageOperationalLayers, Category=Layers]
// [Legal]
// 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.
// [Legal]

#ifndef MANAGEOPERATIONALLAYERS_H
#define MANAGEOPERATIONALLAYERS_H

// Qt headers
#include <QObject>

namespace Esri::ArcGISRuntime
{
class Map;
class MapQuickView;
class ArcGISMapImageLayer;
class Layer;
}

class DrawOrderLayerListModel;
class QAbstractItemModel;

Q_MOC_INCLUDE("MapQuickView.h")
Q_MOC_INCLUDE("QAbstractItemModel")

class ManageOperationalLayers : public QObject
{
  Q_OBJECT

  Q_PROPERTY(Esri::ArcGISRuntime::MapQuickView* mapView READ mapView WRITE setMapView NOTIFY mapViewChanged)
  Q_PROPERTY(QAbstractItemModel* layerListModel READ layerListModel NOTIFY layerListModelChanged)
  Q_PROPERTY(QStringList deletedLayersList MEMBER m_deletedLayersListNames NOTIFY deletedLayersListChanged)

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

  static void init();
  Q_INVOKABLE void moveLayerUp(int index);
  Q_INVOKABLE void moveLayerDown(int index);
  Q_INVOKABLE void removeLayer(int index);
  Q_INVOKABLE void addLayer(int index);

signals:
  void mapViewChanged();
  void layerListModelChanged();
  void deletedLayersListChanged();

private:
  Esri::ArcGISRuntime::MapQuickView* mapView() const;
  QAbstractItemModel* layerListModel() const;
  void setMapView(Esri::ArcGISRuntime::MapQuickView* mapView);

  Esri::ArcGISRuntime::Map* m_map = nullptr;
  Esri::ArcGISRuntime::MapQuickView* m_mapView = nullptr;
  Esri::ArcGISRuntime::ArcGISMapImageLayer* m_elevationLayer = nullptr;
  Esri::ArcGISRuntime::ArcGISMapImageLayer* m_censusLayer = nullptr;
  Esri::ArcGISRuntime::ArcGISMapImageLayer* m_damageLayer = nullptr;
  DrawOrderLayerListModel* m_drawOrderListModel = nullptr;
  QStringList m_deletedLayersListNames;
  QList<Esri::ArcGISRuntime::Layer*> m_deletedLayers;
};

#endif // MANAGEOPERATIONALLAYERS_H

// [Legal]
// 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.
// [Legal]

// sample headers
#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();
}

// [Legal]
// 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.
// [Legal]

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

// Qt headers
#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

// [WriteFile Name=ManageOperationalLayers, Category=Layers]
// [Legal]
// 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.
// [Legal]

import QtQuick
import QtQuick.Controls
import QtQuick.Layouts
import Esri.Samples

Item {

    // add a mapView component
    MapView {
        id: view
        anchors.fill: parent

        Component.onCompleted: {
            // Set the focus on MapView to initially enable keyboard navigation
            forceActiveFocus();
        }
    }

    // Declare the C++ instance which creates the map etc. and supply the view
    ManageOperationalLayersSample {
        id: sample
        mapView: view
    }

    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: sample.layerListModel
            delegate: Component {
                RowLayout {
                    width: layersList.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();
                                            sample.moveLayerDown(index);
                                        }
                                    }
                                }

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

                                    MouseArea {
                                        anchors.fill: parent
                                        onClicked: {
                                            menu.close();
                                            sample.moveLayerUp(index);
                                        }
                                    }
                                }

                                Label {
                                    text: "  Remove  "

                                    MouseArea {
                                        anchors.fill: parent
                                        onClicked: {
                                            menu.close();
                                            sample.removeLayer(index);
                                        }
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }

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

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

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

                    Label {
                        text: modelData
                        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();
                                            sample.addLayer(index);
                                        }
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}

Use case

How to use the sample

How it works

Relevant API

Tags

Sample code