忍者ブログ

2018
06
23

[PR]

×

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

2018/06/23 (Sat.)

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区を色分けしましょう。

 
Webサービス by Yahoo! JAPAN

ソースコード


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 は、お手製のイベントリスナーです。

PR

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

Comments

名前
メールアドレス
URL
コメント
PASS  Vodafone絵文字 i-mode絵文字 Ezweb絵文字

Trackback

Trackback for this entry:

Links

ご注意

当サイトのスクリプトは、ブラウザが FireFox 3.0 であることを前提に作成されています。IE などでは正常に動作しないものがあります。

カテゴリー

ブログ内検索

最新記事

カレンダー

05 2018/06 07
S M T W T F S
1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30

アーカイブ

RSS

最新CM

[04/15 jTemplate]
[05/22 寝太郎]

プロフィール

HN:
寝太郎
性別:
非公開

バーコード

P R

アクセス解析

リンク

NSM

コガネモチ

フリーエリア