Кастомизируем Яндекс.Карту: собственные метки и элементы управления

Опубликовано 15.04.11 / Автор: Иван Саломатин

comments Комментариев 0

Несмотря на то, что по API Яндекс.Карт существует подробное руководство, без должного знания JavaScript и навыков программирования в нём разобраться довольно-таки непросто. Некоторым (и мне, в том числе) гораздо проще познавать науку на примерах и задачах, нежели «курить мануалы ©».

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

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

Я принял решение прибегнуть к инструментам, предоставленным API Яндекс.Карт. Что из этого вышло, вы можете наблюдать на странице «живого примера».

Live Example

Согласитесь, довольно-таки, удобно и симпатично. ;)

Ну, а теперь о том, как это создавалось...

1. Собственные метки на Яндекс.Карте

Перво-наперво, нам следует подключить карту и создать группы наших меток.

Подключаем API-ключ

Здесь я не буду подробно описывать процесс получения API-ключа Яндекс.Карт и подключение карт на сайте, поскольку об этом уже подробно рассказано мною в заметке «Яндекс.Карта на сайт: шаг за шагом». Если вам ещё ни разу не доводилось устанавливать Яндекс.Карту на своём сайте, добавлять стандартные элементы управления или определять координаты точки, просто обратитесь к тексту указанной заметки.

Создаём группы меток

Алгоритм создания меток прост и понятен: сперва напишем функцию, отвечающую за создание меток; затем создадим группы меток; ну и наконец, используя созданную функцию, поочерёдно добавим нужные нам метки в соответствующие группы.

Метки мы будем создавать с помощью следующей функции:

function createPlacemark (point, style, name, description) {
	var placemark = new YMaps.Placemark(point, {style: style, hasBalloon: !!description});
	placemark.name = name;
	placemark.description = description;
	return placemark;
}

Эта функция, получив в параметрах координаты гео-точки (point), наименование стиля метки (style), имя метки (name) и описание (description), создаст на карте в гео-точке с координатами point метку в стиле style с именем name и описанием description.

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

YMaps.Styles.add("marker1", {
	iconStyle : {
		href : "http://web-bricks.ru/ex/img/custom_ymap/marker1.png",
		size : new YMaps.Point(19,20),
		offset: new YMaps.Point(-7,-19)        
	}
});
YMaps.Styles.add("marker2", {
	iconStyle : {
		href : "http://web-bricks.ru/ex/img/custom_ymap/marker2.png",
		size : new YMaps.Point(19,20),
		offset: new YMaps.Point(-7,-19)        
	}
});

Ну вот, всё готово для формирования меток. В зависимости от стоящей перед вами задачи вы можете просто добавить метки на карту, передавая необходимые параметры функции createPlacemark, а можете объединить метки в группы, чтобы иметь возможность в дальнейшем работать сразу с группой меток, чего я и продемонстрирую далее. Кстати, группировать можно не только метки, но практически любые объекты Яндекс.Карт.

Для начала создадим саму группу:

var group1 = new YMaps.GeoObjectCollection();

Ну а теперь будем создавать метки, сразу же помещая их в группу:

group1.add(createPlacemark(new YMaps.GeoPoint(103.919547,52.541669), "marker1", "<big>Ангарск</big>", "Иркутская область"));
group1.add(createPlacemark(new YMaps.GeoPoint(131.928478,43.134091), "marker1", "<big>Владивосток</big>", "Приморский край"));
group1.add(createPlacemark(new YMaps.GeoPoint(49.122853,55.786764), "marker1", "<big>Казань</big>", "республика Татарстан"));
group1.add(createPlacemark(new YMaps.GeoPoint(50.064386,58.550454), "marker1", "<big>Кирово-Чепецк</big>", "Кировская область"));
group1.add(createPlacemark(new YMaps.GeoPoint(92.870412,56.008711), "marker1", "<big>Красноярск</big>", "Красноярский край"));
group1.add(createPlacemark(new YMaps.GeoPoint(39.597594,52.603587), "marker1", "<big>Липецк</big>", "Липецкая область"));
group1.add(createPlacemark(new YMaps.GeoPoint(32.888993,67.935121), "marker1", "<big>Мончегорск</big>", "Мурманская область"));
group1.add(createPlacemark(new YMaps.GeoPoint(37.609218,55.753559), "marker1", "<big>Москва</big>", "Город федератьного значения"));
group1.add(createPlacemark(new YMaps.GeoPoint(76.555839,60.948006), "marker1", "<big>Нижневартовск</big>", "Ханты-Мансийский автономный округ"));
group1.add(createPlacemark(new YMaps.GeoPoint(44.00189,56.324461), "marker1", "<big>Нижний Новгород</big>", "Нижегородская область"));
group1.add(createPlacemark(new YMaps.GeoPoint(82.919388,55.029838), "marker1", "<big>Новосибирск</big>", "Новосибирская область"));

