Как нанести метку(флажок) на каждое здание?
Аналог: яндекс(гугл) карты.
В будущем предполагается: пользователь кликает по флажку, а справа, в элементе Col-3 отображается описание помещения.
Код: Вопрос_Схема_Пердприятия - JSFiddle - Code Playground
Обновление-1
Сайт предполагается использовать на одном устройстве - 43 дюйма.
Бэкенд -Node.js.
Я не знаю как “закрепить” отдельно стоящие метки так чтобы при изменении размерка картинки они оставались на том-же месте. Если нужен именно такой подход, через отдельные метки, я бы писал скрипт который вычисляет положение меток относительно размеров картинки.
Но можно сделать финт ушами. Создать картинку прямо сразу вместе с метками, а потом использовать HTML Image Maps тег <map>, <area> которые позволяют описать область с которой можно взаимодействовать. И уже к этим областям привязать скрипты. Есть решения чтобы изменять разметку для точек взаимодействия вместе с размером картинки: GitHub - davidjbradshaw/image-map-resizer: Responsive HTML Image Maps
Вот пример. Image maps. Область для взаимодействия - прямоугольник границы Украины. Привязан обработчик клика. Меняй размер браузера и обрати внимание что клик над Украиной все равно проходит.
А вот в таких тулзах проще будет натыкать прямо в браузере координат для областей над картинками https://www.image-map.net
UPD Изменил пример чтобы форма была не прямоугольной а полигонной. Чтобы было проще оценить корректное изменение границ при изменении размера изображения.
Буду переваривать…
Обновление-1(добавил в вопрос. дублирую здесь)
Сайт предполагается использовать на одном устройстве - 43 дюйма.
Бэкенд -Node.js.
