Bing Maps Tutorial #3 – Pushpin und Custom Pushpin in das Map Control einfügen

Bing Maps wächst derzeit enorm in der Bedeutung. Besonders durch die Integration von Deep Zoom (Silverlight) und PhotoSynth hat Bing Maps starkes Aufsehen erregt. Doch auch für Software Entwickler kann Bing Maps sehr interessant sein. In dieser Tutorial Serie, welche mit “bingmaps tutorial” getagged ist, kann man sich durch sämtliche Posts durchklicken.

Eine Karte macht ohne Positionsbezogene Steuerelemente kaum Sinn. Bing Maps bietet hierfür einige Möglichkeiten. Die einfachste Möglichkeit ist ein sogenannter Pushpin. Diese sind bereits durch die Karten bekannt. Eines haben alle Pushpins gemeinsam: Sie bleiben stets auf der richtigen Position auf der Karte.

Die Abbildung zeigt die Vergrößerung eines Pushpin’s. Ein Pushpin ist im Namespace der Karte “versteckt”.

In den vorigen Beispielen haben wir bereits den Namespace hinzugefügt. In der Karte können wir nun den Pushpin einfach einfügen.

 <bing:Pushpin />

Der Pushpin alleine macht nun kaum Sinn. Damit dieser auch an eine Position gelegt wird, kann man mit der “MapLayer.Position” die Position festlegen. MapLayer hat 4 Eigenschaften. Diese sind PositionOffset, welches die den Offset von der Position in der Karte angibt, PositionOrigin, welches die Ausrichtung angibt, Position welches die Standard Position angibt und PositionRectangle. Letzteres passt die Elemente an dieses Rectangle an. Für unser Beispiel verwenden wir die Position. Diese setzen wir auf Wien mit Longitude und Latitude.

         <bing:Map Grid.Row="1" CredentialsProvider="{StaticResource BingStorageCred}" 
                  ScaleVisibility="Collapsed" NavigationVisibility="Collapsed" 
                  Center="48.202, 16.369" ZoomLevel="10" Name="BngMap">

            <bing:Map.Mode>
                <bing:AerialMode Labels="True" FadingLabels="True" />
            </bing:Map.Mode>

            <bing:Pushpin bing:MapLayer.Position="48.202, 16.369" />

Die Position für Wien ist näherungsweise 48.202 und 16.369. Dies ist jetzt jedoch nicht das Stadtzentrum ;).

Nun wollen wir noch ein benutzerdefiniertes Steuerelement hinzufügen. Toll machen sich in solchen Anwendungsfällen Bilder. Hiermit könnte man ein Bild des Stefansdoms einfügen, um Wien zu verdeutlichen. Dies funktioniert auch sehr einfach indem man Elemente einfügt. Dem Steuerelement fügen wir nur die Position und die PositionOrigin an.

PositionOrigin ist eine Struktur, welche die Ausrichtung des Elementes von der Kartenposition angibt. Die einzelnen Werte sind:

• BottomCenter richtet das Element nach unten aus
• BottomLeft richtet das Element am unteren linken Rand aus
• BottomRight richtet das Element am unteren rechten Rand aus
• Center richtet das Element zentriert aus
• CenterLeft richtet das Element links vom Zentrum aus
• CenterRight richtet das Element Rechts vom Zentrum aus
• TopCenter richtet das Element oben zentriert aus
• TopLeft richtet das Element am oberen linken Rand aus
• TopRight richtet das Element am oberen rechten Rand aus

Für unser Beispiel wählen wir “Center”. Wie dies aussieht ist im nächsten Beispiel ersichtlich.

         <bing:Map Grid.Row="1" CredentialsProvider="{StaticResource BingStorageCred}" 
                  ScaleVisibility="Collapsed" NavigationVisibility="Collapsed" 
                  Center="48.202, 16.369" ZoomLevel="10" Name="BngMap">

            <bing:Map.Mode>
                <bing:AerialMode Labels="True" FadingLabels="True" />
            </bing:Map.Mode>
            
            <Canvas Width="70" Height="50" bing:MapLayer.Position="48.202, 16.369" bing:MapLayer.PositionOrigin="Center" >
                <Image Source="this_is_legend.jpg" Stretch="Fill" Height="50" Width="50"  />
            </Canvas>

        </bing:Map>

Es ist auch möglich, das man Elemente programatisch einfügt. Für das nächste kurze Beispiel benötigen wir einige Steuerelemente welche wir in einer Box wie im vorigen Beispiel einfügen werden.

             <Border CornerRadius="10" Margin="5" BorderThickness="1" BorderBrush="Black">

                <StackPanel Margin="10">

                    <TextBox Width="160" Text="48.202" Name="TxtPosLat" Margin="5,6.5,5,5" TextAlignment="Center"/>
                    <TextBox Width="160" Text="16.369" Name="TxtPosLon" Margin="5,0,5,5" TextAlignment="Center"/>
                    <Button Margin="8,0,8,5" Content="Insert" Click="OnButtonInsert" />
                    
                </StackPanel>

            </Border>

Über die DependencyProperties kann man nun noch Elemente einfügen. Hierfür setzen wir das DependencyProperty für “MapLayer.PositionProperty”.

 private void OnButtonInsert(object sender, RoutedEventArgs e)
{
    Button sample = new Button();
    sample.Content = "Do IT";

    Location loc = new Location();
    loc.Latitude = Double.Parse(TxtPosLat.Text, new NumberFormatInfo() { CurrencyDecimalSeparator = "." });
    loc.Longitude = Double.Parse(TxtPosLon.Text, new NumberFormatInfo() { CurrencyDecimalSeparator = "." });

    sample.SetValue(MapLayer.PositionProperty, loc);

    BngMap.Children.Add(sample);

}