+7 917 640-19-85

Вывод объектов из JSON файла на Яндекс карту

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

Напишите нам, мы онлайнОтветим в течении 5 минут

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


Разметка файлов

Нам пригодится: API карт, jquery, понимание строения json объектов

Для начала давайте сделаем разметку HTML документа с картой


<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<link rel="stylesheet" href="style.css">
	<title>MAP</title>
	<script type="text/javascript" src="https://api-maps.yandex.ru/2.1/?load=package.full&lang=ru-RU"></script>
</head>
<body>
	<div class="container">
		<div class="objects">
			<ul>
				<li><a href="#" data-filter="shop">Магазины</a></li>
				<li><a href="#" data-filter="punkt">Пункты выдачи товара</a></li>
			</ul>
		</div>
		<div class="map-container">
			<div id="map"></div>
		</div>
	</div>
	<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
	<script type="text/javascript" src="script.js"></script>
</body>
</html>

Мы так же реализуем возможность фильтрации меток на карте. В нашем случае у нас будут магазины, и пункты выдачи.

Далее создадим файл style.css для стилизации


{
    margin: 0;
    padding: 0;
}

#map {
    width: 100%;
    height: 480px;
}

.container {
    display: grid;
    grid-template-columns: 350px 1fr;
}

.objects {
    background: #f3f3f3;
}

.objects ul {
    list-style: none;
    padding-left: 0;
}

.objects ul li a {
    display: block;
    padding: 15px;
    color: #4e4e4e;
    font-size: 16px;
    text-transform: uppercase;
    text-decoration: none;
}

.objects ul li a.active {
    background: #281b70;
    color: #fff;
}

Затем создаем основной JS скрипт, который инициализирует нам карту на странице с нужными параметрами


ymaps.ready(init);
function init() {
	var myMap = new ymaps.Map('map', {
		center: [48.707067, 44.516975],
		zoom: 12
	}, {
		searchControlProvider: 'yandex#search'
	});
	$.getJSON( "objects.json", function( data ) {
		objectManager = new ymaps.ObjectManager({
			clusterize: true,
			gridSize: 50,
			clusterDisableClickZoom: false
		});
		objectManager.clusters.options.set('preset', 'islands#invertedNightClusterIcons');
		myMap.geoObjects.add(objectManager);
		objectManager.add(data);
	});
	$('.objects ul li a').click(function() {
		objectManager.setFilter('properties.filter == "'+$(this).attr('data-filter')+'"');
		$('.objects ul li a').removeClass('active');
		$(this).toggleClass('active');
	});
}

Тут вы можете отключить, кластеризацию если она вам не нужна.

Достаточно в параметре clusterize установить значение false.

Но при выводе большого количества меток рекомендуем оставить кластеризацию!

Теперь создадим сам файл JSON где будут храниться данные с метками


{"type":"FeatureCollection","features":[{"type":"Feature","id":"1","geometry":{"type":"Point","coordinates":[48.720421,44.509088]},"properties":{"description":"1-ый магазин","iconCaption":"1-ый магазин","filter":"shop"},"options":{"preset":"islands#nightIcon"}},{"type":"Feature","id":"2","geometry":{"type":"Point","coordinates":[48.72698,44.490537]},"properties":{"description":"2-ой магазин","iconCaption":"2-ой магазин","filter":"shop"},"options":{"preset":"islands#nightIcon"}},{"type":"Feature","id":"3","geometry":{"type":"Point","coordinates":[48.697557,44.497833]},"properties":{"description":"3-ий магазин","iconCaption":"3-ий магазин","filter":"shop"},"options":{"preset":"islands#nightIcon"}},{"type":"Feature","id":"4","geometry":{"type":"Point","coordinates":[48.717284,44.529055]},"properties":{"description":"1-ый пункт выдачи","iconCaption":"1-ый пункт выдачи","filter":"punkt"},"options":{"preset":"islands#nightIcon"}},{"type":"Feature","id":"5","geometry":{"type":"Point","coordinates":[48.731205,44.52472]},"properties":{"description":"2-ый пункт выдачи","iconCaption":"2-ый пункт выдачи","filter":"punkt"},"options":{"preset":"islands#nightIcon"}}]}

Краткое описание JSON файла

Обязательно каждой метке даем свой ID

В ключе coordinates прописываем координаты точки

Ключ description отвечает за краткое описание метки, а iconCaption за описание самой метки, которое будет отображаться над меткой

За фильтрацию меток у нас будет отвечать ключ filter. В нашем случае значения будут shop и punkt


Пример в действии

Вы можете посмотреть данный пример в действии

Или скачать его

Ознакомиться более детально с API Яндекс карт вы можете на странице документации

На этом все, спасибо за внимание, если у вас возникли вопросы, пишите ниже в комментариях