画像を使わずにcanvasで描画した日本地図SPAデモ


一年前にお仕事で関わったページで、スポット検索の日本地図をcanvasで描画するという試みをしたので、そのときに作成したサンプルを紹介します。
いつもNAVI不動産 賃貸マンション・賃貸住宅を探す

9/3現在、実際のページではパラメータを付与して遷移していますが、当初私が想定していたのはひとつのhtmlソースでSPAのように画面を切り替える方法でした。
ラジオボタンがそれぞれの地方に対応していて、全国地図といったりきたりできるようにしています。(サンプルは関東だけです)

See the Pen 画像を使わずにCSSとcanvasで日本地図 by natsumi (CodePen.

全画面を表示するにはこちら(新規タブで開きます)
画像を使わずにcanvasで日本地図SPAデモ

今はいろいろなサイトでcanvasやSVGを利用したスポット検索用の日本地図が見られますが、SVGにしなかった理由はたしか、今後のスマホ対応まで考えるとSVG対応していない端末があるのでcanvasでやろう、ということになったと思います。一年前だからもうあんまり覚えてない(;´∀`)

あともうひとつ問題があって、Firefoxではめちゃめちゃ重いんですよね。canvasがだめなのか、js側の処理に問題があるのかわかりませんが…
ということで実際の不動産サイトでは、ブラウザによって分岐させて、Firefoxのときはボタン部分のみがhover、地図部分はただの画像としました。

SVG対応していない端末もどんどん減っていきそうなので、新しいサービス作るときはいろんな解像度に対応できるSVGもどんどん取り入れていきたいですね。ロゴとか、アイコンとか。