現在位置: トップ > YOLP公式ブログ > Tips > YOLPのJavaScript APIを使って住所エリアを地図上で色分け表示してみましょう

ここから本文です

YOLPのJavaScript APIを使って住所エリアを地図上で色分け表示してみましょう

[Tips]  2012年10月4日
こんにちは、Yahoo! Open Local Platform (YOLP)の志水です。
いつもYOLPをご利用いただきありがとうございます。

今回は、YOLPの提供するYahoo! JavaScriptマップAPI(以下、JSAPI)を利用して、住所検索結果を地図上で色分け表示する方法について、実際のサンプルコードに沿ってご紹介します。

サンプルコードはこちらからどうぞ。
住所を色分け表示することで、住所という「エリア」を示す情報を、地図上でより見やすくわかりやすく表現することが可能になります。ぜひご活用ください。

Yahoo!ロコ 地図でも住所の色分け表示を実現

まず最初に、「住所の色分け表示って何だろう?」という素朴な疑問に対して、先日、住所の色分け表示対応を実現したYahoo!ロコ-地図を例にご紹介したいと思います。

Yahoo!ロコ-地図で住所検索をすると、検索した住所文字列にマッチした検索結果を表示します。
その住所文字列が、店舗や自宅の位置を示す「番地」まである情報の場合、地図上でピンポイントに位置を指し示すことが出来ます。
一方で、「都道府県」・「市区町村」の名前や「町・大字」、「丁目・字」のようなエリアを表す情報の場合、一点を指し示す事ができないため、代表点(周辺を示す目印)を表示しておりました。これではエリアという検索結果の表現として十分ではないので、地図上で該当するエリアをより正確に表現できるように住所検索結果表示方法が改善されています。

Yahoo!ロコ-地図で実現されている住所色分け表示例

  • 「都道府県」の色分け表示: 検索キーワード「東京都


  • 「市区町村」の色分け表示: 検索キーワード「東京都港区


Yahoo!ロコ-地図で実現されている住所のエリア表示は、Yahoo! JavaScriptマップAPIでも実現可能ですので、サンプルコードに沿って実際に実装してみましょう。

BlankMapLayerを使って住所の色分けレイヤーを作成

Yahoo! JavaScriptマップAPIには、白地図に色を塗って表示できるLayerクラスの BlankMapLayerがありますので、こちらをつかって地図上の住所を色分け表示するためのレイヤーを作成します。


地図を表示

以下の通り、地図を表示します。
東京都千代田区を中心として、ズームレベル10の縮尺を表示しています。
var map = new Y.Map("map",{"configure":{"scrollWheelZoom":true}});
    map.addControl(new Y.LayerSetControl());
    map.addControl(new Y.SliderZoomControlHorizontal());
 
    //地図を描画します。
    map.drawMap(new Y.LatLng(35.6821141786951,139.75630702905684), 10);

白地図レイヤー(Y.Blankmaplayer)を使って東京都をエリア表示

以下の通り、白地図レイヤーを使って東京都(行政コード:13)をエリア表示してみましょう。
//白地図レイヤーを作成します。
    var blankmap = new Y.BlankMapLayer();
    //東京都エリアのみをハイライトするためのスタイルを作成します。
    var style = {
        "label" : {
            "default" : "off" //ラベルを非表示にする
        },
        "border" : {
            "default" : "off" //境界線を非表示にする
        },
        "area" : {
            "default" : "off", //エリアを非表示にした上で
            "13" : "F00" // 東京都のみを赤でハイライトする
        },
        "bg" : "off"
    };
    //白地図レイヤーの透過度を0.3に設定する
    blankmap.setOpacity(0.3);
    //作成したスタイルを白地図レイヤーに適用する
    blankmap.setStyle(style, true);
    //地図に白地図レイヤーをかぶせる
    map.addLayer(blankmap);
}

できあがりのサンプルはこちら

まとめ

いかがでしたでしょうか。

住所検索には、ピンポイントに位置を示す結果もあれば、エリアを示す結果もあり、今回ご紹介した内容を活用いただければ、より正確で見やすくわかりやすい住所検索結果表示を地図上で実現することが可能になります。

まだ全ての住所に対し今回のように色分けが出来たわけではありませんが、今後もその色分け表現を増やしていくよう努力していきたいと思います。

YOLPでは、今後も地図をより見やすくみなさんにご満足していただくような表示をしていきますのでご期待ください。

今後ともYOLPをよろしくお願いいたします。


Yahoo! Open Local Platform(YOLP): http://olp.yahoo.co.jp/
YOLP@Facebook(外部リンク): http://www.facebook.com/yahoojpYOLP
YOLP@Twitter(外部リンク): http://twitter.com/yahoojpYOLP
YOLP@GitHub(外部リンク): https://github.com/yahoojpYOLP/
Yahoo!地図アプリ iPhone版/Android版(無料)
Yahoo!地図ブログ
本文はここまでです このページの先頭へ