How to zoom map to given geometry?

[KristofDewilde]

So in the mobile app I’m working on we want to give the user the possibility to reposition his business’ location on the map. The way we want this to work, visually, is present the user with a map he can drag to set the wanted location in the center of the map view. There’s an image on top of the map to indicate its center. This is what the UI looks like:

When the view to edit the location (the image above) is loaded, I want the map to pan and zoom to the current location. However, I cannot get this to work – the map always seems to zoom to the 0,0 coordinates. This is how I’m trying to achieve this:

...

Map {
    id: map
    anchors.fill: parent

    wrapAroundEnabled: true
    rotationByPinchingEnabled: true
    zoomByPinchingEnabled: true

    ArcGISTiledMapServiceLayer {
        url: app.info.propertyValue( "urlTilesStreetMap", "" )
    }

    Image {
        anchors.centerIn: parent
        width: 50 * AppFramework.displayScaleFactor
        height: 50 * AppFramework.displayScaleFactor
        fillMode: Image.PreserveAspectCrop
        source: "../assets/markers/default.png"
    }
}

...

if( visible && root.feature ){
    var obj = ArcGISRuntime.createObject( "Feature" );
    obj.json = root.feature;
    
    map.zoomTo( obj.geometry );
}

...‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Note that root.feature is a JSON object like this:

JSON.stringify( obj.json, null, 6 )
// output:
{
      "attributes": {
            "GlobalID": "{45AC36D8-3FDA-4753-9ECF-0CBA318F98A2}",
            "OBJECTID": 32368,
            ...
      },
      "geometry": {
            "spatialReference": {
                  "wkid": 4326
            },
            "x": 14.48243610000003,
            "y": 35.90565804800008
      }
}‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

How can I zoom the map to the location of root.feature?

And extra question: how can I get the x and y of the center of the map to save as the new location?

Thanks in advance.

[nakulmanocha · Accepted solution]

I am little confused here. Are you trying to zoom to the current location of the device or you are trying to zoom to the location of root.feature.

For latter, use the following code

 // My json text looks like this, but you may already have a JSON object

jsonTxt.text = "{\"spatialReference\":{\"latestWkid\":102100,\"wkid\":102100}, \"x\": 9000000, \"y\": 6000000 }"
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

var g = ArcGISRuntime.createObject("Point", {"json":JSON.parse(jsonTxt.text)});
addSampleGraphic(pointGraphic,g)

   function addSampleGraphic(graphic, geometry) {
                            if(geometry.spatialReference.wkid !== map.spatialReference.wkid)
                            {
                                var newGeom = geometry.project(map.spatialReference)
                                geometry = newGeom
                                console.log("reprojected geometry")
                            }
                            var graphicClone = graphic.clone();
                            graphicClone.geometry = geometry;
                            graphicsLayer.addGraphic(graphicClone);
                            map.zoomToResolution(20000)
                            map.panTo(geometry)
                        }‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

I hope this helps. If you are looking to zoom to your current location use Map::PositionDisplay.positionSource to get the current location.

Getting the center of the map is quite straightforward. Use Map.extent.center, this should return you a point geometry.

Thanks,

Nakul

[KristofDewilde]

Thanks a lot, Nakul! Your sample code helped a lot -- geometry.project() was exactly what I needed.