Блог студии веб-дизайна «Make a Site» Дизайн, верстка, программирование, наполнение и раскрутка сайтов.

Интерактивная карта на HTML, CSS и JavaScript на примере Москвы

Очень часто на сайте может потребоваться интерактивная карта Москвы с районами и возможностью их выбора. Данная функция часто требуется для интернет-магазинов на странице «Доставка».

Интерактивная карта на HTML, CSS и JavaScript на примере Москвы
Содержание статьи

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

Несколько слов об интерактивной карте Москвы

Как уже было подмечено ранее, интерактивная карта Москвы незаменима для интернет-магазинов, где стоимость доставки меняется в зависимости от района, в который ее нужно осуществить. Можно конечно написать все районы Москвы в виде ненумерованного списка в алфавитном порядке и указать стоимость доставки для каждого, либо сделать таблицу (смысл тот же), но гораздо эффектней будет сделать это в виде интерактивной карты.

Что эта карта из себя представляет и как ее сделать? Мы сделаем карту в виде обычного изображения, вернее из нескольких изображений. При этом разные области (районы Москвы) этого изображения будут иметь собственные ссылки и собственные всплывающие подсказки. Выделить какую-либо область изображения нам поможет тег map и area. Такое изображение называется изображение-карта.

Мы сделаем несколько картинок, на каждой из которых подсвечен определенный район Москвы. Для каждого района мы выберем произвольный цвет. Также нам потребуется одно изображение, на котором не будет выделено ни одного района - оно будет отображаться по умолчанию. Суть данной карты заключается в том, что при наведении на размеченную область изображения, вместо чистой карты будет вставляться карта, на котором этот район подсвечен другим цветом, а также мы добавим всплывающую подсказку при помощи плагина tooltip.js.

Разметили области изображения мы с помощью программы geohtml, которая позволяет создавать изображения-карты с потрясающей легкостью. А формат изображения мы выбрали не jpg и не png, а gif! А почему именно gif? Да потому что этот формат больше всего подходит для монотонных изображений с небольшим количеством цветов, прямо как наши. Каждая картинка весит чуть меньше 40 килобайт, что просто прекрасно при размере 700*792, согласитесь.

Разработка интерактивной карты Москвы с районами

Итак, давайте перейдем непосредственно к делу. Сначала мы создадим 11 изображений, первое изображение - карта Москвы, на которой не подсвечен ни один район и еще 10 изображений, на каждом из которых подсвечен свой район. На данный момент в Москве всего 10 районов, поэтому карта актуальна. Добавится еще один район - добавим 12-ое изображение, когда это произойдет.

Скачать все необходимые изображения одним архивом вы можете тут.

А теперь приступим к разметке:

<div id="preload">
	<img src="./i/moscow-map-1.gif">
	<img src="./i/moscow-map-2.gif">
	<img src="./i/moscow-map-3.gif">
	<img src="./i/moscow-map-4.gif">
	<img src="./i/moscow-map-5.gif">
	<img src="./i/moscow-map-6.gif">
	<img src="./i/moscow-map-7.gif">
	<img src="./i/moscow-map-8.gif">
	<img src="./i/moscow-map-9.gif">
	<img src="./i/moscow-map-10.gif">
