Как вывести все метки на карту с подгрузкой новостей в балуны меток и кластеров

ajaxmap.html

<!-- Этот код можно поместить в шаблон статическй страницы -->
<style>
	#allPlacemarks.loading {position: relative;}
	#allPlacemarks.loading:after {
		content: " ";
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 150;
		background: rgba(255,255,255,.8) url('data:image/GIF;base64,R0lGODlhFAAUAPQSAOzu7Pz6/PT29Nza3PTy9OTm5Pz+/Ozq7MTGxKyqrMTCxOTi5Nze3MzKzLy+vLSytNTS1NTW1Ly6vMzOzLS2tKyurJSSlJyenJSWlJyanKSipKSmpP///wAAAAAAAAAAACH/C05FVFNDQVBFMi4wAwEAAAAh+QQJBQASACwAAAAAFAAUAAAFZaAkisL4KGOqSssTiI+zzsEDwfK8MkkZ6yLAS2JwICQnoAGiWBgkh8ThpywgGgdJBHAAAEeBgSLy/K4EBbPoUGCzh+a2/ABXg+tqg4AgKJsNAXwBfl96fIRqgyKIdiOMjZCRkikhACH5BAkFAAkALAAAAAAQABAAAAVcYCKKwahMYyoWTZmc5HOkBsKIcDJhgnooPZgAAxEJXIZJ5IVybFwLBsCQIDgIp4NlMTIABgtCYgEAECYUVSJQGBSoXTUJIDcGjkeXHI+H1/9/fn5qg4OBgHGICSEAIfkECQUADgAsAQAAABIACwAABVigIzrBCA1jmhKMIZ6ioQCqYzDHizpRVdaEQQkmqOxEAZdtUXDAGhQloSAgCFyCgeAESDQDCIvEELCWDoL0AGGIZC4DpaF6TQUSmMbPvjcRaiNKgIOCgw4hACH5BAkFABEALAEAAAATAAsAAAVTYCRGxrgcY6oGRBkVKAkRqmgQgnjqSlCLrNJOgFjUXAZBbjdouAiAVIkVgAEU0QAkgSCpBAFwAWJgPB4Ml9cmlSTIvzgjF48fJHi8oz4q5CUPDiEAIfkECQUADgAsBAAAABAAEAAABVigYzikIJBoSo4OcYrLu6YmCTCBmrpOMBA6lqN2YLAEQJXLBwwwFJFgALAwFBqIgzA4URh1ukIOrANgzw2yw4xAqyFJ9SphQYzlhsjlMtiSAwgWEnI7BQ4hACH5BAkFAAgALAsAAQAJABIAAAVTIIIYQiCeSEAY6EgILSIIbAqrpnEMhW0QDMZKZFgMDrUTABYjRAbPp8gJfQ5EwljAkYCYRJBH8fFgsA4WhgySaIgcmprgIBJgIDHEBPNFGR50JyEAIfkECQUACwAsCQABAAsAEwAABVTgIi7GaJ7lqa6kaATrSwhoQMypewu5GfQnwaEwHJqExKSpQFsFJgoGTHQADBCGAwJxKD0UgERhEWAoIovvYkJJBQBpxUJQGZzUi0hlKsIbwCZ4KyEAIfkECQUADgAsBAAFABAADwAABVigI46kY5SoeI5r2rZpLDtBINi2jN+CIAOBGMywGBxgpgQDQFhEDAQGg9CKYAiKCRZAOwwKogCm4cg6Bo1VrnwJmgOKRQlgGYjMjgUiOFpQVngGEAQyeCkhACH5BAkFAAcALAAABgATAA4AAAVd4CGO5GiQZ6mubOu+MAwMqpCWgmNR92EQBJsJgtEwAo5FELAwBIABgyGBmQQOjIQAMggMCD5B8FAQiAIVGpfcFDlLk8d1bRgAWITEQhShHQBHKwUIKWs+C2YvhiohACH5BAkFAAwALAAACQATAAsAAAVUoCRRIkUwaKqi5Ciea7wCi2wHU4IYKo/6DMOgQingDgFBgAAMGhyVQYBRQAQWSMK0eRCgAojaosAQCJqrQWNaOAS1NoGCTHWXmTJAxNf+KW0qWDYhACH5BAkFAAkALAAABAATABAAAAVhYLIISWmeaGJU2BSkcGlA2cXEsaBYlIHDgMGv1EAUi6ShcdlIDk+Ew9MUGCgiPlMWZVggEIAuwfBSnQwzRcEXDAicKUA5wAAkCM5t6sDw4c04AgMEJW9nMAJrJX+AT4YwIQAh+QQFBQAKACwAAAAADgATAAAFX6AiisJontEVnGyQISw7WER8lIqRUKzhVBGD4mBZ9AYVirFxiCkCkwRC6BQRjKzIQBuJrLLbMK76BJADhUGBejIAGAuCQfAVGQwLxkEYkLPodgRjTgJ+VQYEdU4BgyYhADs=') no-repeat 50% 50%;
	}
</style>
<script src="//api-maps.yandex.ru/2.1/?lang=ru_RU"></script>
<script>
	ymaps.ready(allPlacemarks);

	function allPlacemarks() {
		var myMap = new ymaps.Map('allPlacemarks', { // ID блока с картой
				center: [25.0088, 54.9854], // координаты центра карты
				zoom: 12 // зум карты
			}),
			objectManager = new ymaps.ObjectManager({
				// Чтобы метки начали кластеризоваться, выставляем опцию.
				clusterize: true,
				// ObjectManager принимает те же опции, что и кластеризатор.
				gridSize: 32
			});

		// Задаём опции кластеров
		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/ymaps/all.php',
				dataType: 'json',
				data: {
					preset: 'ajaxmap'
				}, // вместо ajaxmap можно прописать имя другого шаблона, содержащего в себе конфигурацию для вывода меток
			})
			.done(function (data) {
				// Если всё ок - добавим метки на карту
				objectManager.add(data);

				// "Отключим" прелодер.
				$('#allPlacemarks').removeClass('loading');
			})
			.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();
		}
	}
</script>
<div style="padding: 0 20px;">
	<p>Пример вывода всех меток на карте с подгрузкой полной новости в балуны меток и кластеров.</p>
	<p>Для загрузки контента в балуны используется модуль <a href="http://pafnuty.name/modules/156-ajax-full-story.html" target="_blank">{AJAX FULL-STORY}</a></p>
</div>
<div id="allPlacemarks" class="loading" style="height: 600px; margin-bottom: 20px;"></div>

ajaxmap.tpl

// Настройки для показа всех меток 
// Положить этот файл в папку {THEME}/ymaps/all/
startFrom  = 0
limit      = 1500

baloon.tpl

<!-- Положить этот файл в папку {THEME}/ajax/ -->
<a href="{full-link}">{title}</a> <br>
[fullimage-1]
<img src="{fullimage-1}" alt="{title}">
[/fullimage-1]
<p>{full-story limit="250"}</p>