Главная > Javascript, Web > map leaflet cluster

map leaflet cluster

Файлы для загрузки:

https://leafletjs.com/download.html
https://github.com/Leaflet/Leaflet.markercluster

Подключение:

<script src="/assets/js/leaflet/leaflet.js"></script>
<script src="/assets/js/leaflet/leaflet.markercluster.js"></script>
<link href="/assets/js/leaflet/leaflet.css" rel="stylesheet" type="text/css"/>
<link href="/assets/js/leaflet/MarkerCluster.css" rel="stylesheet" type="text/css"/>
<link href="/assets/js/leaflet/MarkerCluster.Default.css" rel="stylesheet" type="text/css"/>

JS:

var map=L.map('map_search_leaflet').setView([59.939095,30.315868],2);
L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}',{
	attribution:'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
	minZoom:2,
	maxZoom:18,
	id:'mapbox.streets',
	accessToken:'--token--'
}).addTo(map);
map.scrollWheelZoom.disable();
map.setMaxBounds([
	[90,-180],
	[-90,180]
]);
var markers=L.markerClusterGroup({
	maxClusterRadius:20
});
markers.addLayer(L.marker([60.171801, 24.956500]).bindPopup('<div class="popup_header"><a href="http://example.com/nedvizhimost/kupit/kafe-v-helsinki-art1.html">Кафе в Хельсинки</a></div><div class="popup_body"><div class="art">ID: art1</div><div class="price">248 000 €</div><div class="photo"><a href="http://example.com/nedvizhimost/kupit/kafe-v-helsinki-art1.html"><img src="http://example.com/resize/catalog/crop/270/210/c11.jpg" alt="Кафе в Хельсинки"/></a></div></div><div class="popup_footer"><div class="f_3">49 м2</div></div>'));
markers.addLayer(L.marker([60.166892, 24.943673]).bindPopup('<div class="popup_header"><a href="http://example.com/nedvizhimost/kupit/restoran-v-helsinki-art2.html">Ресторан в Хельсинки</a></div><div class="popup_body"><div class="art">ID: art2</div><div class="price">350 000 €</div><div class="photo"><a href="http://example.com/nedvizhimost/kupit/restoran-v-helsinki-art2.html"><img src="http://example.com/resize/catalog/crop/270/210/c18.jpg" alt="Ресторан в Хельсинки"/></a></div></div><div class="popup_footer"><div class="f_3">130 м2</div></div>'));
markers.addLayer(L.marker([60.166892, 24.943673]).bindPopup('<div class="popup_header"><a href="http://example.com/nedvizhimost/kupit/pomeshchenie-v-helsinki-art3.html">Помещение в Хельсинки</a></div><div class="popup_body"><div class="art">ID: art3</div><div class="price">198 000 €</div><div class="photo"><a href="http://example.com/nedvizhimost/kupit/pomeshchenie-v-helsinki-art3.html"><img src="http://example.com/resize/catalog/crop/270/210/c22.jpg" alt="Помещение в Хельсинки"/></a></div></div><div class="popup_footer"><div class="f_3">54 м2</div></div>'));
map.addLayer(markers);

HTML:

<div id="map_search_leaflet"></div>

CSS:

#map_search_leaflet{
	height:570px;
	margin-bottom:20px;
}
Categories: Javascript, Web Tags:
  1. Пока что нет комментариев.
Похожие публикации