こんにちは。今日は、前回記事「区名を英数字コードに置換する」でTopoJSONファイルの中の区名をID番号に書き換えたものを使って、再度横浜市地図を表示してみます。

 

区名の代わりに行政団体コードをラベル表示する

前々回の記事「地図に区名を表示する」で利用したindex.htmlをそのまま流用して、地図表示してみます。（読み込むTopoJSONファイルを、区名=>コードに置換したものに変えるだけです）

TopoJSONファイルの区名を”id”+団体コードに書き換えたので、地図上のラベルもコードに置き換わりました。

 

各区１つだけラベルを表示する

このままだと、前々回の記事と同様に同じ番号が重複表示されているので、修正します。

index.html

まず区毎にラベリングしたいので、”id”+団体コードの文字列をclass属性に追加しました(L80,86-88)。そして冒頭のスタイル指定でラベルを一旦全て非表示にしておきます(L.25)。

地図描画処理に続いてラベル追加処理を終えた後（この時点では全てのラベルはdisplay:noneのまま）、for文で各団体コードについて１つのラベルのみdisplay:blockに書き換える処理を入れました(L.100-102)。

重複してラベル表示されていた箇所が消えました♥︎

でも、このままだとラベル名が団体コードってイマイチですよね。次は、これらの団体コードを再度区名に置き換えたいと思います。それではまた！