地図を綺麗に色分けできるグーグルMAP CHARTSを勉強してみました。パラメーターを色々くっつけるだけで、綺麗な地図が描けるので、とても便利です。
グーグルMAP CHARTSは、http://chart.apis.google.com/chartの後ろに色んなパラメーターをくっつけたクエリで、地図を表示します。たとえば記事トップの地図のHTMLは下のようになります。
<img src="http://chart.apis.google.com/chart
?cht=map:fixed=-60,0,80,-35
&chs=600x350
&chld=RU|CA|CN|US|BR
&chdl=Russian+Federation|Canada|China|United+States|Brazil
&chco=E6E6E6|FF0000|CC33FF|0000FF|33CC33|FFFF00
&chtt=Large+Countries
&chm=fRussian+Federationr,000000,0,0,10|
fCanada,000000,0,1,10|
fChina,000000,0,2,10|
fUnited+States,000000,0,3,10,0,:0:300|
Brazil,000000,0,4,10
&chma=0,0,0,0"
alt"" />
それぞれのパラメーターについてのウェブシュフなりの解説は以下の通りです。
cht=map:fixed
cht=map:fixed=(地図の下端の緯度,左端の経度,上端の緯度,右端の経度）
世界地図の中でどの範囲を切り抜くかを指定します。
chs
chs=（画像の幅)x（画像の高さ）
ピクセルで指定します。
chld
chld=（地域コード0|地域コード1|…|地域コード）
地域コードはISO3166によります。
chdl
chdl=（ラベル0|ラベル1|…|ラベル）
地図右側の色分けにつけるラベル。半角スペースを+に置き換えます。
chco
chco=（全体の色コード|色コード0|色コード1|…|色コード）
一番先頭に地図全体の陸地の色コードを書くのを忘れないで下さい。そのあと地域コード0、ラベル0に対応する色コードを書きます。
chtt
chtt=(地図のタイトル。半角スペースを+に置き換えます。)
chm
chmは、フラグの内容を表します。上に書いたコードのchmの一行目に注目してください。
chm=fRussian+Federationr,000000,0,0,10
fは、fの直後から最初のカンマまでのテキストを地図内にフラグ形式で挿入することを表します。このときも半角スペースは+で表します。
000000はテキストの色コードです。
0については意味がよく分かりません。どなたか教えてくれるとありがたいです。
0は、どの地域を指すかを表す数字。今回RU|CA|CN|US|BRと指定しているので、0はRU、1はCA、2はCN、3はUS、4はBRを指します。
10はフラグの中のフォントサイズです。
ここまでで、ようやく一本目のフラグが立ちました。
以下、「|」で区切って立てていきます。
chm=fRussian+Federationr,000000,0,0,10|
fCanada,000000,0,1,10|
fChina,000000,0,2,10|
fUnited+States,000000,0,3,10,0,:380:-120|
Brazil,000000,0,4,10
chma
これは、マージンをピクセルで指定するパラメーターです。
CSSのmargin指定とは少し違うので注意が必要です。
chma=(左マージン,右マージン,下マージン,左マージン）