Envek Sep 8 2011 at 11:55

HTML и SVG: создаём интерактивную карту

8 min

233K

Website development*JavaScript*

Tutorial

+76

Comments 19

Antiarchitect Sep 8 2011 at 12:16

Спасибо за подробную статью — теперь хоть буду знать в подробностях как у нас карта сделана!
Со своей стороны могу сказать, что карта Амурской области, сделанная по этому же принципу этим же хабраюзером используется сейчас в ИС для внутреннего пользования (написанной на Rails) в правительстве Амурской области.

Zibx Sep 8 2011 at 12:22

Когда однажды делал карту — использовал две какую-то крайне глючную софтину. Сначала автоселектом выделял область в фотошопе, потом написал макрос для него, который экспортил что вышло в набор точек и делал из этого свг. А потом той софтиной, проклиная всё удалял лишние и выставлял нужные грамотно.

Envek Sep 8 2011 at 12:26

Я просто взял растровую карту и Inkscape и аккуратно обвёл границы «карандашиком», потом «упрощением» удалил большинство лишних точек и слегка подкорректировал вручную. И постоянно сверялся с встроенным в Inkscape XML-редактором, как получается.

Envek Sep 8 2011 at 12:23

Ну если уж раскрывать все карты, то стоит сказать, что сама карта находится в открытом доступе (opensource де-факто) и любая критика, советы, исправления и улучшения в её адрес также приветствуются.

Antiarchitect Sep 8 2011 at 12:36

Кстати у меня появилось предложение! Если здесь найдутся энтузиасты, готовые поработать над созданием svg карт своих регионов — стоит слать pull реквесты в этот репозитарий.

Antiarchitect Sep 8 2011 at 12:40

Или можно отдельный организовать — чтобы был полноценный сборник. Насколько я знаю svg карт сейчас днем с огнем не сыскать.

AngelOfAncient Nov 16 2017 at 03:37

Удалось ли организовать искомое? :)

Envek Nov 18 2017 at 18:56

Я думаю, сейчас гораздо проще выдернуть данные по координатам границ из данных OpenStreetMap и сгенерировать SVG-шки по ним.

Envek Sep 8 2011 at 12:41

Вообще-то репозиторий назван как AmurMap и складировать туда я планировал только карты родной области… по мере необходимости их создания )

xel Sep 8 2011 at 12:21

для тех кто хочет векторную карту, поддерживаемую в большинстве браузеров (jquery + flash) — jVectorMap ( jvectormap.owl-hollow.net )
как выглядит, можно увидеть, например тут — www.mediaport.ua/articles/78094/seti_nashego_vremeni

-1