はじめてのBing Maps Silverlight Control

C# Silverlight

Download Bing Maps Silverlight Control SDK from Official Microsoft Download Center
Silverlight用のBingMapsコントロールがリリースされたので、勉強がてら簡単なサンプルを作成してみます。

お題はコレ。

↑テキストボックスにキーワード(例えば東京タワーとか)を入力したら、その場所を表示する、という単純なの。
UIはSilverlighで作成。サーバー側はキーワードを受け取ってジオコードを返す。後は、そのジオコードをBingMapsに渡すだけです。

<UserControl xClass="BingMapsSample.MainPage"
 xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlnsx="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlnsd="http://schemas.microsoft.com/expression/blend/2008"
    xmlnsmc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mcIgnorable="d"
    xmlnsm="clr-namespace:Microsoft.Maps.MapControl;assembly=Microsoft.Maps.MapControl"
    d:DesignHeight="300"
    d:DesignWidth="400">

    <Grid xName="LayoutRoot" Background="White">
        <GridRowDefinitions>
            <RowDefinition Height="Auto">
            <RowDefinition Height="*">
        </GridRowDefinitions>
        <GridColumnDefinitions>
            <ColumnDefinition>
            <ColumnDefinition Width="Auto">
        </GridColumnDefinitions>
        <TextBox Name="address" GridRow="0"></TextBox>
        <Button GridRow="0" GridColumn="1" Content="Go" Click="Button_Click">
        <mMap Name="map" GridRow="1" GridColumnSpan="2" CredentialsProvider="key" Mode="Aerial" >
    </Grid>
</UserControl>

↑まずは、テキストボックスとボタンとBingMapsしか無い手抜きUI。

CredentialsProvider="key"

↑keyは各自で入手してください。

次に、UIのコード部分。

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using Microsoft.Maps.MapControl.Design;
using System.Json;

namespace BingMapsSample
{
    public partial class MainPage : UserControl
    {
        public MainPage()
        {
            InitializeComponent();
        }

        private void Button_Click(object sender, RoutedEventArgs e)
        {
            WebClient client = new WebClient();

            string url = "http://localhost:52378/GeoCode/Get/" + Uri.EscapeUriString(address.Text);
            client.DownloadStringCompleted += new DownloadStringCompletedEventHandler(client_DownloadStringCompleted);
            client.DownloadStringAsync(new Uri(url), null);
        }

        void client_DownloadStringCompleted(object sender, DownloadStringCompletedEventArgs e)
        {
            if (e.Error != null)
                return;

            var result = e.Result;
            var val = JsonValue.Parse(result);
            var coordinates = val["Placemark"][0]["Point"]["coordinates"];

            map.SetView(new Microsoft.Maps.MapControl.Location(coordinates[1], coordinates[0]), 20);
        }
    }
}

入力したキーワードを取得して、GeocodeControllerのGetメソッドを呼び出して、戻ってきた結果からジオコードを取得するだけ。GeocodeControllerは、ASP.NET MVCのコントローラでこれから作るものです。

で、そのコントローラ。

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using System.Web.Mvc.Ajax;
using System.Net;
using System.IO;
using System.Text;

namespace BingMapsSample.Web.Controllers
{
    public class GeocodeController : Controller
    {
        //
        // GET: /Geocode/

        public ActionResult Index()
        {
            return View();
        }

        public ActionResult Get()
        {
            const string URL = "http://maps.google.com/maps/geo?q=";
            WebClient client = new WebClient();
            string url = URL + Uri.EscapeUriString(RouteData.Values["id"].ToString());

            var stream = client.OpenRead(new Uri(url));
            var text = new StreamReader(stream, Encoding.UTF8).ReadToEnd();

            return Content(text);
        }
    }
}

maps.google.comにアクセスするだけですね。

これで画像のようなサンプルの完成です。記事にしたら大したことありませんが、久々のSilverlightだったり、不慣れなASP.NET MVCだったり、初めてのJsonValueだったりで、悪戦苦闘しました。(^^;