Необходимо нарисовать векторную карту метро Санк-Петербурга. Она будет использоваться на сайте по недвижимости для выбора квартир по метро. На выходе нужен SVG-файл. Функционал такой:
- при клике на название станции – происходит выделение станции
- при клике на название линии – выделяются все станции на линии
Функционал реализуем на js, нужно чтобы карта была готова к такой реализации.
Не нужно придумывать ничего принципиально нового, стилизация под московскую карту от Артемия Лебедева вполне устроит. Главное чтобы было удобно пользоваться. Но и упирать один-в-один тоже не надо.
Карта хорошо сделана на
. Она компактная и удобная. Можно использовать примерно те же контуры и пропорции, что и здесь. Но разумеется чтобы не было впечатления, что карта слизана оттуда.
- должна нормально читаться и без труда нажиматься в разрешении 750x520px.
- должна нормально и одинаково отображаться во всех современных браузерах, не должно быть проблем с элементами и со шрифтами.
- карта интерактивная, соответственно в структуре SVG не должно быть каши. Мне нужно будет без сложностей обращаться к её элементам через JavaScript. В идеале – проставить например в элементах станций параметр к какой линии она принадлежит.
- наличие Невы на карте – на ваше усмотрение. Прежде всего читаемость и удобство.
Карту необходимо сделать в двух вариантах:
1. Только с существующими на 2016 год станциями.
2. С планом до 2020 года. См. станции на spbrealty.ru + Новокрестовская и Беговая на севере третьей линии (за Приморской).
У внешнего вида станции может быть несколько вариантов:
- при наведении на неё мышки
- в выбранном виде (после клика на неё)
- неактивная (на данной станции нет ни одного предложения)
Карта будет встраиваться в дизайн как на последнем вложении (png; 145.29 Кб). Другие вложения – примеры реализации аналогичного функционала на разных сайтах.
--------
(рассматривается и HTML-реализация, но приоритет – SVG)