Image as pushpin on maps - Windows phone 8

Question

im trying to add a image to a windows phone 8 map, to serve as a pushpin

i have the following code on my XAML

<phone:PhoneApplicationPage
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:maps="clr-namespace:Microsoft.Phone.Maps.Controls;assembly=Microsoft.Phone.Maps"
x:Class="Cartuxa.Contactos"
FontFamily="{StaticResource PhoneFontFamilyNormal}"
FontSize="{StaticResource PhoneFontSizeNormal}"
Foreground="{StaticResource PhoneForegroundBrush}"
SupportedOrientations="Portrait" Orientation="Portrait"
mc:Ignorable="d"
shell:SystemTray.IsVisible="True">

<!--LayoutRoot is the root grid where all page content is placed-->
<Grid x:Name="LayoutRoot">
    <Grid.Background>
        <ImageBrush ImageSource="/Assets/Images/[email protected]"/>
    </Grid.Background>
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="*"/>
    </Grid.RowDefinitions>

    <!--TitlePanel contains the name of the application and page title-->
    <StackPanel Grid.Row="0" Margin="12,17,0,28"/>

    <Grid x:Name="ContentPanel" Grid.RowSpan="2" Margin="0,-6,0,6">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="127*"/>
            <ColumnDefinition Width="329*"/>
        </Grid.ColumnDefinitions>
        <Image HorizontalAlignment="Left" Margin="18.75,57.5,0,0" VerticalAlignment="Top" Source="/Assets/Images/[email protected]" Stretch="Fill" Grid.ColumnSpan="2" Width="221" Height="72"/>
        <TextBlock HorizontalAlignment="Left" Margin="30,152,0,0" TextWrapping="Wrap" Text="Contactos" VerticalAlignment="Top" Foreground="#FFCD3333" FontFamily="Helvetica" FontSize="36" Grid.ColumnSpan="2" Width="174"/>
        <Button HorizontalAlignment="Right" Margin="0,201,-13,0" VerticalAlignment="Top" Width="255" Background="White" Height="66" BorderThickness="0" Grid.Column="1" BorderBrush="#FFFF0909">
            <Grid Grid.ColumnSpan="2">
                <Image Name="POI_Left" Source="/Assets/Images/[email protected]" RenderTransformOrigin="0.4,0.274" HorizontalAlignment="Center" VerticalAlignment="Center" Margin="-180,0,0,0" Stretch="None"/>

                <TextBlock HorizontalAlignment="Left"
               Margin="13,6,-22,0"
               TextWrapping="Wrap"
               Text="Paços dos Condes de Basto"
               VerticalAlignment="Top"
               FontFamily="Helvetica"
               Foreground="Black"
               FontSize="14" Width="182"/>
            </Grid>
        </Button>
        <maps:Map Name="contactosMaps" HorizontalAlignment="Left" Margin="0,271,0,0" VerticalAlignment="Top" RenderTransformOrigin="-1.737,-0.175" Grid.ColumnSpan="2" Height="290" Width="480"/>
        <Button  Name="Contactos_Btn1"
                 Click="Contactos_Btn1_Click"
                 HorizontalAlignment="Right"
                 Margin="-17,201,242,0"
                 VerticalAlignment="Top"
                 Width="255"
                 Background="White"
                 Height="65"
                 BorderThickness="0"
                 Grid.ColumnSpan="2">
            <Grid Name="pushRed" Grid.ColumnSpan="2">
                <Image x:Name="POI_Right" Source="/Assets/Images/[email protected]" RenderTransformOrigin="0.4,0.274" HorizontalAlignment="Center" VerticalAlignment="Center" Margin="-190,0,0,0" Stretch="None"/>
                <TextBlock HorizontalAlignment="Left" Margin="14,6,-14,0" TextWrapping="Wrap" Text="Fundação Eugénio De Almeida" VerticalAlignment="Top" FontFamily="Helvetica" Foreground="Black" FontSize="14"/>
            </Grid>
        </Button>
        <TextBlock HorizontalAlignment="Left" Margin="26,606,0,0" TextWrapping="Wrap" VerticalAlignment="Top" Grid.ColumnSpan="2" Width="406" Height="22">
            <Run FontFamily="Helvetica" Text="Fundação Eugénio de Almeida"/>
            <LineBreak/>
            <Run/>
        </TextBlock>
        <TextBlock HorizontalAlignment="Left" Margin="30,655,0,0" TextWrapping="Wrap" VerticalAlignment="Top" Grid.ColumnSpan="2" Width="402" Height="85" FontFamily="Helvetica">
            <Run Text="Páteo de São Miguel "/>
            <LineBreak/>
            <Run Text="Apartado 2001, 7001-901 Évora "/>
            <LineBreak/>
            <Run Text="Portugal"/>
            <LineBreak/>
            <Run/>
        </TextBlock>
        <TextBlock HorizontalAlignment="Left" Margin="30,745,0,0" TextWrapping="Wrap" VerticalAlignment="Top" Grid.ColumnSpan="2" Width="406" Height="22" Text="Tel. (+351) 266 748 300 "/>
        <TextBlock HorizontalAlignment="Left" Margin="30,773,0,0" TextWrapping="Wrap" VerticalAlignment="Top" Grid.ColumnSpan="2" Width="406" Height="22">
            <Run FontFamily="Helvetica" Text="Fax. (+ 351) 266 705 149"/>
            <Run FontFamily="Helvetica"/>
            <Run/>
        </TextBlock>

    </Grid>
