クリッカブルでレスポンシブな日本地図 – Clickable and Responsive Japanese Map

クリッカブルな日本地図を描きたい。とき、日本地図の画像を用意して、都道府県の座標を落としていく、イメージマップを使われてきたのが一般的かと思いますが、イマドキ「Japan Map プラグイン」という jQuery プラグインが用意されていたりします。

Japan Map プラグイン を使って色分けリアルな日本地図

こんなクリッカブルマップが簡単に描けます。

このソースは、コチラ https://takemaru-hirai.github.io/japan-map/

スターフィールド株式会社さんや、ゆうそうとITブログ.さんが詳しく解説されています。ありがとうございます。

また、

エリアをクリックして、詳細の都道府県を表示する二段階方式

での表示の仕方は、Webシステム開発のメモなどさんが、丁寧に解説されていて、非常に参考になります。

 

しかし、私が今回やりたいのは、もっと

簡素化、デフォルメされた日本地図で、色やエリア分けも簡単にできる方法で、なおかつレスポンシブ

なのです。

日本地図は、いろいろと簡素化されたデザインが出ていて、ほぼ四角だけで書くことも可能です。

であれば、画像を使わなくても、テーブルだったり、レイアウト系のスタイルを駆使することでできるんじゃないかと…

そして、画像じゃなければレスポンシブ化もしやすいはず

そんな安易に考えたのですが、エグい。かなり難しい。途中挫折して数日放り投げた後、ようやくなんとか完成しました(と思います)
※どなたか、デキる方、改良版があったら教えてください。

 

CSS