— 3D MAP —

HTML-in-Canvas を使って、
地図を作成してみた

公開日

会社のアクセスページといえば、Google マップの埋め込み。便利ですが、どのサイトも同じ見た目になります。 3D Map は、街を 3D で作って、道順や場所の名前をサイトに合わせて見せるアクセスマップです。 電車や車も走らせられます。

架空の会社のページに置いた例です。地図はドラッグで回せます。
大きな画面で開く

できること

  1. サイトのデザインに合わせられる。色も建物の見せ方も、自由に作れます。
  2. 道順をアニメーションで見せられる。駅から会社まで、黄色の線で案内します。
  3. 自社のビルを目立たせられる。建物に色を付けて、札を立てます。
  4. 電車や車が走る。見ているだけでも楽しい地図になります。
  5. 地図は本物の HTML。地面の道路や文字は HTML で作って 3D に貼っています。傾けても地面の文字は押せます。

Google マップとの違い

向いている1か所のアクセス案内。サイトの世界観を大事にしたいページ。
向いていない経路検索や、広い範囲の地図。ここは Google マップのほうが便利なので、リンクを並べておくのがおすすめです。

対応ブラウザ

新しいブラウザの機能(HTML-in-Canvas)を使っているので、3D で動くのは今のところ Chrome 157 以降などです。Safari、Firefox、iPhone のブラウザでは 3D は動かず、同じ地図を平面で表示します。