КОНЬЯКОВ.ру

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

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

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

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

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

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

Демонстрация Интерактивной карты России (javascript+html)

Предыдущая

Сегодня 11 11.11.2011 в 11 часов 11 минут в 11 секунд будет много единиц…

Следующая

Хронология Российской истории

11 Comments

  1. Антон

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

  2. Юрий

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

  3. admin

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

  4. admin

    Всегда рад :-)

  5. Тимур

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

  6. admin

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

  7. Роман

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

  8. admin

    Добрый день!

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

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

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

  11. admin

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

© 2007–2017, konyakov.ru