"Add Data" widget for AppStudio

145
5
07-10-2020 02:56 PM
Highlighted
New Contributor

I am new to the coding world. And when I say new I mean I am just now taking classes. However I have been in the GIS game for a number of years. I am trying to build a native application with AppStudio but I am running into a snag. My app is simple enough. I just want to display a feature service with popups, but also I need it to have the ability to add data (zipped shapefile, KML or KMZ, etc.) so the user can overlay their data on top of the background data I am providing. I can do this all day long with the web app builder, but is there a tool or widget I can customize the Map Viewer template with or possibly another route? Thank you. 

Reply
0 Kudos
5 Replies
Highlighted
Esri Regular Contributor

Ryan, 

MapViewer template in AppStudio does not have "Add Data" functionality you described, but I know that working with KML file is supported in ArcGIS Runtime SDK for Qt‌, so this would be a customized version of the MapViewer template with functionality to select a file then use the KML file in the MapViewer template. 

Thank you,

Erwin

Reply
0 Kudos
Highlighted
New Contributor III

Would I incorporate the code from "Display KML" into the MapViewer template?

Reply
0 Kudos
Highlighted
Esri Regular Contributor

The link you provided is pointing to ArcGIS Runtime SDK for .NET, we are using ArcGIS Runtime SDK for Qt. Also I think we recently add a sample called "Create, Edit and Save KML File", that is based on this sample from Runtime, Display KML | ArcGIS for Developers 

Reply
0 Kudos
Highlighted
New Contributor II

Hi Ryan,

Not sure if it's too late on this one but here's what I did for file based datasets (kml/kmz and shapefiles):

1. Use the DocumentDialog type. It's in beta and doesn't allow you to filter by file extensions (lol) -

        FileInfo {
            id: fileInfo
        }
        DocumentDialog {
            id: fileDialog
            onAccepted: {
                // add the attachment to the feature table
                fileInfo.url = filePath
                var lyr = createFromFile(fileInfo);
                mapView.map.operationalLayers.append(lyr);

                           }

        }
    function createFromFile(file_info) {
        //read file extension - is it .shp or .kml/kmz?
        var ext = file_info.suffix
        var file_path = file_info.url
        if (ext === 'kml' || ext === 'kmz') {
            // create the dataset from a local file
            const kmlDataset = ArcGISRuntimeEnvironment.createObject("KmlDataset", {
                                                                         //url: AppFramework.userHomeFolder.fileUrl(caKmlPath + "/SubDivs.kmz")
                                                                         url: file_path
                                                                     });
            // create the layer
            const kmlLayer = ArcGISRuntimeEnvironment.createObject("KmlLayer", {
                                                                       dataset: kmlDataset
                                                                   });
            // return the KML Layer
            return kmlLayer;
        }
        if (ext === 'shp') {
            const shpFeatTbl = ArcGISRuntimeEnvironment.createObject("ShapefileFeatureTable", {
                                                                         path: file_path
                                                                     });
            const shpLyr = ArcGISRuntimeEnvironment.createObject("FeatureLayer", {
                                                                     featureTable: shpFeatTbl
                                                                 });
            return shpLyr;
        }
}

2. Enable drag and drop on the map. This was awesome!

        DropArea {
            id: dropOnMap
            anchors.fill: parent
            FileInfo {
                id: dropFileInfo
            }
            onEntered: {
                if (drag.urls.length === 1) {
                    // verify that this file exists
                    dropFileInfo.url = drag.urls[0];
                    if (dropFileInfo.exists) {
                        if (validateFileExtension()) { //just checks for kml/kmz + .shp
                            drag.accept();
                        }
                        else {
                            console.log("Not KML/KMZ or Shp"); 
                        }
                    }
                }
            }
            onDropped: {
                if (validateFileExtension()) {
                    var droplyr = createFromFile(dropFileInfo);
                    mapView.map.operationalLayers.append(droplyr);
                }

            }

Best of luck w/your work!

Rob

Highlighted
New Contributor III

Rob thank you so much for sharing this. I have not had the time to dedicate to it lately. Please excuse my ignorance as I am still pretty new and still learning, but where would I incorporate this code?

Reply
0 Kudos