地図は地図のまま利用するのではなく、多くの場合その上にアイコンを載せたり線を描いたりします。そうすることで目的の場所を目立たせたり、駅などから目的地へ移動しやすくなるでしょう。 今回紹介するのはImageMaps、地図の上にアイコンなどを載せられるjQueryプラグインです。

ImageMapsの使い方

編集画面です。アイコンやテキスト、円や四角などが描けます。

こんな感じでアイコンを載せて大きさを変えたりしながら地図を編集していきます。

できあがった地図。これは画像ではなく、SVGとなっています。

ImageMapsの編集結果は読込専用のSVGとなっています。画像ではないので注意してください。日本語なども問題なく扱えますし、アイコンやドローを多彩にすると便利そうです。

ImageMapsはjQuery/JavaScript製のオープンソース・ソフトウェア(MIT License)です。

ImageMaps by naver naver/ImageMaps: jquery plugin which can be partially linked to the image