Set viewpoint for graphics overlay when using floating panels

[mmoosbac94]

Hello everyone,

I have a question about adjusting the viewpoint for a graphics overlay when using floating panels. We’ve implemented a search feature that displays results in a floating panel (by default its displayed half of the screen), alongside a graphics overlay on the map. Currently, we’re using an ExtentBuilder and setViewpointGeometry to set the viewpoint for these results, and while this is working well, the viewpoint defaults to the center of the extent. As a result, some of the results are obscured by the floating panel.

Our goal is to position the viewpoint above the floating panel so that all results are fully visible, similar to how it works in Google Maps. This means we need to set the viewpoint for the extent at a fixed height above the floating panel, regardless of the scale level and extent size. I’ve tried various approaches but haven’t had any success yet.

Any suggestions on how to achieve this would be greatly appreciated!

What I tried:

1. Try (Viewpoint is center of extent)

let modifiedExtent = calculateModifiedExtent(from: overlay)
await proxy.setViewpointGeometry(modifiedExtent!)


static func calculateModifiedExtent(from graphicsOverlay: GraphicsOverlay) -> Envelope? {

        let extentBuilder = graphicsOverlay.extent?.makeBuilder()

        extentBuilder?.expand(by: 2.0)

        return extentBuilder?.toGeometry()

    }

2. Try (Not working due to different scale-levels with modifying screenPoint.y)

var screenPoint = proxy.screenPoint(fromLocation: overlay.extent!.center)

            screenPoint!.y = screenPoint!.y - 150

            

            let newMapPoint = proxy.location(fromScreenPoint: screenPoint!)

            

            let extentBuilder = overlay.extent?.makeBuilder()

            extentBuilder?.expand(by: 2.0, anchor: newMapPoint)

            let newExtent = extentBuilder?.toGeometry()

            await proxy.setViewpointGeometry(newExtent!)

3. Try (its working when setting viewpoint without anchor first and then setting viewpoint with anchor, but then there are two animations, looking weird)

let modifiedExtent = calculateModifiedExtent(from: overlay)
            await proxy.setViewpointGeometry(modifiedExtent!)

            var screenPoint = proxy.screenPoint(fromLocation: overlay.extent!.center)
            screenPoint!.y = screenPoint!.y - 150
            
            let newMapPoint = proxy.location(fromScreenPoint: screenPoint!)
            
            let extentBuilder = overlay.extent?.makeBuilder()
            extentBuilder?.expand(by: 2.0, anchor: newMapPoint)
            let newExtent = extentBuilder?.toGeometry()
            await proxy.setViewpointGeometry(newExtent!)

Thanks!

Kind regards,
Marvin

[rolson_esri · Accepted solution]

Marvin, 

If you have any part of the map view obscured by other content, then you can use the contentInsets view modifier to tell the map view what part is obscured. From there when you zoom to an extent, the extent zoomed to will be in the unobscured portion of the map view:

    /// Allows you to set the edges where the map view is obscured by some other
    /// UI. This is important so that the location display is anchored
    /// appropriately. Setting this also affects the way viewpoints are set and
    /// reported by the map view. For example, setting a viewpoint with a center
    /// will cause the geographic center of the viewpoint to be contained within
    /// the area affected by the insets.
    /// - Parameter contentInsets: The insets from the edges where the map view
    /// content is obscured.
    func contentInsets(_ contentInsets: EdgeInsets) -> MapView {

[mmoosbac94]

Hi @rolarola,

thanks for that quick reply, that helped me a lot!

Greetings
Marvin