topic Re: Simple app with private WebMap in ArcGIS AppStudio Questions

Simple app with private WebMap

Pvan_Herk — Mon, 03 Feb 2020 18:39:46 GMT

I am new to Appstudio and Qt. I succeeded in building the Map Viewer (4.1) app with a private web map.

Map Viewer (4.1) is a big (and for me complex) app. With my limited knowledge I am not able to downscale to a 'as simple as possible" app to display a private web map.

Whenever I try to load the web map in a simple example application like "Web Map" from the arcgis-appstudio-samples-4.0 Git, a grey screen appears, no error messages.

What should I add to be able to show the web map, just as in Map Viewer (4.1)

Company name and item id are changed in this listing

The code:

import QtQuick 2.7

import QtQuick.Controls 2.1

import QtQuick.Controls.Styles 1.4

import QtGraphicalEffects 1.0

import QtQuick.Controls.Material 2.1

import ArcGIS.AppFramework 1.0

import ArcGIS.AppFramework.Controls 1.0

import Esri.ArcGISRuntime 100.2

Item {

    property real scaleFactor: AppFramework.displayScaleFactor

    MapView {

        id:mapView

        anchors.fill: parent

        BusyIndicator {

            anchors.centerIn: parent

            height: 48 * scaleFactor

            width: height

            running: true

            Material.accent:"#8f499c"

            visible: (mapView.drawStatus === Enums.DrawStatusInProgress)

    Rectangle {

        anchors.fill: parent

        color: "transparent"

        ComboBox {

            id:combobox

            anchors.left:  parent.left

            anchors.top:  parent.top

            anchors.margins: 10 * scaleFactor

            width: 200 * scaleFactor

            height: 30 * scaleFactor

            clip:true

            Material.accent:"#8f499c"

            background: Rectangle {

                anchors.fill: parent

                radius: 6 * scaleFactor

                border.color: "darkgrey"

                width: 200 * scaleFactor

                height: 30 * scaleFactor

            textRole:"name"

            model: ListModel {

                id: cbItems

                ListElement { name: "MYCOMPANY"; item: "XXXXXXXXXXXXXXXXXXXXXX" }

                ListElement { name: "San Francisco"; item: "358e6f9bebf544699b005f066886579c" }

                ListElement { name: "OpenstreetMap"; item: "0d22c9bc992f4f218605d6edb042ff89" }

            onCurrentIndexChanged: {

                loadWebMap(cbItems.get(currentIndex).item)

            Component.onCompleted: {

                loadWebMap(cbItems.get(currentIndex).item)

    function loadWebMap(webmapitemid){

        var organizationPortalUrl = "https://mycompany-def.maps.arcgis.com/";

        var webmapUrl = organizationPortalUrl + webmapitemid;

        var newMap = ArcGISRuntimeEnvironment.createObject("Map", {initUrl: webmapUrl, autoFetchLegendInfos:true});

        mapView.map = newMap;

Re: Simple app with private WebMap

ErwinSoekianto — Tue, 04 Feb 2020 17:06:30 GMT

Hello,

I think there's an issue with the organizationPortalUrl that you are using, see this documentation, Map QML Type | ArcGIS for Developers

This is the example showing when I try loading a webmap from our private ArcGIS Enterprise.

Thank you,

Erwin

Re: Simple app with private WebMap

Pvan_Herk — Sun, 12 Dec 2021 09:34:55 GMT

Thank you for your reply Erwin,

I tried all 3 calls but no success. Below is the function. In the last line I do a console.log. In the console I copy the url and put it in a browser. That leads me to the correct map inside ArcGIS. So it seems, the link organizationPortalUrl and id are valid. It still gives me a grey screen. In Javascript I request the same map from a HTML file on my server. That works. See the second listing below.

When I open the HTML file from my server in a browser, I get the map and it works as expected.

When I build the Browser View application from AppStudio, and put in the url to my the HTML file from my server, I get a login screen, and after that I only see the 2 zoom buttons. The map is plain grey.

    function loadWebMap(webmapitemid){

        var organizationPortalUrl = "https://mycompany-def.maps.arcgis.com/home/item.html?id=";

        //var organizationPortalUrl = "https://mycompany-def.maps.arcgis.com/home/webmap/viewer.html?webmap=";

        //var organizationPortalUrl = "https://mycompany-def.maps.arcgis.com/sharing/rest/content/items/";

        var webmapUrl = organizationPortalUrl + webmapitemid;

        //var webmapUrl = organizationPortalUrl + webmapitemid + '/data';
 var newMap = ArcGISRuntimeEnvironment.createObject("Map", {initUrl: webmapUrl, autoFetchLegendInfos:true});

        // Set the map to the MapView

        mapView.map = newMap;

        console.log(webmapUrl);


Javascript:

 var portal = new Portal();
 var first = true;
 portal.load().then(function() {
 dom.byId('viewDiv').style.display = 'flex';

 var webMap = new WebMap({ 
 portalItem: {
 id: "xxxxxxxxxxxxxxxx",
 portal: "https://mycompany-def.maps.arcgis.com"
 }
 });
 var view = new MapView({
 container: "viewDiv",
 map: webMap,
 center: [5.123456,50.123456],
 zoom: 19
 });

Re: Simple app with private WebMap

ErwinSoekianto — Tue, 04 Feb 2020 21:29:14 GMT

I agree that I think the URL is good now. The next thing we want to check is the "Authentication", what type of security authentication is used in the ArcGIS Enterprise?

If it is using OAuth, there is a sample in AppStudio Desktop called "OAuth Biometric Authentication", if others, this is the documentation on using AuthenticationManager in ArcGIS Runtime, Access the ArcGIS platform—ArcGIS Runtime SDK for Qt | ArcGIS for Developers

Re: Simple app with private WebMap

Pvan_Herk — Wed, 05 Feb 2020 06:26:45 GMT

In the Javascript HTML page, I use this:

var info = new OAuthInfo({
appId: "xxxxxxxxxxxxxxxxxxxxxx", //*** Your Client ID value goes here ***//
popup: false // inline redirects don't require any additional app configuration
});

identityManager.registerOAuthInfos([info]);

// send users to arcgis.com to login
on(dom.byId("sign-in"), "click", function() {
identityManager.getCredential(portalUrl);
});

So it is OAuth.

Re: Simple app with private WebMap

Pvan_Herk — Wed, 05 Feb 2020 12:26:15 GMT

I tried the OAuth Biometric Authentication example, but it gives Error 400.

I think the ID is not valid.

Can you give directions how and what part of the OAuth Biometric Authentication code I should include ?

A working example would be very nice!

At this point I am in the dark.

Highly appreciated.

Re: Simple app with private WebMap

CraigGadaloff — Fri, 07 Feb 2020 01:18:56 GMT

Hey @p van henk did you end up getting a worked example of this?

I can only find paragraphs of writing but no examples. Also in the dark here...

Re: Simple app with private WebMap

ErwinSoekianto — Fri, 07 Feb 2020 01:20:45 GMT

I will try to put together a new sample to show this, give me a few moments.

Re: Simple app with private WebMap

PHerk — Fri, 07 Feb 2020 07:06:19 GMT

Hi Craig. No success. Didn't find any working examples, and I spend searching and trying for many hours. But I am thankful Erwin gives a helping hand. Waiting for his sample.

Re: Simple app with private WebMap

PHerk — Wed, 12 Feb 2020 08:33:42 GMT

Hi Erwin,

Do you have this sample still on your agenda? Waiting for it. Appreciated!

Re: Simple app with private WebMap

ErwinSoekianto — Thu, 13 Feb 2020 18:50:23 GMT

Sorry for the delay, I was tied up with Fed UC conference,

I modified the Portal User Info sample to show private webmap after login, see attached modification to MyApp.qml page. Please replace the webmap id with yours.

Re: Simple app with private WebMap

PHerk — Fri, 14 Feb 2020 08:40:16 GMT

Hi Erwin,

YES, it works but there is a problem.

I used my clientId that still works on a Javascript private map. When I replace your clientId, with my clientId I get an error:

Invalid redirect_uri

Error: 400

I created several clientId's but could not get a working Id.

What should I do to get my own working clientId?

Thank you.

Re: Simple app with private WebMap

PHerk — Fri, 14 Feb 2020 08:41:13 GMT

Craig, look at Erwin's sample. Success.

Re: Simple app with private WebMap

ErwinSoekianto — Fri, 14 Feb 2020 17:21:04 GMT

This is what the redirect URI value needed for the "Application" in the ArcGIS Online or Enterprise where you get the client ID from. This redirect URI value should be there by default when you create a new one.

Re: Simple app with private WebMap

PHerk — Fri, 14 Feb 2020 17:54:24 GMT

Hi Erwin,

What should I do with this redirect URL, it is not used in your sample app...

Also when I enter a new application at this link:

https://developers.arcgis.com/applications

There is no redirect URL generated.

Seems to me there should be a link between the clientID and the map, but that seems not to be the case.

I have this working using your clientID and my private map.

Totally not clear to me...

Re: Simple app with private WebMap

ErwinSoekianto — Fri, 14 Feb 2020 18:11:04 GMT

You need to add that redirect URL in your "Application" in either ArcGIS Online or Developers.arcgis.com, they are the same thing, just a different interface.

This specific redirect URL is added when you create a new application in ArcGIS Online and you need this redirect URL for when using the client ID in the OAuth page in a native application. It has nothing to do with the map, it is related to the client application that is using the Client ID to authenticate to ArcGIS Online using OAuth.

Re: Simple app with private WebMap

PHerk — Fri, 14 Feb 2020 18:42:11 GMT

There is no redirect URL created when I add a new application, nor there is a default value. The field is empty, but I enter this URI: urn:ietf:wg:oauth:2.0:oob

That works so OK with me.

Thank you.

Re: Simple app with private WebMap

CraigGadaloff — Mon, 17 Feb 2020 22:40:11 GMT

Great thanks Erwin and Piet. I have my map loaded.