How do I select which layers are visible in my MMPK app

Question

Hi there

I have developed a simple offline app using the Open Mobile Map (mmpk) template. I would now like to provide the user with the ability to select which MMPK layers should be displayed in the app (interactively). This would be similar to the Table Of Contents where a user can select which layers to display.

I was unable to find any templates or examples of this and would really appreciate some code or examples to study and apply to my offline app.

Thank you and I wish all of you all of the best for the New Year.

Regards

Mervyn

MervynLotter · Answer

Hi Brooke

Thank you so much for sharing the example. Very much appreciated.

I shall take a look and let you know if I have any questions.

Regards

Mervyn

BrookeReams · Answer

Hi Mervyn,

The code below is a page in one of my apps that allows the layers in the map to be toggled on and off.  I've also included a screenshot of what this page looks like.  From my map page, I've defined a QML object for my Layers page like this:

LayersPage {

id: layersPage

primaryColor: app.primaryColor

darkGray: app.darkGray

lightGray: app.lightGray

fontFamily: app.fontSourceRobotoReg.name

headerFont: app.fontSourceRobotoMed.name

}

I call the show() method to show the Layers page, and pass the operational layers in the map, like this:

layersPage.show(mapView.map.operationalLayers)

Below is the code for the Layers page.  The ListView is used to display the layers in the model (mapView.map.operationalLayers).

import QtQuick 2.7

import QtQuick.Controls 2.2

import QtQuick.Layouts 1.3

import QtQuick.Controls.Material 2.1

import QtGraphicalEffects 1.0

import ArcGIS.AppFramework 1.0

import ArcGIS.AppFramework.Controls 1.0

Page {

id: pageLayers

anchors.fill: parent

visible: false

Material.background: "white"

// Scale factor

property real scaleFactor: AppFramework.displayScaleFactor

property color primaryColor: "blue"

property color darkGray: "darkgray"

property color lightGray: "lightgray"

property string fontFamily

property string headerFont

signal layerToggled(int index)

function show(layersListModel) {

listViewLayers.model = layersListModel

visible = true

}

function hide() {

visible = false

}

header: ToolBar {

id: toolbar

width: parent.width

height: 56*scaleFactor

Material.background: primaryColor

RowLayout {

anchors.fill: parent

ToolButton {

indicator: Image {

width: parent.width*0.5

height: parent.height*0.5

anchors.centerIn: parent

horizontalAlignment: Qt.AlignRight

verticalAlignment: Qt.AlignVCenter

source: "assets/images/left_arrow.png"

fillMode: Image.PreserveAspectFit

}

onClicked: {

pageLayers.hide()

}

Item {

Layout.preferredWidth: 25*scaleFactor

Layout.fillHeight: true

}

Label {

text: "Layers"

Material.foreground: "white"

font.family: headerFont

font.pixelSize: 20*scaleFactor

}

Item {

Layout.fillWidth: true

Layout.fillHeight: true

}

ListView {

id: listViewLayers

width: parent.width

height: parent.height - 10*scaleFactor

anchors {

top: parent.top

topMargin: 10*scaleFactor

}

clip: true

delegate: RowLayout {

width: parent.width

height: 60*scaleFactor

Item {

Layout.preferredWidth: 20*scaleFactor

Layout.fillHeight: true

}

Switch {

checked: layerVisible

Material.accent: primaryColor

onCheckedChanged: {

layerToggled(index)

layerVisible = checked

}

Item {

Layout.fillWidth: true

Layout.fillHeight: true

}

Label {

Layout.preferredWidth: parent.width - 30*scaleFactor

text: name

font.family: fontFamily

font.pixelSize: 16*scaleFactor

Material.foreground: darkGray

wrapMode: Text.WrapAtWordBoundaryOrAnywhere

}

Item {

Layout.preferredWidth: 35*scaleFactor

Layout.fillHeight: true

}

I hope that helps.  Let me know if you have any questions.

MervynLotter · Answer

Hi Nakul

This does seem somewhat drastic for what I thought was a relatively simple request but I am happy to do so. Googling "Esri support" directs me to (1) Esri's Community Support, which is GeoNet, and (2) Esri's Technical Support, which is obviously Esri's technical support.

I guess with AppStudio on Geonet there are greater restrictions than with other Esri products in terms of 3rd party software licensing and public sharing of code. I never really thought about that before. I will contact Esri's Technical support for assistance.

I apologise if my request or response was unreasonable.

Best of wishes for 2018!

Regards

Mervyn