Как сделать такую интерактивную карту здания?

Question

[Dmitriy G]

Есть уроки как сделать такую карту с нуля на VUE ? https://afimall.ru/floors-map?floor=f_4&id=2_014&p...


UPD: про SVG было изначально понятно)

Comments

[Philipp]

Не самая лучшая карта.

[IIIu6ko]

А что тут объяснять? Как клик по path обработать?)

[Dmitriy G]

IIIu6ko, помимо клика там много всего....

[IIIu6ko]

Dmitriy G, Что? Там табы этажей внутри которых svg. Ховер там на css, клик обработать и вывести попап с инфой.

[Dmitriy G]

IIIu6ko, вы на сайт вообще заходили? поиск, этажи, ссылка на каждое помещение, загрузка из базы, адаптив, фильтрация, анимация.

[IIIu6ko]

Dmitriy G, Ещё раз говорю, там ТАБЫ ЭТАЖЕЙ, внутри которых SVG. SVG карту дизайнер должен нарисовать и отдать вам. Подгружать данные можно из json.
Для поиска можно использовать тот же json, что и для данных.
Фильтры это просто массивы с айдишниками.

Единственное, это зум. Он там интересно сделан.

[Dmitriy G]

IIIu6ko, ну вот табы, загрузку и поиск, фильтрацию не знаю как сделать, поэтому и задал вопрос. SVG сам нарисую

[IIIu6ko]

Dmitriy G, Придётся гуглить это всё по отдельности и собирать.

Answer 1

[Vaulter]

SVG

Answer 2

[Ranwise]

на том сайте что вы привели и так сделано на вью, ковыряйте в инспекторе исходники, а так там canvas, svg

Answer 3

[Владимир Коротенко]

Задавали примерно такой вопрос
Как лучше реализовать отображение схемы расположения рабочих мест в офисе в связке vue.js 1С?
https://jsfiddle.net/vkorotenko/902cdmLv/

Answer 4

[Алексей Жданов]

Я делал через SVG интерактивно получилось с переходами по этажам

Comments

[Dmitriy G]

на VUE? про SVG знаю, интересует сам код )