Приветствуем Вас, дорогие читатели, на страницах нашего блога RAIT.kz! Как мы неоднократно уже повторяли, в нашу профессиональную деятельность, помимо всякого рода визуализаций, также входит разработка сайтов. И вот недавно возникла задача сделать интерактивную кликабельную карту для одного портала региональных новостей. Что из этого получилось читайте под катом.Так как я дизайнер, то к разработке карты хотел привлечь своего друга программиста. Но просидев пару часов в Яндексе, я нашёл довольно простое и изящное решение этой проблемы, основанное на HTML-тэгах AREA, и совсем немного jQuery. Предлагаю вам более подробно ознакомиться с этим решением.

Итак, для изготовления карты нам понадобятся:
1) Собственно сама карта в формате JPEG. (Образец)
2) Программа MapEdit 4.05 (Скачать демо-версию).
3) Небольшой jQuery-плагин jquery.imagemapster (Скачать).

Сайт с картами на любой вкус

Пойдем по порядку. Очень хорошие и бесплатные карты можно скачать с сайта D-Maps.com, а затем обработать в своём любимом графическом редакторе. Очень большой плюс этого сайта в том, что карты там хранятся в различных форматах.

Разные форматы географических карт

Я использовал формат AI и свой любимый Adobe Illustrator, чтобы удалить лишние узлы и оптимизировать карту для дальнейшего использования.

Далее подготавливаем свой html-макет, оставляя атрибут coords пустым. В дальнейшем мы подставим туда свои координаты.

Код:

<img alt="map" src="/img/map.png" usemap="#myMap" width="690" height="381" />

<map id="myMap" name="myMap">
<area class="area09" title="Западно-Казахстанская обл." coords="" shape="poly" href="#" />
<area class="area06" title="Атырауская область" coords="" shape="poly" href="#" />
<area class="area13" title="Мангистауская область" coords="" shape="poly" href="#" />
<area class="area04" title="Актюбинская область" coords="" shape="poly" href="#" />
<area class="area12" title="Кызылординская область" coords="" shape="poly" href="#" />
<area class="area11" title="Костанайская область" coords="" shape="poly" href="#" />
<area class="area16" title="Южно-Казахстанская обл." coords="" shape="poly" href="#" />
<area class="area08" title="Жамбылская область" coords="" shape="poly" href="#" />
<area class="area05" title="Алматинская область" coords="" shape="poly" href="#" />
<area class="area10" title="Карагандинская область" coords="" shape="poly" href="#" />
<area class="area07" title="Восточно-Казахстанская обл." coords="" shape="poly" href="#" />
<area class="area14" title="Павлодарская область" coords="" shape="poly" href="#" />
<area class="area03" title="Акмолинская область" coords="" shape="poly" href="#" />
<area class="area15" title="Северо-Казахстанская обл." coords="" shape="poly" href="#" />
</map>

Открываем программу MapEdit. Вкратце расскажу как комфортно с ней работать. Загружаем свою карту — кнопка «Открыть/Open»(1). Обкликиваем карту в режиме «poly» — кнопка «Add Polygon»(3). Жмем кнопку «Сохранить/Save»(2).

MapEdit
И вуа-ля! У нас есть координаты. Так как версия программы устарела, то и генерируемый html-файл немного не соответствует современным тенденциям. Поэтому из этого файла берём только координаты и вставляем их в свой макет. Получается следующее.

Код:

<img alt="map" src="/img/map.png" usemap="#myMap" width="690" height="381" />

