Yahoo!ローカルサーチAPIを使って地図上にランドマークを表示させるプログラムを作る

新しいStackPanelのインスタンスmyStackPanelオブジェクトを作成します。背景色にNavy、Marginに5を指定して余白を設けます。最初の状態では非表示としておきます。
SetValueメソッドにZIndexPropertyを指定し、値に1ずつ加算されるメンバ変数noを指定します。お城の画像アイコンよりもStackPanelが前面に表示されます。

新しいTextBlockのインスタンスmyAddressTextBlockオブジェクトを作成します。
文字サイズに22、文字色にCrimson、Widthに400、文字の回り込みを可、Textプロパティには変数myAddressの値と文字列「辺り」を連結して指定します。パディングには5を指定します。

新しいTextBlocのインスタンスmyCastleNameTextBlockオブジェクトを作成します。
文字サイズに24、文字色にGold、Textプロパティに要素の値を指定します。パディングには5を指定します。

新しいButtonのインスタンスmyButtonオブジェクトを作成します。
Contentプロパティに「Webで検索」と指定し、Tagプロパティにメンバ変数noの値を文字列にキャストして指定します。どのボタンがクリックされたかの判定に使用します。

MapLayerクラスのSetPositionメソッドで、マップレイヤー内にmyStackPanelオブジェクトの位置を設定します。
myMapにAddメソッドでmyStackPanelオブジェクトを追加します。メンバ変数noを1ずつ加算します。
AddHandlerステートメントで、myImageがタップされた時のイベントハンドラを追加します。イベントハンドラ内では、以下の処理を行います。

myStackPanelオブジェクトを表示状態にします。

AddHandlerステートメントで、myStackPanelがタップされた時のイベントハンドラを追加します。イベントハンドラ内では、以下の処理を行います。

myStackPanelオブジェクトを非表示状態にします。

AddHandlerステートメントで、myButtonがタップされた時のイベントハンドラを追加します。イベントハンドラ内では、以下の処理を行います。

myFrameを表示状態にします。

Buttonの情報を保持しているmySenderオブジェクトをDirectCastでButtonにキャストして、そのTagプロパティの値を取得し、変数Indexに格納します。Indexの値を数値に変換してmyIndexに格納します。

全ての子孫要素のmyIndexに位置する要素の値を取得して、変数castleNameに格納します。