</div>
<div id="map-container">
	<img src="./i/moscow-map.gif" usemap="#moscowmap" id="map-img" width="700" height="792">
	<map name="moscowmap" id="moscowmap">
		<area shape="poly" href="#" title="ЮАО" i="1" coords="450,443, 454,482, 478,489, 491,500, 481,519, 457,537, 460,555, 494,571, 521,568, 551,557, 556,594, 485,656, 461,668, 400,663, 400,677, 390,660, 377,656, 383,622, 374,616, 382,599, 377,597, 391,581, 380,581, 383,571, 382,563, 403,567, 405,539, 403,519, 410,505, 403,504, 403,497, 385,468, 395,449, 408,453, 434,449, 438,442, 450,443, 450,443">
		<area shape="poly" href="#" title="ЮЗАО" i="2" coords="282,573, 337,522, 327,514, 366,468, 384,462, 403,502, 411,509, 404,520, 405,532, 409,537, 403,547, 400,566, 382,565, 381,579, 389,583, 378,598, 382,603, 374,617, 383,627, 379,655, 394,665, 402,681, 389,689, 382,737, 398,761, 392,775, 380,770, 375,766, 380,748, 369,745, 362,755, 364,766, 340,771, 349,752, 329,734, 306,730, 298,733, 296,717, 308,712, 314,715, 347,694, 357,697, 360,684, 359,671, 349,667, 347,658, 359,656, 355,645, 323,632, 309,610, 282,573, 282,573">
		<area shape="poly" href="#" title="ЗАО" i="3" coords="282,572, 338,521, 326,511, 364,469, 352,461, 350,451, 356,440, 374,427, 377,408, 368,404, 348,417, 336,416, 329,398, 317,389, 308,384, 298,387, 297,407, 289,419, 279,426, 263,415, 265,409, 279,404, 289,390, 276,371, 263,375, 242,372, 235,379, 205,379, 217,448, 234,480, 248,506, 244,514, 237,524, 248,532, 235,540, 221,533, 216,534, 217,541, 210,540, 209,529, 198,534, 178,557, 177,570, 189,580, 200,578, 213,592, 225,582, 226,588, 244,584, 249,559, 247,539, 264,542, 281,571, 282,572">
		<area shape="poly" href="#" title="ЗАО" i="3" coords="100,644, 111,621, 115,609, 111,606, 121,598, 126,606, 133,599, 150,603, 165,606, 161,619, 163,629, 111,654, 103,649, 97,649, 100,644">
		<area shape="poly" href="#" title="ЗАО" i="3" coords="59,619, 79,619, 92,614, 91,605, 81,597, 65,603, 60,617, 59,619">
		<area shape="poly" href="#" title="ЗАО" i="3" coords="164,383, 185,370, 196,354, 191,343, 198,341, 209,356, 192,383, 165,384, 164,383">
		<area shape="poly" href="#" title="СЗАО" i="4" coords="329,398, 335,393, 321,370, 320,348, 306,318, 308,306, 311,299, 308,298, 298,298, 298,296, 299,291, 279,241, 279,235, 266,223, 255,227, 241,220, 246,216, 239,206, 235,191, 226,188, 226,174, 221,172, 210,182, 207,189, 209,200, 217,202, 213,219, 240,236, 232,257, 217,259, 214,256, 220,248, 218,237, 203,239, 185,252, 185,265, 181,269, 195,275, 188,277, 191,295, 195,307, 205,304, 214,293, 231,295, 225,323, 214,351, 208,352, 209,378, 229,379, 238,379, 244,371, 261,373, 276,371, 287,388, 277,406, 266,411, 265,414, 275,425, 289,421, 296,413, 298,393, 298,386, 308,384, 329,398, 329,398">
		<area shape="poly" href="#" title="САО" i="5" coords="338,395, 350,380, 364,375, 385,370, 389,350, 386,343, 382,324, 384,322, 377,303, 379,285, 379,279, 378,264, 375,235, 372,218, 371,204, 361,195, 348,187, 346,182, 327,190, 310,206, 291,216, 277,217, 270,216, 265,224, 280,237, 283,256, 300,291, 296,299, 311,300, 305,315, 321,353, 323,370, 335,396, 338,395">
		<area shape="poly" href="#" title="САО" i="5" coords="212,179, 220,173, 226,175, 235,168, 230,162, 234,147, 243,150, 244,146, 239,137, 243,128, 253,127, 251,117, 245,114, 239,117, 230,120, 229,117, 220,115, 220,117, 215,114, 213,111, 202,110, 199,117, 192,115, 189,110, 184,117, 198,136, 196,138, 191,135, 179,143, 193,161, 195,153, 201,148, 218,163, 207,171, 211,179, 220,173, 212,179">
		<area shape="poly" href="#" title="САО" i="5" coords="218,100, 214,90, 226,80, 249,74, 273,75, 276,85, 260,98, 243,99, 239,95, 223,98, 218,100">
		<area shape="poly" href="#" title="СВАО" i="6" coords="388,347, 382,320, 377,303, 379,283, 378,270, 377,241, 373,223, 370,201, 349,188, 338,151, 332,129, 351,126, 347,117, 358,111, 367,120, 364,179, 387,176, 419,191, 454,199, 459,195, 465,200, 474,199, 475,195, 508,223, 505,229, 496,234, 481,248, 498,249, 496,261, 493,271, 477,268, 470,266, 454,285, 456,300, 443,332, 439,351, 427,342, 426,348, 412,349, 410,361, 400,358, 397,347, 391,347, 388,347">
		<area shape="poly" href="#" title="ВАО" i="7" coords="439,352, 439,339, 457,299, 457,282, 473,264, 472,256, 478,270, 493,268, 498,259, 495,248, 484,248, 498,230, 507,229, 509,224, 585,292, 591,300, 596,314, 599,316, 619,305, 621,300, 625,307, 642,311, 642,317, 636,317, 630,312, 623,327, 611,326, 607,328, 599,319, 594,325, 597,367, 600,370, 598,376, 597,412, 603,417, 619,413, 636,406, 637,422, 627,419, 619,427, 612,438, 612,446, 628,453, 634,449, 645,447, 660,442, 668,440, 680,447, 680,455, 675,460, 668,459, 665,467, 656,472, 632,477, 620,490, 592,467, 530,428, 521,427, 510,416, 495,405, 495,396, 497,385, 485,365, 442,355, 439,352">
		<area shape="poly" href="#" title="ЮВАО" i="8" coords="556,592, 552,571, 549,555, 537,559, 517,570, 490,570, 465,557, 456,547, 462,526, 491,512, 490,498, 482,490, 454,481, 449,437, 454,437, 457,445, 470,438, 476,439, 481,428, 473,418, 457,408, 457,396, 468,396, 475,381, 480,385, 491,374, 498,387, 496,404, 520,426, 532,429, 616,485, 615,497, 610,517, 588,503, 597,542, 558,594, 556,592">
		<area shape="poly" href="#" title="ЦАО" i="9" coords="365,467, 380,463, 386,467, 394,452, 402,452, 430,450, 435,446, 438,440, 451,444, 453,435, 456,446, 469,439, 475,440, 481,428, 472,414, 456,408, 456,396, 468,397, 474,381, 477,385, 492,374, 487,363, 471,364, 450,355, 438,352, 427,340, 426,346, 411,348, 409,361, 400,358, 397,346, 389,350, 384,367, 377,374, 352,378, 339,394, 334,395, 330,400, 337,417, 350,417, 368,405, 378,406, 377,419, 363,437, 350,447, 350,459, 360,466, 365,467">
		<area shape="poly" href="#" title="Зеленоград" i="10" coords="17,24, 33,53, 27,61, 29,84, 31,101, 54,108, 73,116, 76,122, 88,122, 90,109, 80,107, 75,100, 83,81, 95,75, 109,81, 120,96, 127,95, 125,65, 120,58, 113,48, 98,40, 78,22, 64,14, 53,25, 43,26, 35,19, 28,21, 20,21, 17,24">
	</map>
