ComponentOne Studioの地図コンポーネント＋オープンデータでマッシュアップしよう

マーカーのカスタマイズ

　C1Mapsコンポーネントでは地図マーカーとして特殊な形を描画したいときは、C1VectorPlacemarkのGeometryにXAMLのパス定義を指定します。今回のサンプルで表示するのはAEDの情報なのでハート形マーカーとして、位置をハートの最下部の頂点で指し示すようにカスタマイズしてみましょう。

パスの作成

　地道にパスを作成してもいいのですが、Syncfusion Metro Studio 2を使えば登録されているアイコンからパス定義を生成できるので、今回はこの方法でパスを作成します。

図6　マーカーのXAML定義を生成する

XAMLへの設定

　C1VectorPlacemarkにGeometryパラメタを追加して、そこにパス定義を設定します。

リスト4　MainWindow.xamlより抜粋

        :
      (中略)
        :
<Custom:C1VectorPlacemark 
    Fill="Red" Stroke="Red"
    LabelPosition="Top"
    Foreground="Red"
    GeoPoint="{Binding LatLng}"
    Geometry="M7.4166234,16.197001L13.497334,16.345396 …（中略）…E-06z" />
        :
      (中略)
        :

マーカーの先端位置調整

　ハートマークの下部の先端は、Y軸方向最下層でありX軸方向は中心となっています。そこでRenderTransform定義を追加して位置をずらしたいと思います。手作業でXAMLを変更してもいいのですが、このようなときに便利なのがBlendです。

図7　マーカーの先端を位置情報に合わせる

　ついでに大きさも縦横0.5倍になるように調整しておきましょう。

リスト5　MainWindow.xamlより抜粋

        :
      (中略)
        :
<Custom:C1VectorPlacemark 
    Fill="Red" Stroke="Red"
    LabelPosition="Top"
    Foreground="Red"
    GeoPoint="{Binding LatLng}"
    Geometry="M7.4166234,16.197001L13.497334,16.345396 …（中略）…E-06z">
    <Custom:C1VectorPlacemark.RenderTransform>
        <TransformGroup>
            <ScaleTransform ScaleX="0.5" ScaleY="0.5"/>
            <TranslateTransform Y="-20" X="-10"/>
        </TransformGroup>
    </Custom:C1VectorPlacemark.RenderTransform>
        :
      (中略)
        :

実行

　カスタマイズしたマーカーが想定した位置に表示されるかを確認します。

図8　カスタマイズマーカーでのサンプル実行

まとめ

　意外にもBing MapのWPF対応は、2012/1/12に提供されたBing Maps Windows Presentation Foundation (WPF) Control, Version 1.0 が最新版のようです。デスクトップアプリとして作成するのであれば、描画速度やストアアプリと同じXAML（利用できるパラメタなどに違いはありますが）で画面定義ができてBindingが使える点から考えても、WindowsフォームではなくWPFだと思います。ストアアプリではなくデスクトップアプリとしてオープンデータを活用するのであれば、ぜひWPFとComponentOne Studioを組み合わせて使いやすいアプリを設計構築してみてはいかがでしょうか。