Navigateメソッドで、変数castleNameの値を引数にWebBrowserPageに遷移します。

  Protected Overrides Async Sub OnNavigatedTo(e As Navigation.NavigationEventArgs)
    xmldoc = XElement.Load("Castle.xml")
    For Each result In From c In xmldoc.Descendants("Info") Select c
      Dim myImage As New Image
      With myImage
        .Width = 28
        .Height = 36
        .Source = New BitmapImage(New Uri("ms-appx:///Image/城.png"))
      End With
      Dim myLatitude = result.Element("Latitude").Value
      Dim myLongitude = result.Element("Longitude").Value
      Dim myLocation = New Location(CDbl(myLatitude), CDbl(myLongitude))
      MapLayer.SetPosition(myImage, myLocation)
      myMap.Children.Add(myImage)
      myMap.SetView(myLocation, 8)
 
      Dim myAddressUri As String = String.Format("http://reverse.search.olp.yahooapis.jp/OpenLocalPlatform/V1/reverseGeoCoder?lat={0}&lon={1}&appid={2}", CDbl(myLatitude), CDbl(myLongitude), AppID)
      Dim myAddressHttpClient As New HttpClient
      Dim myCurrentAddress = Await myAddressHttpClient.GetStringAsync(myAddressUri)
      myCurrentAddress = myCurrentAddress.Replace("<YDF firstResultPosition=" &ChrW(34) & "1" &ChrW(34) & " totalResultsAvailable=" &ChrW(34) & "1" &ChrW(34) & " totalResultsReturned=" &ChrW(34) & "1" &ChrW(34) & " xmlns=" &ChrW(34) & "http://olp.yahooapis.jp/ydf/1.0" &ChrW(34) & ">", "<YDF>")
 
      Dim doc As XElement = XElement.Parse(myCurrentAddress)
      Dim myAddress = doc.Descendants("Address").Value
 
      Dim myStackPanel As New StackPanel
      With myStackPanel
        .Background = New SolidColorBrush(Colors.Navy)
        .Margin = New Thickness(5)
        .Visibility = Xaml.Visibility.Collapsed
        .SetValue(Canvas.ZIndexProperty, no)
      End With
 
      Dim myAddressTextBlock As New TextBlock
      
      With myAddressTextBlock
        .FontSize = 22
        .Foreground = New SolidColorBrush(Colors.Crimson)
        .Width = 400
        .TextWrapping = TextWrapping.Wrap
        .Text = myAddress& "辺り"
        .Padding = New Thickness(5)
      End With
 
      Dim myCastleNameTextBlock As New TextBlock
      
      With myCastleNameTextBlock
        .FontSize = 24
        .Foreground = New SolidColorBrush(Colors.Gold)
        .Text = result.Element("Name").Value
        .Padding = New Thickness(5)
      End With
 
      Dim myButton As New Button
      With myButton
        .Content = "Webで検索"
        .Tag = no.ToString
      End With

      myStackPanel.Children.Add(myAddressTextBlock)
      myStackPanel.Children.Add(myCastleNameTextBlock)
      myStackPanel.Children.Add(myButton)

      MapLayer.SetPosition(myStackPanel, New Location(CDbl(myLatitude), CDbl(myLongitude)))
      myMap.Children.Add(myStackPanel)
      no += 1
      AddHandlermyImage.Tapped, Sub()

                                   myStackPanel.Visibility = Xaml.Visibility.Visible
                                End Sub
      
      AddHandlermyStackPanel.Tapped, Sub()
                                   myStackPanel.Visibility = Xaml.Visibility.Collapsed
                                End Sub

      AddHandlermyButton.Click, Sub(mySender As Object, myArgs As RoutedEventArgs)
                                    myFrame.Visibility = Xaml.Visibility.Visible
                                    Dim Index = DirectCast(mySender, Button).Tag
                                    Dim myIndex = CInt(Index)
                                    Dim castleName = xmldoc.Descendants("Info")(myIndex).Element("Name").Value
                                    myFrame.Navigate(GetType(WebBrowserPage), castleName)
                                End Sub
    Next
  End Sub

戻る(←)アイコンがタップされた時の処理

myFrameを非表示状態にします。日本列島のお城の位置に、お城のアイコンが配置されたページが表示されます。

    Private Sub backButton_Click(sender As Object, e As RoutedEventArgs) Handles backButton.Click
      myFrame.Visibility = Xaml.Visibility.Collapsed
    End Sub
  End Class

次に、ソリューションエクスプローラー内のWebBrowserPage.xamlを展開して表示される、WebBrowserPage.xaml.vbをダブルクリックしてリスト5のコードを記述します。

ロジックコードを記述する

リスト5　(WebBrowser.xaml.vb)

Public NotInheritable Class WebBrowserPage
  Inherits Page

ページがアクティブになった時の処理

MainPage.xamlから送られた値は、e.Parameterで取得できます。これはObject型であるため、DirectCastで文字列にキャストして変数castleNameに格納します。
変数myUriに、ウィキペディアのUriに、引数castleNameをエスケープ表現に変換して指定し、格納しておきます。

WebBrowserのSourceプロパティに、myUriで初期化された新しいUriのインスタンスを指定します。これで、指定したお城に関するウィキペディアの情報が表示されます。

  Protected Overrides Sub OnNavigatedTo(e As Navigation.NavigationEventArgs)
    Dim castleName = DirectCast(e.Parameter, String)
    Dim myUri = String.Format("http://ja.wikipedia.org/wiki/{0}", Uri.EscapeDataString(castleName))
    WebBrowser1.Source = New Uri(myUri, UriKind.Absolute)
  End Sub
End Class

アイコンの作成

詳細については、「自分の現在位置を取得して表示するサンプルプログラム」の記事を参照してください。

今回はここまでです。ありがとうございました。