Листовка - Создайте круги с цифрами в центре, которые будут пропорциональны границам, в которых расположены адреса. ⇐ Jquery

[Anonymous]

Я поместил на карту маркер для каждого адреса, но это беспорядочно, и моя цель — создать круг для каждого города. Внутри каждого круга я хочу отображать количество адресов, расположенных в этом городе, а размер круга должен зависеть от количества адресов. В файле .csv каждый адрес имеет отдельные поля для города и страны.
Любая помощь приветствуется, заранее спасибо.

Код: Выделить всё

let map = L.map('map', {
minZoom: 2,
maxZoom: 9
});

map.setView([48.54272537231445, 16.105000228881836], 8);

L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
maxZoom: 19,
attribution: '© [url=http://www.openstreetmap.org/copyright]OpenStreetMap[/url]'
}).addTo(map);

// Read markers data from data.csv
jQuery.get('addresses.csv', function(csvString) {
// convert string to array of objects
let data = Papa.parse(csvString, {header: true, dynamicTyping: true}).data;

// For each row in data, create a marker and add it to the map
for (let i in data) {
let row = data[i];

let marker = L.marker([row.Latitude, row.Longitude], {
opacity: 1
}).bindPopup(row.Title);

marker.addTo(map);
}

});

РЕДАКТИРОВАТЬ:
Leaflet.markercluster — это все, что мне нужно для решения этой проблемы. Здесь все хорошо объяснено: https://github.com/Leaflet/Leaflet.mark ... file#usage

Код: Выделить всё

// Read markers data from data.csv
jQuery.get('addresses.csv', function (csvString) {
// convert string to array of objects
let data = Papa.parse(csvString, { header: true, dynamicTyping: true }).data;

let markers = new L.MarkerClusterGroup({
iconCreateFunction: function (cluster) {

let groupBounds = cluster.getBounds();
// Calculate the cluster center
let clusterCenter = groupBounds.getCenter();
// Convert the coordinates of the cluster center to pixels
let clusterCenterPoint = map.latLngToContainerPoint(clusterCenter);
// Convert the coordinates of the upper right corner of the bounds to pixels
let northeastPoint = map.latLngToContainerPoint(groupBounds.getNorthEast());
// Calculate the distance between points in pixels
let distanceInPx = clusterCenterPoint.distanceTo(northeastPoint);

let html = '' + cluster.getChildCount() + '';
return L.divIcon({
html: html,
className: 'mycluster',
iconSize: L.point(distanceInPx, distanceInPx),
});
},
spiderfyOnMaxZoom: false,
showCoverageOnHover: true,
zoomToBoundsOnClick: false,
});

// For each row in data, create a marker and add it to the map
for (let i in data) {
let row = data[i];

if (row.Latitude != null && row.Latitude != null) {
let marker = L.marker(
new L.LatLng(row.Latitude, row.Longitude),
{}
).bindPopup(row.Latitude + " " + row.Longitude);
markers.addLayer(marker);
}
}
map.addLayer(markers);
});

});

Код: Выделить всё

.mycluster {
display: flex !important;
justify-content: center;
align-items: center;
font-size: 24px;
background: rgba(39, 133, 245, 0.3);
border-radius: 50%;
color: black;
}

Вот как это выглядит


Подробнее здесь: https://stackoverflow.com/questions/782 ... rtional-to