This project has moved. For the latest updates, please go here.

How to handle multiple images on MapImageLayer

Oct 10, 2015 at 11:57 AM
I created one MapImageLayer that displays multiple images when user clicks a checkbox. I need another check box for users to click to load another set of images. However, the second batch of images loads on top of the first ones, completely covering them.

I created a lat/long offset for the second batch of images so they would display at some distance from the previous images...but they're still displaying on top. I made the Panel.Zindex higher than the first ones, but this doesn't work either. I tried creating a separate MapImageLayer to place the second batch of images but they still go on top of the first ones.

What am I doing wrong? MapItemsControl wouldn't display the images so I used MapImageLayer.

Appreciate your time and help.
Coordinator
Oct 10, 2015 at 12:16 PM
Edited Oct 10, 2015 at 12:17 PM
I already told you that you aren't supposed to add anything to a MapImageLayer. It is derived from MapPanel - and hence has a Children property - only because it internally manages two MapImage child elements.

Once again, use a MapItemsControl instead. The fact that it "wouldn't display the images" is because you are apparently not using it correctly. Take a look at the sample application, and also read available documentation about data templating in WPF. A good start would be the Data Templating Overview article on MSDN.
Oct 11, 2015 at 1:49 PM
Okay...back to square one. Recoded to the following:

ViewModel: Point class has properties: Name, Location, Type, ImgSrc (ImageSource, depending on type).
ViewModel Constructor takes in a DataTable (Oledb) parameter:

Constructor Code snippet:

public ViewModel(DataTable dt)
{
//initialize variables here...
Swatpins = new ObservableColletion<Point>();
//Read data from DataTable
foreach (DataRow row in dt.Rows)
{
      //Get fields for Type, Name, Latitude, Longitude from DataTable...

    Swatpins.Add(new Point
    {
        Name = vName,
        Location = new Location(vLat, vLon),
        ImgSrc = GetImageSource(vType)
    });

XAML:
<Window.Resources>
<DataTemplate x:Name="SwatpinTemplate" DataType="{x:Type vm:ViewModel}">
    <map:MapItemsControl>
        <vm:Point Name={Binding Name}" Location={Binding Location}" ImgSrc={Binding ImgSrc}" />
    </map:MapItemsControl>
</Window.Resources>

<map:Map x:Name="MyMap">
<map:MapItemsControl x:Name="SwatpinItemsControl"
                         ItemsSource="{Binding Swatpins}"
                         ItemTemplate="{Binding SwatpinTemplate}" / >
Then, I have a ListBox with checkboxes. If user checks, say, a checkbox for Subbasin, all Swatpins for subbasins load on map. If user checks channel checkbox, all swatpins for channels should load.

Right now, it's not loading anything when user clicks a checkbox inside the ListBox.
Coordinator
Oct 11, 2015 at 3:45 PM
Edited Oct 11, 2015 at 3:49 PM
That is a MapItemsControl in the ItemTemplate of a MapItemsControl, which doesn't make sense. There should probably be an Image control in the DataTemplate. You would also need to set the ItemContainerStyle in order to bind the MapPanel.Location property.

Please take a closer look at the sample application to find out how a MapItemsControl (or an ItemsControl in general) is used. You should really take the time and try to make yourself familiar with the basics of styles and templates in WPF.