こんにちは。梅雨で毎日ジメジメしていますが、気分だけは元気にブログを更新しようと思います。

 

横浜市地図に日本語区名を表示する

さて、今日でようやく横浜市地図に区名ラベルを表示できます。以前書いた記事「横浜市地図の各区に１つだけラベル表示する」で紹介したコードを、前回の記事「2つのJSONファイルを読み込む」のコードでModifyしました。

 

横浜市地図の完成です♪

下のような地図が出来上がりました。画像をクリックすると、地図ページに飛びます。

 

コードは次の通りです。

index.html

 

変更点は２カ所だけです。

属性データの構造を、”id”+団体コードをキーとするHashに変換する

JSONファイルから読み込んだデータ配列は、そのままだと使いづらいので、団体コードをキーとするHashテーブル（attr => attrHash）に組み直します。

 

ラベルを区名に変更する

区名を貼るコードについて、d.properties.nameの箇所を、attrHash[d.properties.name].nameに書き換えます。

 

やっと普通の横浜市地図が描けました（笑）。

次は、横浜市の人口データの表示に進もうと思います。

それではまた♥︎