Show organization basemaps

Loading

Code

import QtQuick 2.6
import QtQuick.Controls 1.4
import Esri.ArcGISRuntime 100.3
import Esri.ArcGISExtras 1.1
import Esri.ArcGISRuntime.Toolkit.Dialogs 100.3

Rectangle {
    id: rootRectangle
    clip: true

    width: 800
    height: 600

    property real scaleFactor: System.displayScaleFactor
    property var porInfo: portal.portalInfo

    function chooseBasemap(selectedBasemap) {
        title.text = selectedBasemap.item.title;
        basemapsGrid.enabled = false;

        var newMap = ArcGISRuntimeEnvironment.createObject("Map", {basemap: selectedBasemap});
        mapView.map = newMap;
        gridFadeOut.running = true;
        mapView.visible = true;
    }

    BusyIndicator {
        anchors.centerIn: parent
        running: !anonymousLogIn.visible && !mapView.visible && portal.loadStatus !== Enums.LoadStatusLoaded;
    }

    Credential {
        id: oAuthCredential
        oAuthClientInfo: OAuthClientInfo {
            oAuthMode: Enums.OAuthModeUser
            clientId: "W3hPKzPbeJ0tr8aj"
        }
    }

    Portal {
        id: portal

        onLoadStatusChanged: {
            if (loadStatus === Enums.LoadStatusFailedToLoad) {
                retryLoad();
                return;
            }

            if (loadStatus !== Enums.LoadStatusLoaded)
                return;

            fetchBasemaps();
        }

        onFetchBasemapsStatusChanged: {
            if (fetchBasemapsStatus !== Enums.TaskStatusCompleted)
                return;

            basemapsGrid.model = basemaps;
            gridFadeIn.running = true;
        }
    }

    Text{
        id: title
        anchors {
            top: parent.top;
            left: parent.left;
            right: parent.right;
            margins: 10
        }
        font.pointSize: 14
        font.bold: true
        horizontalAlignment: Text.AlignHCenter
        verticalAlignment: Text.AlignTop
        text: anonymousLogIn.visible ? "Load Portal" :
                                       (basemapsGrid.count > 0 ? porInfo.organizationName + " Basemaps" : "Loading Organization Basemaps...")
        wrapMode: Text.Wrap
        elide: Text.ElideRight
    }

    MapView {
        id: mapView
        anchors {
            top: title.bottom;
            bottom: parent.bottom;
            left: parent.left;
            right: parent.right
        }
        visible: false
    }

    Button {
        id: backButton
        anchors {
            top: mapView.top
            right: mapView.right
            margins: 16 * scaleFactor
        }
        visible: mapView.visible
        iconSource: "qrc:/Samples/CloudAndPortal/ShowOrgBasemaps/ic_menu_back_dark.png"
        text: "Back"
        opacity: hovered ? 1 : 0.5

        onClicked: {
            mapView.visible = false;
            basemapsGrid.enabled = true;
            gridFadeIn.running = true;
        }
    }

    GridView {
        id: basemapsGrid
        anchors {
            top: title.bottom;
            bottom: parent.bottom;
            left: parent.left;
            right: parent.right
        }
        cellWidth: 128 * scaleFactor;
        cellHeight: 128 * scaleFactor
        opacity: 0
        focus: true
        clip: true

        delegate: Rectangle {
            anchors.margins: 5 * scaleFactor
            width: basemapsGrid.cellWidth
            height: width
            border {
                width: 2;
                color: index === basemapsGrid.currentIndex ? "blue" : "lightgrey"
            }
            color: index === basemapsGrid.currentIndex ? "yellow" : "white"
            radius: 2
            clip: true

            Image {
                id: basemapImg
                anchors {
                    bottom: basemapLabel.top;
                    horizontalCenter: parent.horizontalCenter
                }
                height: parent.height - ( basemapLabel.height * 2 );
                width: height
                source: thumbnailUrl
                fillMode: Image.PreserveAspectCrop
            }

            Text {
                id: basemapLabel
                anchors {
                    bottom: parent.bottom;
                    left: parent.left;
                    right: parent.right
                }
                height: 16 * scaleFactor
                z: 100
                horizontalAlignment: Text.AlignHCenter
                text: title
                wrapMode: Text.Wrap
                elide: Text.ElideRight
                font.pointSize: 8
                font.bold: index === basemapsGrid.currentIndex
            }

            MouseArea {
                enabled: !mapView.visible && portal.loadStatus === Enums.LoadStatusLoaded
                anchors.fill: parent

                onClicked: {
                    if (!enabled)
                        return;

                    basemapsGrid.currentIndex = index;
                }

                onDoubleClicked: {
                    if (!enabled)
                        return;

                    selectedAnimation.running = true;
                    chooseBasemap(basemapsGrid.model.get(index));
                }
            }

            SequentialAnimation on opacity {
                id: selectedAnimation
                running: false
                loops: 4
                PropertyAnimation { to: 0; duration: 60 }
                PropertyAnimation { to: 1; duration: 60 }
            }
        }

        OpacityAnimator on opacity {
            id: gridFadeIn
            from: 0;
            to: 1;
            duration: 2000
            running: false
        }

        OpacityAnimator on opacity {
            id: gridFadeOut
            from: 1;
            to: 0;
            duration: 2000
            running: false
        }
    }

    Button {
        id: anonymousLogIn
        anchors {
            margins: 16 * scaleFactor
            horizontalCenter: parent.horizontalCenter
            top: title.bottom
        }
        text: "Anonymous"
        iconSource: "qrc:/Samples/CloudAndPortal/ShowOrgBasemaps/ic_menu_help_dark.png"

        onClicked: {
            portal.load();
            anonymousLogIn.visible = false;
            userLogIn.visible = false;
        }
    }

    Button {
        id: userLogIn
        anchors {
            margins: 16 * scaleFactor
            horizontalCenter: anonymousLogIn.horizontalCenter
            top: anonymousLogIn.bottom
        }
        width: anonymousLogIn.width
        text: "Sign-in"
        iconSource: "qrc:/Samples/CloudAndPortal/ShowOrgBasemaps/ic_menu_account_dark.png"

        onClicked: {
            portal.credential = oAuthCredential;
            portal.load();
            anonymousLogIn.visible = false;
            userLogIn.visible = false;
        }
    }

    /* Uncomment this section when running as standalone application
    AuthenticationView {
        authenticationManager: AuthenticationManager
    }
    */
}


In this topic
  1. Code