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 © <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; }