Точно так же вы можете создать и другие группы меток/объектов.

Важно! В последнем параметре (description) вы можете передавать не только текст, но и любые HTML-элементы. Главное - не забывайте экранировать кавычки знаком «\» (пример предачи html-объектов в параметрах функции вы можете посмотреть в исходном тексте страницы примера).

Помещаем метки на карту

Когда наши метки созданы, должным образом оформлены и распиханы по группам, самое время поместить-таки их на карту. Для этого нам потребуется обработчик события window.onLoad, т.е. функция, инициируемая браузером при загрузке страницы:

YMaps.jQuery(function () {
	// Создаём экземпляр карты и привязываем к div#YaMaps-WB
	var map = new YMaps.Map(YMaps.jQuery("#YaMaps-WB")[0]);
	// Устанавливаем центр и масштаб карты
	map.setCenter(new YMaps.GeoPoint(77.190781,58.895308), 4, YMaps.MapType.MAP);
	// Добавляем стандартные элементы управления
	map.addControl(new YMaps.Zoom());
	map.addControl(new YMaps.ToolBar());
	map.addControl(new YMaps.TypeControl());
	// Помещаем наши группы меток на карту
	map.addOverlay(group1);		
	map.addOverlay(group2);
	// Подключаем наш пользовательский элемент управления, который создадим далее.
	// Если вы решили ограничиться только созданием меток, следующую строку можно удалить.
	map.addControl(new GeoExpand(group2));
});

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

2. Собственный элемент управления на Яндекс.Карте

Итак, что мы сделали к этому этапу: создали Яндекс.Карту, закрепили её за некоторым контейнером, создали группы стилизованных меток и разместили эти группы на карте. Уже неплохо! Теперь добавим нашей карте ещё немного интерактивности, создав на карте собственный элемент управления.

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

Внимательно рассмотрите следующий фрагмент кода и комментарии к нему:

function GeoExpand (regions) {
	// Добавляем элемент на карту
	this.onAddToMap = function (map, position) {
		// создаём контейнер, в котрый будем помещать содержимое
		this.container = YMaps.jQuery("<ul><li><img src=\"marker2.png\"> Плановое расширение географии поставок:<ul></ul></li></ul>")
		this.map = map;
		this.position = position || new YMaps.ControlPosition(YMaps.ControlPosition.TOP_RIGHT, new YMaps.Size(10, 10));
		// Выставление необходимых CSS-свойств для контейнера
		this.container.css({
			position: 'relative',
			float: 'right',
			width: '200px',
			zIndex: YMaps.ZIndex.CONTROL,
			background: '#fff',
			listStyle: 'none',
			padding: '10px',
			margin: 0,
			marginTop: "40px"
		});
		// Помещаем в контейнер список регионов, который создаст нам следующая функция
		this._generateList();
		// Применение позиции к управляющему элементу
		this.position.apply(this.container);
		// Добавляем контейнер на карту
		this.container.appendTo(this.map.getContainer());
	}
	// Формирование списка регионов
	this._generateList = function () {
		var _this = this;
		// Для каждого объекта вызываем функцию-обработчик
		regions.forEach(function (obj) {
			// Создаём ссылку на объект
			var li = YMaps.jQuery("<li class=\"links\"><a href=\"#\">" + obj.name + "</a></li>"),
			a = li.find("a");
			// Создаём обработчик щелчка по ссылке
			li.bind("click", function () {
				if (!_this.isFlying) {
					_this.isFlying = 1;
					_this.map.panTo(obj.getGeoPoint(), {
						flying: 1,
						callback: function () {
							obj.openBalloon();
							_this.isFlying = 0;
						}
					});
				}
				return false;
			});
			// при наступлении события показываем или прячем соответствующий балун
			// и меняем стиль ссылки
			YMaps.Events.observe(obj, obj.Events.BalloonOpen, function () {
				a.css("color", "red");
			});
			YMaps.Events.observe(obj, obj.Events.BalloonClose, function () {
				a.css("color", "blue");
			});
			// Добавление ссылки на объект в общий список
			li.appendTo(_this.container);
		});
	};
	// Игнорируем все клики по ссылкам, пока происходит перемещение карты
    this.isFlying = 0;
}

Как вы, наверняка, заметили, функция GeoExpand по-сути состоит из 2-х функций, первая из которых при наступлении события .onAddToMap формирует в области карты непосредственно контейнер нашего элемента управления, а вторая ищет на карте наши метки, создаёт ссылки на метки, добавляет ссылки внутрь контейнера и определяет поведение карты при кликах на этих ссылках.

Что же, на этом наш сценарий завершён. Осталось лишь собрать все фрагменты воедино и задать нужные нам css-стили. Этот этап, думаю, в разъяснениях не нуждается, поскольку вы всегда можете обратиться к исходному коду страницы «живого примера».

Live Example

Надеюсь, эта статья оказалась для вас полезной. Успехов вам в деле вебмастерском!