How can I use a scatterview to overlay elements on top of a zoomable map?

Question

I'm building an application with an interactive map (using the ArcGIS API for WPF) that runs on the Microsoft Surface 2.0 (now known as PixelSense). In my application I have a librarycontainer containing elements that a user can drag out and place on a certain location on the map. I achieve this by placing a scatterview (that envelopes the entire map) in an elementlayer on the map, like this:

<esri:ElementLayer>
    <esri:ElementLayer.Children>
        <local:DragDropScatterView esri:ElementLayer.Envelope="-19949487.9573175,-20100080.1372686,20125528.7282505,20131479.5822274" x:Name="ScatterLayer" Background="Transparent" Height="Auto"  Width="Auto" ItemContainerStyle="{StaticResource ScatterItemStyle}" />
    </esri:ElementLayer.Children>
</esri:ElementLayer>

The problems occur when a user zooms in or out on the map, causing the elements that have been placed in the scatterview to change their position completely.

To fix this issue I tried placing the scatterview inside a viewbox. When I do this, the elements maintains the right positions in the map, but now a new problem occurs: The elements scale up and down when I zoom in and out of the map (e.g. when the map is shown in full extent, the elements are almost invisible), while the preferred behavior is that the elements maintain their size when a user zooms in or out on the map (e.g. like the markers in Google Maps).

Does anyone have a suggestion as to how I can solve this problem?

Cheers

Answer 1

Instead of putting the ScatterView in a Viewbox, you should do the following:

• After a ScatterViewItem is placed on the map, transform its Center point (which is in viewport coordinates) to a location in world coordinates (latitude and longitude). The ArcGIS API should provide such a transformation.

• When the map is zoomed or otherwise transformed, transform each world location back to viewport coordinates and set each ScatterViewItem's Center property accordingly.

In order to store the world coordinates for each ScatterViewItem, you could create an attached property.