dle-modules / dle-yandexmaps Goto Github PK

ymaps.ready(allPlacemarks);

function allPlacemarks() {
	var myMap = new ymaps.Map('allPlacemarks', { // ID блока с картой
		center: [55.76, 37.64], // Москва
		zoom: 12,
		controls: ['zoomControl', 'fullscreenControl']
		},{
		suppressMapOpenBlock: true, 
		yandexMapDisablePoiInteractivity: true
	}),
	objectManager = new ymaps.ObjectManager({
		// Чтобы метки начали кластеризоваться, выставляем опцию.
		clusterize: true,
		// ObjectManager принимает те же опции, что и кластеризатор.
		gridSize: 32
	});
	
	//отключаем зум колёсиком мышки
	myMap.behaviors.disable('scrollZoom');
	
	//на мобильных устройствах... (проверяем по userAgent браузера)
	//if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)){
	//... отключаем перетаскивание карты
	//myMap.behaviors.disable('drag');
	//}
	
	// Задаём опции кластеров
	objectManager.clusters.options.set({
		// Установим дизайн метки по умолчанию:
		preset: 'islands#blueClusterIcons',
		// Установим балун кластера в виде карусели для удобства
		balloonContentLayout: 'cluster#balloonCarousel',
		// Устанавливаем максимальное количество элементов в нижней панели на одной странице
		clusterBalloonPagerSize: 5,
		// Устанавливаем режим открытия балуна. 
		// В данном примере балун никогда не будет открываться в режиме панели.
		clusterBalloonPanelMaxMapArea: 0,
		// Устанавливаем ширину макета контента балуна.
		balloonContentLayoutWidth: 400,
		// Устанавливаем высоту макета контента балуна.
		balloonContentLayoutHeight: 300
	});
	
	// Подрубаем монитор, 
	// будем отслеживать изменения в кластерах
	var activeObjectMonitor = new ymaps.Monitor(objectManager.clusters.state);
	
	// При клике на некластеризованные объекты получаем содержимое балуна
	objectManager.objects.events.add('click', function (e) {
		var objectId = e.get('objectId');
		setBalloonData(objectId);
	});
	
	// В кластеризованных объектах отслеживаем изменение выбранного объекта
	activeObjectMonitor.add('activeObject', function () {
		var objectId = activeObjectMonitor.get('activeObject').id;
		setBalloonData(objectId);
	});
	
	// Проверяем, есть ли у выбранного объекта содержимое балуна
	function hasBalloonData(objectId) {
		return objectManager.objects.getById(objectId).properties.balloonContent;
	}
	
	// Получаем данные и устанавливаем содержимое балуна
	function setBalloonData(objectId) {
		if (!hasBalloonData(objectId)) {
			getBalloonData(objectId).done(function (data) {
				var object = objectManager.objects.getById(objectId);
				object.properties.balloonContent = data;
				// Открываем балун на этом элементе
				var objectState = objectManager.getObjectState(objectId);
				if (objectState.isClustered) {
					// Если это кластер
					objectManager.clusters.balloon.open(objectState.cluster.id);
				}
				else {
					// Если обычный объект
					objectManager.objects.balloon.open(objectId);
				}
			});
		}
	}
	
	// Добавляем objectManager на карту
	myMap.geoObjects.add(objectManager);
	
	// Выполняем ajax-запрос к мини-модулю для вывода всех меток 
	$.ajax({
		url: dle_root + 'engine/ajax/controller.php',
		//url: dle_root + 'engine/ajax/ymaps/all.php',
		dataType: 'json',
		data: {
			mod: 'ymaps_all',
			// вместо allplacemarks можно прописать имя другого шаблона, содержащего в себе конфигурацию для вывода меток
			// сам шаблон с конфигом находится в папке ymaps/all
			preset: 'ajaxmap'
		},
	})
	.done(function (data) {
		// Если всё ок - добавим метки на карту
		objectManager.add(data);
		
		// "Отключим" прелодер.
		$('#allPlacemarks').removeClass('loader');
		
		
		// Выплюнем в консольку данные, пришедшие от модуля:
		// console.log(data);
		
		// Эти переменные нужны для дальнейшего показа количества видимых на карте меток.
		var singleCounter = 0,
        singleCounterHidden = 0,
        clusterCounter = 0;
		
		// Пример организации обхода массива видимых меток
		objectManager.objects.each(function (object) {
			// В данный момент нас интересует конкретный геообъект
			var objectState = objectManager.getObjectState(object.id);
			if (objectState.isClustered) {
				// Если метка геообъекта находится в составе кластера - прибавим счётчик.
				clusterCounter++;
			}
			else {
				// Если метка не в кластере прибавим другой счётчик.
				singleCounterHidden++;
				if (objectState.isShown) {
					// Если метка не в кластере и показана в области
					// видимости карты - прибавим другой счётчик и
					// убавим счётчик всех объектов. Таким образом счётчик будет
					// показывать только скрытые объекты
					singleCounter++;
					singleCounterHidden--;
				}
			}
		}, myMap);
		
		// Ну и теперь можно выплюнуть собранные счётчики в консоль:
		console.log('Количество показаных единичных меток: ' + singleCounter);
		console.log('Количество невидимых единичных меток: ' + singleCounterHidden);
		console.log('Количество показаных меток, составе кластера: ' + clusterCounter);
		
	})
	.fail(function () {
		console.log("error");
	});
	
	// Функция, осуществляющая запрос за данными балуна на сервер.
	function getBalloonData(objectId) {
		var dataDeferred = ymaps.vow.defer();
		
		// Для получения новости используется модуль {AJAX FULL-STORY}:
		// http://pafnuty.name/modules/156-ajax-full-story.html
		$.ajax({
			url: dle_root + 'engine/ajax/full-story.php',
			type: 'GET',
			dataType: 'html',
			data: {
				newsId: objectId, // Обязательная переменная
				template: 'ajax/baloon'
			},
		})
		.done(function (data) {
			dataDeferred.resolve(data);
		})
		.fail(function () {
			console.log("full-story error");
			dataDeferred.resolve('error');
		});
		
		return dataDeferred.promise();
	}
}