X

Интерактивная карта России (на Javascript и HTML)

Предыстория: Я столкнулся с тем, что в интернете нет внятной Интерактивной карты России. Что я подразумеваю под интерактивностью? Карту России, при наведении на регион мы видим подпись с названием региона, очертаниями границ региона а также возможностью кликнуть и перейти на описание региона на новой странице.

Все решения найденные в интернете основывались на Flash технологиях или технологиях замещения картинок Javascript методами. Минусы данных способов — очевидны. Flash технология не всегда позволяет оперативно обновить информацию на карте России (а если и позволяет, то достаточно сложна в реализации). Технология замещения картинок плоха тем, что при наведении курсора на регион, приходится подгружать изображение очертаний этого региона (эти изображения также придется отрисовать, что займет очень много времени).

Моё решение просто — использование одного изображения карты России, + Javascript реализующий обведение границ региона по AREA координатам изображения карты России. Главная сложность этого метода — это отрисовка координат границ регионов. На минуточку, количество регионов в России больше 80 :)

Смотреть пример

This post was last modified on 05.08.2016 10:41

Artem: Аудит, Разработка, ИБ, Поддержка и SEO сайтов

View Comments (11)

  • Как изменить внешний вид? Я хочу чтобы не было границы красной а было закрашен моим цветом весь регион на который навели курсор. А так классно)

    • попробуйте поискать в коде по названию цвета. быстро найдете ответ на свой вопрос ;-)

      • Добрый день. Хотел узнать. Нет ли возможности сделать по умолчанию, конкретную из областей активной, как будто мышка наведена. Хочу подсвечивать конкретную область когда открыта одна из них.

  • Огромное Вам за это спасибо, вы сэкономили мне море времени =)

  • А что сделать, чтобы когда кликаешь на определенный регион, переходил на определенный адрес?

    • Там просто всё: Надо лишь посмотреть исходный код. Там можно прописать ссылку, и при клике будет переход.

  • Добрый день, хотелось бы узнать возможно ли сжать карту?до ширины 650px.
    Заранее благодарен

    • Добрый день!

      Карту можно сжать, но в текущей реализации, надо будет переделывать координаты областей... А так, всё возможно, конечно-же :)

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

    • Татьяна, не много не понял вашего вопроса. Если вы хотите просмотреть код, можете открыть эту ссылку в браузере Гугл Хром: view-source:/pubs/rr/
      там вверху подключаемые скрипты

Related Post