アノテーション付き地図

概要

これは、任意の地図画像にアノテーションを付けるJavaScriptのデモです。緯度経度を指定して地図にピンを立てて、ピンを選ぶとアノテーションが表示されるようにできます。ピンをクリックするとアノテーションがピン留めされて表示されたままになります。

アノテーションのデータはCSVかMarkdownかJSON形式でHTML内に埋め込みます。各アノテーションのレコードは、緯度と経度と表示内容を属性として持ちます。地図はメルカトル図法のものであれば何でも使えます。地図の左上端の緯度経度と右下端の緯度経度を指定することにより、各アノテーションの緯度経度と照合してピンの座標を決定できるようにします。

詳しい利用方法は、このページのソースを見れば分かるはずです。要点は以下です。

mapannotation.jsというJavaScriptファイルを読み込む。
mapannotation.cssというCSSファイルを読み込む。
CSVかMarkdownかJSONのアノテーションデータを非表示要素として埋め込む
地図画像を置く。onload属性でrenderMapAnnotations関数を呼ぶ。
地図の親要素に地図の右上と左下の地点の緯度経度を指定する。

上記スクリプトはMITライセンスに基づくオープンソースコードとして公開しますので、適当にコピーして使ってください。CSSをいじればピンやアノテーションの表現方法を変えるのも容易でしょう。

このページに置かれた地図はOpenStreetMapのデータですので、それらを無許可で転載して使っても大丈夫です。OpenStreetMapの画面をスクリーンキャプチャすれば、どの地方の地図でも使えるようになります。右上と左下の緯度経度を調べるには、Googleマップで右クリックするのが楽です。

CSVのアノテーションデータ

アノテーションのデータはHTMLの非表示要素の内容として記述します。最も単純なのはCSV形式です。

Markdownのアノテーションデータ

アノテーションのデータはMarkdownの表形式で表現することもできます。

JSONのアノテーションデータ

日本全土の地図と都道府県庁所在地

東京23区

グリッド画像

格子状に画像を並べて表示する機能もあります。ラベルで整理されたたくさんの画像を表示する際に役立ちます。

画像のリストはCSVかマークダウンかJSON形式でHTMLの中に埋め込みます。各々のレコードは、ラベルと画像のリストと省略可能なコメントからなります。同じレコードの画像は同じ小部屋に表示されます。