東京23区を色分けした地図を作る。　寝太郎の江戸風呂。ね！

2025
10
30

[PR]

[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。

2025/10/30 (Thu.)

2011
01
12

東京23区を色分けした地図を作る。

今回は、Yahoo! JAPAN Web Services の地図APIのJavaScriptマップを利用します。この中の白地図レイヤー(blankmap)を用いると行政区域ごとの色分けが可能です。

記事「都道府県を色分けした地図を作る。」では、Google Chart Tools/Image Charts(aka Chart API) の Map Chart を用いて、各都道府県の色分けを行いました。現時点では、それより細かいレベルの地域を色分けすることは、Google の Map Chart ではできませんでした。

一方、Yahoo! JAPAN JavaScriptマップでは、広域の色分けはできません。白地図レイヤー(blank_map)が適用できるのは、縮尺レベル(zoom lebel)の11～20の範囲です。日本列島の主要部分を地図に表示する場合には、"5"か"6"の縮尺レベル(zoom lebel)が必要なので、都道府県の色分けはできません。逆に狭い地域の色分けは得意です。

今回は、縮尺レベル(zoom lebel)"11"で、東京23区を色分けしましょう。

ソースコード

APIのロード

まず地図APIを導入しておきます。

<script
 src="http://js.api.olp.yahooapis.jp/OpenLocalPlatform/V1/jsapi
 ?appid=≪アプリケーーションID≫"
 type="text/javascript"  charset="UTF-8" >
</script>

表示位置の設定

表示位置とその幅、高さを設定します。地図オブジェクトを生成するときにこのidを指定します。

<div id="map110113" style="width:280px; height:280px"></div>

色分けの設定

"style"オブジェクトの"area"プロパティの中で、行政区域コードと表示色のペアを作ります。

var style = {
  "area" : {
    "default" : "dcdcdc"
    ,"13101" : "bbbcde"
    ,"13102" : "b9d08b"
    ,"13103" : "f6bfbc"
    ,"13104" : "b9d08b"
    ,"13105" : "f8e58c"
    ,"13106" : "f6bfbc"
    ,"13107" : "f8e58c"
    ,"13108" : "f6bfbc"
    ,"13109" : "b9d08b"
    ,"13110" : "f8e58c"
    ,"13111" : "f6bfbc"
    ,"13112" : "b9d08b"
    ,"13113" : "bbbcde"
    ,"13114" : "f6bfbc"
    ,"13115" : "f8e58c"
    ,"13116" : "bbbcde"
    ,"13117" : "f6bfbc"
    ,"13118" : "bbbcde"
    ,"13119" : "f8e58c"
    ,"13120" : "b9d08b"
    ,"13121" : "b9d08b"
    ,"13122" : "bbbcde"
    ,"13123" : "b9d08b"
  },
  "label" : {
    "default" : "696969"
  },
  "border" : {
    "default" : "aaa"
  },
  "bg" : "b0c4de"
}

地図表示のスクリプト

var map;        //地図オブジェクト
var blankmap;   //白地図レイヤー
neta.addListener(function() {
    map = new Y.Map("map110113");
    //白地図レイヤーを作成します。
    blankmap = new Y.BlankMapLayer();
    //レイヤーセットを作成します。
    var layerset = new Y.LayerSet("白地図", [blankmap]);
    //Mapオブジェクトにレイヤーセットを追加します。
    map.addLayerSet("blankmap", layerset);
    //地図を描画します。
    map.drawMap(new Y.LatLng(35.67,139.74),
                11, Y.NORMAL_LAYERSET);
    //表示を白地図にします。
    map.setLayerSet( "blankmap" );
    blankmap.setStyle(style, true);
});

なお、neta.addListener は、お手製のイベントリスナーです。

2011/01/12 (Wed.) Trackback() Comment(0) Yahoo! Web Services

Comments