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

ae · ‎01-06-2013

Hi,

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

dotMorten_esri · ‎01-08-2013

Did you set a fixed width/height on the ScatterView control prior to dropping it inside a ViewBox ?

DominiqueBroux · ‎01-09-2013

The position of the items being managed in device-independent units, the only way to keep the geographical position of the items is to include the scatter view (with a fixed size) inside a Viewbox.
So the display of the scatter view is stretched while zooming in or out but its size doesn�??t change and the items keep their geographical position.

The counterpart is that the items scale up and down while zooming since their size in device independent units doesn�??t change but they scale because the viewbox scales.

The solution might be to wire up an handler to the map Extent_Changed event and to change the scatterviewitems size dynamically depending on the map scale.
But to keep the content of the scatter item unchanged while changing the scatter item size, I guess you have to encapsulate each item inside a viewbox.

In short:

Surround the scatter view by a viewbox that is inserted in the element layer with a fixed size.

Surround by a viewbox each scatter view item that doesn�??t have to scale while zooming

On map extent changed event, loop on all scatter view items containing a viewbox and change the items size by a size depending of the map scale.

Hope this helps.

ae · ‎01-14-2013

Did you set a fixed width/height on the ScatterView control prior to dropping it inside a ViewBox ?

The width and height of the ScatterView (before dropping it inside the ViewBox) was set to Auto.

ae · ‎01-14-2013

The position of the items being managed in device-independent units, the only way to keep the geographical position of the items is to include the scatter view (with a fixed size) inside a Viewbox.
So the display of the scatter view is stretched while zooming in or out but its size doesn�??t change and the items keep their geographical position.

The counterpart is that the items scale up and down while zooming since their size in device independent units doesn�??t change but they scale because the viewbox scales.

The solution might be to wire up an handler to the map Extent_Changed event and to change the scatterviewitems size dynamically depending on the map scale.
But to keep the content of the scatter item unchanged while changing the scatter item size, I guess you have to encapsulate each item inside a viewbox.

In short:

          Surround the scatter view by a viewbox that is inserted in the element layer with a fixed size.

          Surround by a viewbox each scatter view item that doesn�??t have to scale while zooming

          On map extent changed event, loop on all scatter view items containing a viewbox and change the items size by a size depending of the map scale.

Hope this helps.

Thank you very much for your help and suggestions. I have not yet had a chance to test your idea, but I will have a go and let you know.

ae · ‎01-14-2013

The position of the items being managed in device-independent units, the only way to keep the geographical position of the items is to include the scatter view (with a fixed size) inside a Viewbox.
So the display of the scatter view is stretched while zooming in or out but its size doesn�??t change and the items keep their geographical position.

The counterpart is that the items scale up and down while zooming since their size in device independent units doesn�??t change but they scale because the viewbox scales.

The solution might be to wire up an handler to the map Extent_Changed event and to change the scatterviewitems size dynamically depending on the map scale.
But to keep the content of the scatter item unchanged while changing the scatter item size, I guess you have to encapsulate each item inside a viewbox.

In short:

          Surround the scatter view by a viewbox that is inserted in the element layer with a fixed size.

          Surround by a viewbox each scatter view item that doesn�??t have to scale while zooming

          On map extent changed event, loop on all scatter view items containing a viewbox and change the items size by a size depending of the map scale.

Hope this helps.

Thanks again for your suggestion! One question: If I surround each ScatterViewItem with a viewbox, they are no longer ScatterViewItems, and hence it will not be possible to place them on the ScatterView. Is this correct, or did I misunderstand something?

DominiqueBroux · ‎01-15-2013

Thanks again for your suggestion! One question: If I surround each ScatterViewItem with a viewbox, they are no longer ScatterViewItems, and hence it will not be possible to place them on the ScatterView. Is this correct, or did I misunderstand something?

You are right, I was not clear.

I am not sure of the workflow of your application but when you add an UIElement in the ScatterView, a ScatterViewItem is automatically created to encapsulate this element.
What I meant was surrounding by a viewbox the UIElement that you add in the Scatter View.
So the visual hierarchy will be something like:
ScatterView --> ScatterViewItem --> Viewbox --> UIElement