Как выделить разным цветом элементы интерактивной карты?

Question

[Антон Егорычев]

Всем привет!
Нужно сделать интерактивную карту для сайта.
На карте Россия разделенная по федеральным округам и несколько стран СНГ.
Проект на Github - https://github.com/gore88/sng_map
Помогите сделать резные округа и страны различными цветами. Российские округа должны быть серыми все кроме приволжского округа, его нужно сделать красным. Страны СНГ должны быть разными цветами.
Реализовано на библиотеке Raphaël, при помощи SVG файла.
Демо - sngmap.ucoz.net/index.html

Answer 1

[Константин Китманов]

Можно взять leaflet и нагуглить очертания стран и округов в GeoJSON, тогда можно будет красить что угодно как угодно, и оно еще будет интерактивное, с зумом и блекджеком.

Вариант попроще — нагуглить те же очертания в SVG, ну и старый добрый :hover в стилях.

Comments

[Антон Егорычев]

Очертания как раз в SVG. Я нарисовал в векторе, сохранил в SVG, готовой подходящей карты в инете не нашёл. Вот что получилось - sngmap.ucoz.net/index.html

[Константин Китманов]

Антон Егорычев: а в чем тогда вопрос?

[Антон Егорычев]

Константин Китманов: в том, чтобы сделать разные округа разным цветом.

[Константин Китманов]

Антон Егорычев: ну, находите нужный path в SVG-шке, меняете ему атрибут fill…

[Антон Егорычев]

Константин Китманов: я не силён в JS, а координаты path взяты из SVG и находятся в JS файле, а правила для всех элементов в другом JS файле. Вот в чём для меня проблема.

[Константин Китманов]

Антон Егорычев: послал пулл-реквест.

[Антон Егорычев]

Константин Китманов: благодарю. что-то не работает...

[Константин Китманов]

Антон Егорычев: да, я не проверял. А в консоли есть ошибки?

[Антон Егорычев]

Константин Китманов: если добавить атрибут с заливкой, то в браузере не отображается карта, если смотреть код, то там пусто на том месте, где должна быть карта.

[Антон Егорычев]

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