Unable to create simple app for viewing MMP with location

429
6
Jump to solution
12-17-2017 11:03 AM
MervynLotter
Regular Contributor

Hi there

I am hoping somebody can advise me where I have gone wrong. I have created a rather simple app using the "Open Mobile Map" template to which I have added functionality to view the device's location on the MMPK. This app opens and views correctly when I run app from within AppStudio (Shift+Alt+r) but not when I download app onto mobile device, either as a built app or to view via AppStudio Player 2.1.23 on a Samsung S8+ phone. When I try from AppStudio Player then all I see is the location button but not the MMPK. The MMPK is being placed in the C:\Users\xxxxx\ArcGIS\AppStudio\Data folder before uploading and/or building app.

I paste the code I used below:

import QtQuick 2.7
import QtQuick.Layouts 1.1
import QtQuick.Controls 2.1
import QtQuick.Controls.Material 2.1
import ArcGIS.AppFramework 1.0
import ArcGIS.AppFramework.Controls 1.0
import Esri.ArcGISRuntime 100.1
//GPS
import QtPositioning 5.8
import QtSensors 5.2
import "controls" as Controls
App {
    id: app
    width: 414
    height: 736
    function units(value) {
        return AppFramework.displayScaleFactor * value
    }
    property real scaleFactor: AppFramework.displayScaleFactor
    property int baseFontSize : app.info.propertyValue("baseFontSize", 15 * scaleFactor) + (isSmallScreen ? 0 : 3)
    property bool isSmallScreen: (width || height) < units(400)
    property string dataPath:  AppFramework.userHomeFolder.filePath("ArcGIS/AppStudio/Data")
    property string inputdata: "KrugerNP2.mmpk"
    property string outputdata: dataPath + "/" + inputdata
    function copyLocalData(input, output) {
        var resourceFolder = AppFramework.fileFolder(app.folder.folder("data").path);
        AppFramework.userHomeFolder.makePath(dataPath);
        resourceFolder.copyFile(input, output);
        return output
    }
    Page{
        anchors.fill: parent
        header: ToolBar{
            id:header
            width: parent.width
            height: 50 * scaleFactor
            Material.background: "green"
            Controls.HeaderBar{}
        }
        // sample starts here ------------------------------------------------------------------
        contentItem: Rectangle{
            anchors.top:header.bottom
            // Create MapView
            MapView {
                id: mapView
                anchors.fill: parent
                ColumnLayout{
                                anchors{
                                    right: parent.right
                                    rightMargin: 16 * scaleFactor
                                    verticalCenter: parent.verticalCenter
                                }
                                Controls.FloatActionButton{
                                                    id:locationButton
                                                    imageSource: "./assets/location.png"
                                                       onIconClicked: {
                                                          if (!mapView.locationDisplay.started) {
                                                              mapView.locationDisplay.start()
                                                              mapView.locationDisplay.autoPanMode = Enums.LocationDisplayAutoPanModeRecenter
                                                              colorOverlay.color = "steelblue"
                                                          }else {
                                                              mapView.locationDisplay.stop()
                                                              colorOverlay.color = "#4c4c4c"
                                                        }
                                                    }
                                                }
                            }
                locationDisplay {
                                positionSource: PositionSource {
                                }
                            }
            }
            // Create a Mobile Map Package and set the path
            MobileMapPackage {
                id: mmpk
                path: AppFramework.resolvedPathUrl(copyLocalData(inputdata, outputdata))
                // load the mobile map package
                Component.onCompleted: {
                    mmpk.load();
                }
                // wait for the mobile map package to load
                onLoadStatusChanged: {
                    if (loadStatus === Enums.LoadStatusLoaded) {
                        // set the map view's map to the first map in the mobile map package
                        mapView.map = mmpk.maps[0];
                    }
                }
            }
            //! [open mobile map package qml api snippet]
        }
    }
    // sample ends here ------------------------------------------------------------------------
    Controls.DescriptionPage{
        id:descPage
        visible: false
    }
}

					
				
			
			
				
			
			
				
Tags (1)
0 Kudos
1 Solution

Accepted Solutions
TinaJin
Esri Regular Contributor

Hi Mervyn,

I tried to reproduce the issue of displaying web map and I was able to successfully see the web map.  Could you please try again or provide more information about your code.  

 

Thanks,

Tina 

View solution in original post

0 Kudos
6 Replies
nakulmanocha
Esri Regular Contributor

Are you able to reproduce the issue with the mmpk provided with the sample?

Thanks,

Nakul

0 Kudos
MervynLotter
Regular Contributor

Thanks Nakul and Stephen

Thanks Nakul (and Stephen)

I thought my problem may simply be with my code but I am now starting to

think it may not be so. Perhaps on a related note, I also worked through

the useful tutorial (Load a Web Map and Display Device Location) but the

webmap does not display. The button and button messages do, but no webmap.

Unfortunately I am travelling for a few days and have limited time and

Internet connectivity for testing and getting back to you. I will

definitely do so more thoroughly and reply with more details of testing.

I had a quick look and:

1. I can use the Open MMPK template and this does display the Yellowstone

MMPK both on desktop and mobile devices.

2. If I simply change MMPK name and place my MMPK in same folder, then app

displays on desktop only (using AltShiftR or AppStudio Player). I am

using Windows 10 and have only placed the MMPK in

the C:\Users\xxxx\ArcGIS\AppStudio\Data folder. Should I place it anywhere

else before uploading to cloud or building app?

I also want to add that the app is not shared with anyone but I dont think

that is a requirement as I am only including a small MMPK file with the app.

Stephan, thanks for your note and code. I now see what the description page

does when set to true. The autopan code also looks like a very useful

addition, thank you very much. I will give it a try once I get my MMPK's to

display correctly.

Thanks,

Mervyn

0 Kudos
TinaJin
Esri Regular Contributor

Hi Mervyn,

I tried to reproduce the issue of displaying web map and I was able to successfully see the web map.  Could you please try again or provide more information about your code.  

 

Thanks,

Tina 

0 Kudos
MervynLotter
Regular Contributor

Hi Tina

Thanks for writing. I have just recreated the app from your tutorial and

this time the tutorial app does load the web map as it should. I am not

sure where I went wrong but it is now working.

Thanks for the great tutorial.

Regards

Mervyn

0 Kudos
MervynLotter
Regular Contributor

Hi Nakul

I have solved my problem. Looks like I had placed my MMPK file in the wrong folder. Using the "View app Source files" folder option from within AppStudio I was able to identify the correct folder within which to place my MMPK. A silly mistake and I thank you for your assistance. 

Regards

Mervyn

0 Kudos
StephenQuan1
Esri Contributor

You need to start the location display and, for niceness you may also wish to turn on autopan.

One way to do it as via adding Component.onCompleted near the bottom of your app as follows:

    Controls.DescriptionPage{
        id:descPage
        visible: false
    }

    // ----8<---- BEGIN SNIPPET ----8<----
    Component.onCompleted: {
        mapView.locationDisplay.autoPanMode = Enums.LocationDisplayAutoPanModeRecenter;
        mapView.locationDisplay.start();
    }
    // ---->8---- END SNIPPET ---->8----
}‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍
0 Kudos