今日は地図の方を進めようと思います。前回記事「横浜市地図を人口に応じて色塗りする」で描いた地図に、区名ラベルだけでなく数値のラベルも添付できるようにしたいと思います。

 

 

ポリゴンの中央にラベルを２行を貼付ける

区毎のポリゴンの中央にラベルが２行くるように位置を調整しつつ、ラベルを貼っていきます。

実際に描いた地図が次の通り（画像をクリックすると地図ページに飛びます）。

 

やっていることはカンタン。テキストラベルのtransform属性で指定する高さ方向の位置について、上の行は-0.5行、下の行は+0.5行だけシフトさせているだけです。行間は予め決めてあります（labelLineHight）。

 

ちなみに・・・
縦方向の座標は下向きが正なので、通常の感覚と逆方向になります。上方向への移動がマイナス，下がプラスですね。

 

ソースコードは次の通り。

index.html

 

動けばよし！という感じのコードになってしまいましたが、数値ラベルも合わせて貼れました♪

 

 

ただ、濃い緑の背景の箇所は黒いテキストラベルが見づらいですね。背景が濃い場合は文字色を白にすると良いのではないでしょうか。

という訳で、次はこの問題を解決すべく、ラベルの色制御をしてみようと思います。