</div>

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

В данном примере мы сначала загружаем все наши карты в невидимый слой с нулевой высотой и шириной. Это мы делаем для того, чтобы при быстром наведении на разные районы, необходимые изображения уже были подгружены и менялись моментально без всяких задержек, даже при медленном интернете.

Теперь давайте перейдем к скрипту:

$(document).ready(function() {
	$("#moscowmap area").hover(
		function () {
			$('#map-img').attr('src', './i/moscow-map-' + $(this).attr('i') + '.gif');
		},
		function () {
			$('#map-img').attr('src', './i/moscow-map.gif');
		}
	);
	
	simple_tooltip('area', 'tooltip');
});

Как видите, скрипт подмены изображений при наведении до неприличия прост 🙂 А еще мы добавили плагин tooltip, как уже упоминали выше и активировали его при загрузке DOM-а, как видно в коде выше.

Теперь нам осталось только добавить некоторые стили и карта заработает:

#map-container {
	width: 700px;
	height: 792px;
	background: url(../i/moscow-map.gif) 0 0 no-repeat;
}
#preload {
	width: 0;
	height: 0;
	overflow: hidden;
}
.tooltip {
	position: absolute;
	left: -2000px;
	background: #000;
	padding: 0 5px 0 5px;
	border: #fff 3px solid;
	border-radius: 10px;
	width: 85px;
	height: 25px;
	line-height: 25px;
	text-align: center;
	color: #fff;
	font-weight: 900;
	font-family: Arial;
	font-size: 13px;
}
.tooltip  p {
	margin: 0;
	padding: 0;
}

Все чрезвычайно просто, но в то же время эффектно и очень удобно. При клике на каждый район открывается своя ссылка (в данном примере их нет за ненадобностью), всплывает своя подсказка с названием района, также могут вызываться различные действия, при которых меняется общая сумма заказа и стоимость доставки - так называемый калькулятор доставки.

А вот и демонстрация интерактивной карты Москвы с активными районами:

открыть в новой вкладке

П.С. Чуть не забыли одну вещь, вот еще ссылка на файл tooltip.js на всякий случай 🙂



Предыдущая статья:
Посчитать количество символов в тексте онлайн

Читайте также:
Ускорение индексации сайта на WordPress. Пинг сервера и службы слежения за обновлениями

Возможно, вам это интересно:



Блог студии веб-дизайна «Make a Site».
Дизайн, верстка, программирование, наполнение и раскрутка сайтов.

Текущий проект: «Stream Booster» — раскрутка Twitch и YouTube каналов

Студия веб-дизайна «Make a site»