マップの技術的詳細

https://scrapbox.io/files/6501a4636b2f83001d609ffc.png

本当にSVGで十分なのか？

マップ上のオブジェクトはどのように配置できるようにする？

統一的な方法で可能なのか？

code:map.json

{

"id": "",

"map": {

}

}

ワイヤーフレームのような表示を切り替えられるようにする？

むしろワイヤーフレームしか要らなさそうなのが..

SVGの表示をどうするか？

操作をなるべくカスタムしたい

要件上、ただ上下左右に移動できれば良いというものではない

上手く拡大できなければならない

ブラウザに任せると、おそらく階ボタンも含めて拡大してしまう

JavaScriptでの制御が必要な部分

canvasに描画し、JavaScriptで、ユーザーの画面操作をハンドリングするのが現実的

canvasに描画するのが良いのか？

canvasが必要ないほうがよい

アクセシビリティ的にも、SEO的にも

SVGを利用するためのライブラリ

アニメーションは問題なさそう

部分的にズームするには？

svg.js

svg.panzoom.jsプラグイン を使う

意外に活動は今も続いていて驚いた

ページ全体のネイティブなズームは禁止する

snap.js

svg.jsと同様にプラグインで実現されている