Add webmap to your app

AppStudio is packaged with ArcGIS Runtime for QT behind the scenes for ArcGIS based functionality like showing map control, adding layers. In you app you can access the ArcGIS Runtime by importing the following:

import ArcGIS.AppFramework.Runtime 1.0

ArcGIS Runtime at 10.2.x does not support WebMap spec natively. So each API which is built on top of the core like the iOS, Android, .net have their own implementation and support for WebMaps. Unfortunately the ArcGIS Qt/QML API does not support webmaps at all.

AppStudio AppFramework to the rescue! In AppStudio AppFramework we have tried our best and added support for WebMap. We have extended the Map object and added WebMap specific functionality and code to handle the JSON based spec. So things like popups, layer order, layer overrides etc.. has been implemented. Though not perfect it generally works pretty well. We have our MapViewer template app based on this implementation.

Here is a basic code sample of using WebMap in your AppStudio App:

1. Import the WebMap library

import ArcGIS.AppFramework.Runtime.WebMap 1.0

2. Add WebMap to your app

WebMap {
       id: map

       anchors.fill: parent
       wrapAroundEnabled: true

       webMapId: "4778fee6371d4e83a22786029f30c7e1"
}

Remember: WebMap extends Map. So all the properties and signals and event handlers are all available. On top of this you get webmap specific properties and events.

• Properties
• webMapInfo : Raw JSON representation of the webmap itself
• legendModel: Listmodel of legends of layers in the webmap
• boormarksModel: Listmodel of bookmarks defined in the webmap
• portal: Portal object to be used to get the webmap. By default its ArcGIS Online. You can use this to set credentials or even change portals as needed.
• webmapLayersCount: Total layers in webmap
• operationalLayersCount: Total layers defined as operational layers in the webmap
• basemapLayersCount: Total layers defined as basemap layers in the webmap

-Signals

• onWebmapError(message)

---

How to view webmap popup

Now that you have added webmap to your app, the nxt thing you might want to do is to show popup that webmap might have configured. These popups can be rich and not only contain title and text but also images and charts. You will recognize this functionality implemented when you use the MapViewer template so technically you can view the source of that and implement it yourself. To help you with this task we have also exposed a few helpers.

1. WebMapPopupView

        WebMapPopupView {
            id: popupView

            Layout.fillWidth: true
            Layout.fillHeight: true

            titleVisible: true
        }

This gives you a ready to use UI which can interpret and show popup information as defined in the popup info object. So you would populate this control with the attributes recieved when you query and the popup info model. Here is sample usage:

popupView.attributes = result.attributes;
popupView.popupInfo = result.popupInfo;

This controls internally uses two other helpers included in the framework namely WebMapPopupMedia and WebMapPopupField to handle all the text based info and media (images/charts) based info.

2. WebMapIdentify In order to get the data to show in the popup view you will have to do a query. A common scenrio might be to click on the map and use the click geoemtry to get data back and disply the results in a popup. To help you with this workflow a helper is available in the framework called WebMapIdentify. This takes a map object and when asked to identify it provides the results as a model which contains the attributes. Here is a sample usage:

    WebMapIdentify {
        id: identify

        webMap: map

        model.onCountChanged: {
            if (model.count > 0) {
                var result = model.get(0);
                updatePopup(result);
            }
        }
    }

In order to invoke the identify operation you will need to call this (typically inside the map on click)

 onMouseClicked: {
                identify.identify(mouse, 5);
            }

Once you get the result you might want to see the result and use the WebmapPopupView to display the results. Here is sample showing you how:

 function updatePopup(result) {
        console.log("result", JSON.stringify(result, undefined, 2));
        popupView.attributes = result.attributes;
        popupView.popupInfo = result.popupInfo;
    }