<map name="myMap" id="myMap">
<area title="Западно-Казахстанская обл." href="#" shape="poly" coords="9,142,16,131,19,131,22,125,20,120,24,107,33,104,33,100,38,96,47,115,58,110,58,95,61,96,70,92,74,85,88,84,97,74,103,77,103,81,111,84,115,80,121,79,125,87,130,87,135,89,140,92,140,95,154,107,155,118,145,142,132,143,130,150,123,154,118,152,109,165,100,163,100,159,94,155,66,165,57,163,55,166,16,149">
<area title="Атырауская область" href="#" shape="poly" coords="165,242,166,234,145,215,149,170,147,169,145,173,135,162,136,155,131,153,124,157,120,155,110,168,98,165,97,161,94,158,66,168,59,166,57,169,16,152,18,156,14,158,15,163,18,162,30,167,39,197,38,201,31,200,38,209,44,204,52,206,65,199,79,196,95,206,101,203,109,206,114,215,110,220,111,224,109,232,149,234,153,230,158,240">
<area title="Мангистауская область" href="#" shape="poly" coords="49,262,49,267,59,273,61,302,69,303,71,313,78,313,78,315,81,315,87,319,87,323,77,344,80,344,112,336,134,366,144,367,155,268,169,266,166,245,156,242,152,234,150,237,108,235,101,243,109,252,104,253,80,246,73,246,71,250,71,253,65,254,64,257,68,264,72,264,73,269,64,268,59,263,55,263,51,261">
<area title="Актюбинская область" href="#" shape="poly" coords="156,106,173,120,181,116,181,113,184,113,186,110,198,110,198,113,201,116,206,116,210,111,213,112,218,111,220,113,220,118,224,122,234,126,234,130,240,130,245,123,247,123,251,126,269,123,271,117,276,117,277,121,282,121,283,128,281,131,286,135,292,153,286,154,280,166,282,172,280,175,286,183,291,184,291,188,309,203,310,213,283,230,283,219,276,215,271,208,262,209,252,224,243,224,239,230,215,249,207,249,203,260,172,265,168,245,168,232,147,213,152,169,147,165,144,169,137,161,140,153,133,152,134,145,147,144,157,117">
<area title="Кызылординская область" href="#" shape="poly" coords="362,259,292,232,284,234,280,230,281,221,274,217,271,211,264,211,253,227,245,226,241,231,216,251,209,251,205,261,240,288,268,320,315,320,320,315,340,338,346,335,345,354,373,339,378,318,369,305,368,284,363,279,365,268,362,264">
<area title="Костанайская область" href="#" shape="poly" coords="340,130,339,104,349,89,352,79,348,70,350,68,342,27,339,23,334,26,334,33,323,31,316,33,314,38,309,34,302,36,300,38,293,38,291,43,289,39,285,39,284,41,273,37,270,39,272,42,267,47,271,49,276,47,277,51,274,53,271,54,271,56,285,61,285,65,267,66,262,73,266,82,249,90,251,94,254,95,255,99,262,101,263,104,273,110,271,114,277,115,278,118,285,119,285,130,283,130,288,133,293,151,295,154,292,157,288,156,282,166,285,171,284,174,283,175,287,180,294,183,294,187,309,201,319,189,321,189,324,182,327,183,335,186,372,150,372,145,379,142,378,137,367,142,363,136,353,135,345,127">
<area title="Южно-Казахстанская обл." href="#" shape="poly" coords="397,263,364,264,368,267,366,279,370,283,371,304,380,318,375,341,344,357,344,362,354,363,358,382,377,385,381,384,384,388,384,395,393,400,393,392,402,383,402,379,430,359,432,359,433,356,422,349,423,342,418,337,410,336,405,330,413,309">
<area title="Жамбылская область" href="#" shape="poly" coords="400,263,492,254,498,286,502,288,505,297,520,304,518,315,523,320,523,325,526,329,530,331,512,329,508,324,494,325,494,327,489,329,487,333,487,339,488,347,450,341,444,341,438,352,438,355,434,354,425,348,425,341,419,335,412,334,407,330,416,308">
<area title="Алматинская область" href="#" shape="poly" coords="494,253,518,230,554,229,553,217,556,217,560,214,563,215,566,212,587,221,591,221,600,215,622,220,626,219,626,222,642,240,644,240,645,242,649,243,649,246,644,246,640,249,634,245,601,265,603,268,613,268,612,272,623,304,625,306,626,309,619,312,622,317,616,319,619,335,597,323,532,327,530,329,525,324,525,318,520,314,523,302,507,295,504,285,499,283">
<area title="Карагандинская область" href="#" shape="poly" coords="287,230,312,215,311,203,320,191,322,191,325,185,335,188,374,151,375,146,382,142,382,136,380,136,380,134,389,132,393,144,404,143,413,144,413,150,416,153,436,133,441,140,448,141,454,131,458,131,462,125,467,125,467,122,473,118,466,114,472,114,477,118,477,125,475,133,478,135,488,132,488,136,494,133,496,135,497,141,495,144,497,146,515,138,518,139,521,136,526,136,526,129,530,124,533,127,539,127,539,130,541,133,534,141,534,149,527,152,526,157,532,164,531,168,534,171,539,172,541,175,539,180,534,182,534,187,540,190,540,193,543,193,540,197,542,209,538,215,542,221,544,221,550,218,551,227,516,227,492,252,397,261,365,262,364,257,292,230">
<area title="Восточно-Казахстанская обл." href="#" shape="poly" coords="543,133,536,142,536,151,529,154,529,157,534,164,533,167,535,169,542,170,543,176,542,181,536,183,536,185,542,188,543,191,547,191,547,194,543,198,544,210,540,215,544,219,549,215,555,215,560,211,562,212,566,209,589,219,600,213,622,218,628,215,628,221,643,237,647,191,679,191,682,194,692,185,687,150,700,142,701,130,699,128,708,123,694,112,695,109,693,108,691,111,690,118,672,120,663,108,650,106,641,94,628,92,627,96,622,96,623,98,601,104,600,100,593,100,593,94,591,94,590,92,587,92,587,95,584,96,585,100,585,103,580,110,563,88,560,96,556,97,555,103,549,106,561,125,560,132,555,136">
<area title="Павлодарская область" href="#" shape="poly" coords="562,87,536,59,505,28,512,22,510,20,506,23,504,22,504,25,492,32,492,35,486,39,482,39,479,44,479,49,474,48,473,45,466,46,464,52,464,64,470,61,468,68,474,73,473,79,474,103,478,104,480,106,474,113,480,117,479,122,480,125,478,131,478,132,490,129,490,132,495,130,498,135,498,138,500,140,498,143,514,135,517,137,518,134,524,134,524,128,530,121,534,124,541,124,541,129,543,131,554,134,558,131,559,126,546,105,553,101,555,95,559,93">
<area title="Акмолинская область" href="#" shape="poly" coords="471,80,455,73,454,69,447,69,444,72,439,70,432,60,420,59,416,63,404,53,389,61,393,68,390,72,391,77,379,86,379,91,377,93,373,93,368,88,368,92,364,95,350,92,341,105,342,127,345,125,354,133,365,134,368,139,377,136,378,133,390,129,395,142,406,141,415,142,415,148,416,150,438,128,438,133,443,139,447,139,452,130,456,129,461,123,465,123,465,120,469,119,463,112,465,110,468,112,472,112,477,106,472,105">
<area title="Северо-Казахстанская обл." href="#" shape="poly" coords="381,10,382,13,347,26,343,24,353,69,351,72,354,79,351,89,363,92,366,91,366,84,374,91,377,90,377,84,389,76,388,71,390,68,386,60,405,51,416,60,419,57,433,58,440,68,443,70,446,67,456,67,457,72,471,78,472,73,465,68,465,66,462,66,462,51,459,48,459,43,461,40,466,37,464,35,460,38,452,35,448,35,448,41,446,40,441,30,441,34,437,31,432,37,429,35,426,32,422,31,422,28,425,28,425,23,421,18,421,13,416,6,413,6,409,10,401,4,392,4>
</map>

Теперь осталось дело за малым.

Подключаем jQuery:

<script type="text/javascript" src="/js/jquery.min.js"></script>

… и плагин к нему:

<script type="text/javascript" src="/js/jquery.imagemapster.min.js"></script>

Настройки для плагина:
Код:

<script type="text/javascript">
$(document).ready(function($) {
$('#regionMap').mapster({
fillColor: 'E2EFF7',
fillOpacity: 0.5,
clickNavigate: true
});
});
</script>

Все! Наша карта готова!
Результат смотрим тут.

Не судите строго, я все же дизайнер, а не программист =) Так что, если у вас есть какие-нибудь идеи по этому поводу или вы знаете более оптимальный вариант решения данной задачи, пишите в комментариях. Надеемся эта статья будет полезной для вас.

Автор: Андрей Шаповалов
RAIT.kz — статьи о компьютерной графике