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


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

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

日本地図をリアルなやつにしてしまったせいでかなり重いので(;´Д`)PCで表示してください。
全画面を表示するにはこちら(新規タブで開きます)
画像を使わずにcanvasで日本地図SPAデモ

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

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

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

スポンサードリンク

菜摘

Web制作がメインですがときどきフライヤーデザインやCDラベルなどDTP系もやってます。 デザイナーだったはずがhtml/cssコーディングに目覚めた。 黒い画面は相変わらず怖い。 javascriptはこのごろちょっと頑張ってるよ。

コメント

  1. 日本地図から関東をマウスオーバーしたときの大きくなる(拡大?)ってどうやってますか?
    jsを見てもマウスオーバーの処理がないように見えて・・・

    1. jsではなく、css側ですね。
      切り替え用のラジオボタンに対応するlabelで関東エリアのcanvasを囲んで、label:hoverのときにtransform:scale();を変更しています。
      普通に拡大しちゃうと荒くなるので、通常時がscale(0.76)、拡大時がscale(1)、としているところがコツですね。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です