Правильно ли я понимаю как сделать такую карту?

Question

[Максим Иванов]

https://imgur.com/a/xi34rwD

- На одном скрине карта и все разноцветные прамоугольники, которые на домах - это отдельные элементы.
- На другом скрине место где будет карта и под ней будут круги тех цветов, которые указаны на самой карте. То есть - школа (фиолетовый) дет. сад (красный) и так далее.
Есть шанс, что прямоугольники будут убираться, добавляться и так далее. Есть ли смысл ставить все эти прямоугольники с помощью position absolute или лучше просто картинкой, а если уж будут какие-то изменения, то не проще ли будет просто менять картинку на новую?

Comments

[Dmitry Bay]

canvas

[Вадим]

Тут зависит от того, нужен ли Вам интерактив.
Вот статья с разбором подобной задачи.
А тут подробное видео

[Сергей delphinpro]

Что вам мешало залить картинку прямо в вопрос, используя специально имеющуюся для этих целей кнопку в редакторе вопроса?
Нахер нужен какой-то левый хостинг картинок с кучей рекламы?
Уважение есть к людям?

[Максим Иванов]

Сергей delphinpro,

Уважение есть к людям?

- Конечно есть! Просто скрин с картой не удавалось залить (красная ошибка вверху страницы при попытке), а вторую получалось. И я решил две залить на один сайт, нежели заливать один скрин сюда, а втором на имгур

[Сергей delphinpro]

Максим Иванов, ну залили бы на https://web.habrastorage.org/ru

[Сергей delphinpro]

я вот прошел по ссылке на имгур, подождал пять секунд, страница не прогрузилась и я закрыл вкладку.
А ведь потенциально мог посмотреть что там за картинка и возможно, что-то подсказать...

[Максим Иванов]

Сергей delphinpro, дак в том то и дело, что вы бы ничего и не глянули, потому что картинка просто не хотела заливаться сюда (без неё вы бы ничего не поняли)

[Максим Иванов]

Вадим, А как быть с адаптивом (если интерактив)?

А если всё же без интерактива? Просто возможно будут добавляться/убираться цвета. Не будет ли проще просто картинку влепить (если без интерактива)?

[devdb]

Там сделано так: фоновый рисунок города, а на него наложены полупрозрачные цветные регионы.

[RAX7]

Как сделать интерактивный генплан застройки,?

[Максим Иванов]

devdb, ОГО! Я бы не догадался...

[Максим Иванов]

RAX7, а если не нужен интерактив, а просто могут со временем удалять/добавлять некоторые участки (цветные квадраты), то не проще ли будет картинкой?

Answer 1

[StasEx]

Проще сделать все через position absolute.
Задать top и left лучше через проценты, а не через пиксели.
Так не будет ошибок при масштабировании.

Если хватит умений, то стоит написать функцию для определения процентной позиции курсора на карте. Это поможет расставлять новые точки при добавлении новых карт.