Как реализована интерактивная карта на JS?

Question

[animr]

Можете подсказать как реализована интерактивная карта с помощью JS
https://zakupki.gov.ru/epz/main/public/home.html

Answer 1

[approximate solution]

https://dev.to/lucafaggianelli/interactive-svg-js-...

Answer 2

[Много Чего]

Вообще изначально эту карту рисовали, в ручную
Сам исходник : https://mapsvg.com/maps/russia
Если требуется что то вывести при наведении то уже javascript + json

Comments

[Фёдор]

Приветствую! Я буду премного благодарен Вам за ответ. Хочу вот что спросить по теме данного вопроса. Допустим, у меня есть SVG-картинка с картой мира и есть API с определённым данными, которые я хочу вывести на карту. Получается, надо распарсить JSON. Потом через JS написать некоторый код, когда я навожу на страну, то покажи мне данные. Да?

Но, а если мне надо, чтобы была возможность зумировать карту, то мне надо использовать ещё одно API сервиса, которые предоставляет карту мира?! К примеру API mapbox или google maps?! Cтоит ли сюда ещё добавить API которая присылает JSON с координатами стран?

Идея у меня такая. Есть блок, в который выводится данные из API(1). Во-второй блок выводится по API(2) карта. Чтобы вручную не прописывать все 193 страны и данные из API(1), хочу через API(3) брать данные геолокацию страны (по названию), сравнивать данные из API(1) (есть ли такая страна) и если есть, то вывести данные на карту.

Подскажите, насколько правильный такой подход или я же сам всё усложняю?

[Много Чего]

Фёдор, там не надо в ручную - получается так

навели на path и вывели инфу из json и всё
про сложность то не очень сложно хотя по материться придётся
про скалирование то то это уже wheel но кроссбраузерно
как сделать на мобильниках это кроссбраузерно не знаю

[Фёдор]

Много Чего, простите за глупый вопрос. Что есть в данном случае path?

[Много Чего]

Фёдор, path это залитый цветом контур - в данном случае это области - ну там к примеру камчатский край краснодарский и т д

[Много Чего]

Фёдор, https://codepen.io/topicstarter/pen/PobbbZN - вот смотри, я чуть чуть для примера взял title из svg и вывел в подвижный блок

[Фёдор]

Много Чего, Спасибо! Теперь я более менее понял от чего отталкиваться и как делать.

Answer 3

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

Это коммерческое решение
fla-shop.com.ru/products/html5/ru-locator-map
Хороший код, и минимум гемороя стоит 2000 рублей

Вот например как встраивается, единственно привязка к домену
https://gulagu.net/

Answer 4

[Максим Сохряков]

Когда работал с чем-то похожим, использовал JS библиотеку: mapplic.
Но в зависимостях имеет jQuery. И платная.