</Grid>

and my .cs code is the following

public partial class Contactos : PhoneApplicationPage
{
    public Contactos()
    {
        InitializeComponent();
        Loaded +=Contactos_Loaded;

    }

    private void Contactos_Loaded(object sender, RoutedEventArgs e)
    {
        UpdateMap();
    }

    private void UpdateMap()
    {

        MapOverlay pin = new MapOverlay();
        pin.Content = pushRed;
        pin.GeoCoordinate = new GeoCoordinate(38.57325D, -7.90546);
        pin.PositionOrigin = new Point(0, 0.5);

        MapLayer pinLayer = new MapLayer();
        pinLayer.Add(pin);
        contactosMaps.Layers.Add(pinLayer);
        contactosMaps.SetView(new GeoCoordinate(38.57325D, -7.90546), 14D);
    }

    private void Contactos_Btn1_Click(object sender, RoutedEventArgs e)
    {

    }
}

when i try to run my project, it loads the map but a few moments later i get this exception

"Additional information: Value does not fall within the expected range."

when i do the "contactosMaps.Layers.Add(pinLayer);"

can't i have that Grid with the image as a pushpin?

Rajeev Bhatia Rajeev Bhatia · Accepted Answer · 2014-01-23T06:27:32

Use the Phone.Controls.Toolkit as described here:-

http://wp.qmatteoq.com/maps-in-windows-phone-8-and-phone-toolkit-a-winning-team-part-1/

The toolkit can be found at either of

http://phone.codeplex.com/

or

https://www.nuget.org/packages/WPtoolkit

You can then either add the image directly in your XAML as follows:-

<maps:Map Loaded="MapControl_Loaded" ZoomLevel="18" Name="MapControl">
   <toolkit:MapExtensions.Children>
       <toolkit:Pushpin x:Name="MyPushpin">
           <toolkit:Pushpin.Template>
               <ControlTemplate TargetType="toolkit:Pushpin">
                   <StackPanel>
                       <Image Source="/Images/MapScreen/MapScreenCurrentLocationPin.png" Stretch="Uniform" Width="50" Height="50" HorizontalAlignment="Center"/>
                    </StackPanel>
                </ControlTemplate>
            </toolkit:Pushpin.Template>
        </toolkit:Pushpin>
    </toolkit:MapExtensions.Children>
</maps:Map>

or you can add it in C# as follows:-

MapOverlay overlay = new MapOverlay
{
    GeoCoordinate = myMap.Center,
    Content = new Ellipse
    {
        Fill = new SolidColorBrush(Colors.Red),
        Width = 40,
        Height = 40
     }
};
MapLayer layer = new MapLayer();
layer.Add(overlay);

myMap.Layers.Add(layer);

You should be able to add a Grid with an image instead of an ellipse as shown above.

Let me know if this worked for you.

Image as pushpin on maps - Windows phone 8

1 Answers