Add Image Using Map Elements

A nice way to add images to mark specific places in xamMap™ is to use the SymbolElement object to add a marker on the map and use a Value Template to provide the image. This approach works best when you have multiple points that use the same image.

For example, if you have multiple states in a map that you want to add an image to, you can create SymbolElement objects for these states, add them to a layer, and apply a Value Template that contains the image on that layer.

The following code shows you how to add a pizza image to New York to represent it as one of the best places to eat pizza. It creates a layer with a SymbolElement object positioned over New York and uses a Value Template to add the image.

In XAML:

<igMap:XamMap x:Name="map1">
   <igMap:XamMap.Layers>
      <igMap:MapLayer x:Name="statesLayer" Imported="statesLayer_Imported">
         <igMap:MapLayer.Reader>
            <igMap:ShapeFileReader Uri="/../../Shapefiles/usa_st" DataMapping="Name=STATE_NAME; Caption=STATE_ABBR" />
         </igMap:MapLayer.Reader>
      </igMap:MapLayer>
      <igMap:MapLayer x:Name="symbolLayer">
         <igMap:MapLayer.ValueTemplate>
            <DataTemplate>
               <Image Width="50" Height="50" Source="pizza.png" />
            </DataTemplate>
         </igMap:MapLayer.ValueTemplate>
      </igMap:MapLayer>
   </igMap:XamMap.Layers>
</igMap:XamMap>

In Visual Basic:

Private Sub statesLayer_Imported(ByVal sender As System.Object, ByVal e As Infragistics.Controls.Maps.MapLayerImportEventArgs)
        If e.Action = MapLayerImportAction.End Then
                ' Find Element using Name property
                Dim newYork As MapElement = map1.Layers(0).Elements.FindElement("Name", "New York").ElementAt(0)
                ' Get Point data from Cartesian coordinates
                Dim nyOrigin As New Point(newYork.WorldRect.X + 350000, newYork.WorldRect.Y + 300000)
                ' Create Element
                Dim element As New SymbolElement()
                element.SymbolOrigin = nyOrigin
                element.Caption = "Best Pizzarias"
                element.SymbolType = MapSymbolType.None
                element.SymbolSize = 20
                ' Assign arbitrary value so that Value Template can be used
                element.Value = 1
                map1.Layers(1).Elements.Add(element)
                ' Make enough space for the added shape
                Dim worldRect As Rect = map1.Layers(1).WorldRect
                worldRect.Union(element.WorldRect)
                map1.Layers(1).WorldRect = worldRect
        End If
End Sub

In C#:

private void statesLayer_Imported(object sender, Infragistics.Controls.Maps.MapLayerImportEventArgs e)
{
   if (e.Action == MapLayerImportAction.End)
   {
      // Find Element using Name property
      MapElement newYork = map1.Layers[0].Elements.FindElement("Name", "New York").ElementAt<MapElement>(0);
      // Get Point data from Cartesian coordinates
      Point nyOrigin = new Point(newYork.WorldRect.X + 350000, newYork.WorldRect.Y + 300000);
      // Create Element
      SymbolElement element = new SymbolElement() { SymbolOrigin = nyOrigin, Caption = "Best Pizzarias", SymbolType = MapSymbolType.None, SymbolSize = 20 };
      // Assign arbitrary value so that Value Template can be used
      element.Value = 1;
      map1.Layers[1].Elements.Add(element);
      // Make enough space in layer for the added shape
      Rect worldRect = map1.Layers[1].WorldRect;
      worldRect.Union(element.WorldRect);
      map1.Layers[1].WorldRect = worldRect;
   }
}

XamMap Add Image Using Map Elements 01.png

WPF | Help Topics

Add Image Using Map Elements

Related Topics