Каким образом можно сделать адаптивную интерактивную карту с точками?

Question

[William]

например, имеется карта - изображение (width: 100%; height: auto), поверх нее установлены точки, через position absolute, как правильно реализовать подобное, чтобы при уменьшении экрана, точки оставались на привязанных местах относительно самого изображения.

при уменьшении экрана:

Comments

[Дмитрий Баскаков]

Можно зафиксровать размер карты, или же использовать svg

Answer 1

[godsplan]

Скачать карту с mapsvg.com (Не помню есть ли там разбивка по странам) и уже привязываться к стране/региону , там уже все проставлено

Answer 2

[Даниил]

Попросить дизайнера/того кто делал макет, вынести карту в изображение. Мне кажется не плохой вариант.
Либо искать какой-то сервис, который предоставляет API с картами, таких много, но мне кажется, будет трудно найти именную синюю карту и именно с такими поинтами

Answer 3

[Irkov]

Карту делать отдельной картинкой. На ней располагать точки с помощью абсолютного позиционирования с координатами в процентах. Только при уменьшении экрана иконки точек тоже должны уменьшатся пропорционально уменьшению карты, иначе они повылезают за рисунок карты.

Comments

[William]

при уменьшении экрана и картинки следом за экраном, отметки не пропорционально сдвигаются, сильно смещаются , относительно первостепенного положения. если указывать процентное значение left, top

скорее всего нужно применять математическое вычисление в CSS calc()