Как реализовать карту?

Добрый день! Подскажите пожалуйста как лучше реализовать карту?
Нужно нарисовать карту США и через lat, long вывести определенные объекты на нее, типа так здесь
только нужно взять что-то легче и бесплатное.
Проект на react.
Вопрос если есть svg карта как добавить эти элементы?

Буду благодарен за любию советы на эту тему )
  • Вопрос задан
  • 503 просмотра
Решения вопроса 2
Решал некоторое время назад похожую задачу и использовал вот такую библиотеку https://www.react-simple-maps.io/
Там и карта простая, и маркеры можно кастомные выводить, и географию до границ США ограничить
Ответ написан
nepritimov_m
@nepritimov_m
Frontend dev.
Как вариант, можно взять svg-карту США отсюда (там разного уровня детализации карты)
Далее, разбить ее на части в виде стейтлесс компонентов.
И уже по клику или как-нибудь как надо отображать элементы на этих областях.
В приведенном вами примере, кружки отображаются посередине зоны. Высчитать их позицию не так уж и сложно.
Поковыряйтесь в документации SVG, там все есть)
P.S. Для отображения кружков советую использовать тег g, внутри него уже path
P.P.S. Карта Казахстана (в каком-то старом проекте разрабатывал)
Ответ написан
Пригласить эксперта
Ответы на вопрос 2
NeiroNx
@NeiroNx
Программист
на svg надо написать элептический конвертер координат. Я бы взял библиотеку https://leafletjs.com/ - самое простое из бесплатного.
Ответ написан
@anjiJa
Вот это:
https://foobaa-e6a06.firebaseapp.com/maps
я реализовал с помощью
https://mapbox.com/
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы