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

Question

[beefront17]

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

Буду благодарен за любию советы на эту тему )

Answer 1

[Родион Мещеряков]

Решал некоторое время назад похожую задачу и использовал вот такую библиотеку https://www.react-simple-maps.io/
Там и карта простая, и маркеры можно кастомные выводить, и географию до границ США ограничить

Comments

[beefront17]

А там можно загрузить свою карту? например мне нужна карта США со всеми ее териториями

[Родион Мещеряков]

Не в курсе. Мне для проекта подошла карта по умолчанию

Answer 2

[Maxim Nepritimov]

Как вариант, можно взять svg-карту США отсюда (там разного уровня детализации карты)
Далее, разбить ее на части в виде стейтлесс компонентов.
И уже по клику или как-нибудь как надо отображать элементы на этих областях.
В приведенном вами примере, кружки отображаются посередине зоны. Высчитать их позицию не так уж и сложно.
Поковыряйтесь в документации SVG, там все есть)
P.S. Для отображения кружков советую использовать тег g, внутри него уже path
P.P.S. Карта Казахстана (в каком-то старом проекте разрабатывал)

Comments

[beefront17]

Спасибо за ответ!
Если писать свою карту, возможно будет выводить кружки по lat long?

[Maxim Nepritimov]

beefront17,

возможно будет выводить кружки по lat long?

все зависит от вашей реализации
Если вы напишите функцию-конвертер, то да.

Answer 3

[Александр]

на svg надо написать элептический конвертер координат. Я бы взял библиотеку https://leafletjs.com/ - самое простое из бесплатного.

Comments

[beefront17]

мне не нужна вся карта, зум і тд, только контури как здесь и добавить элементы.

[Александр]

может эта либа поможет https://www.vincentbroute.fr/mapael/#overview

[beefront17]

Александр, jQuery?)
Просто проект на react-е, но вообще либа не плохая...

[Maxim Nepritimov]

Извините, Александр, но как это?

на svg надо написать элептический конвертер координат.

Точно ли на SVG?)

Да и зачем целый leafletjs тянуть, когда svg-карта и код для работы с ней будут в разы легче.
Ну и да, предложение jQuery-библиотеки для реакт-приложения... вы знаете толк в извращениях))

Answer 4

[anjiJa]

Вот это:
https://foobaa-e6a06.firebaseapp.com/maps
я реализовал с помощью
https://mapbox.com/