Проблема загрузки большого количества данных geoJSON на карту Leaflet

У меня есть geoJSON с более чем 5000 объектов, содержащих различные координаты, но когда они отображаются на карте сайта, страница либо падает, либо очень долго загружает объекты, но дальнейшее взаимодействие с сайтом невозможно.

В файле index.html у меня есть следующий код:

var mapOptions = {
    center: [14, 30],
    zoom: 7
}
var map = new L.map('map', mapOptions);

var layer = new L.TileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png');

map.addLayer(layer);

var dataurl = '/locdata/';
    fetch(dataurl)
        .then(function (resp) {
            return resp.json();
        })
        .then(function (data) {
            new L.GeoJSON(data, {
                onEachFeature: function (feature, layer) {
                    layer.bindPopup(feature.properties.name);
                }
            }).addTo(map);

Код для упаковки объектов класса в файл JSON, содержащийся в /locdata/

def loc_datasets(request):
    locations = serialize('geojson', Location.objects.all())
    return HttpResponse(locations, content_type='json')

JSON выглядит следующим образом:

{"type": "GeometryCollection", "crs": {"type": "name", "properties": {"name": "EPSG:4326"}}, "features": [{"type": "Feature", "properties": {"name": "00", "lon": 28.676971529668783, "lat": 60.02057178521224, "pk": "133811"}, "geometry": {"type": "Point", "coordinates": [28.676971529668783, 60.02057178521224]}}, {"type": "Feature", "properties": {"name": "41", "lon": 28.844832766965556, "lat": 60.02863347426495, "pk": "142975"}, "geometry": {"type": "Point", "coordinates": [28.844832766965556, 60.02863347426495]}}]}

По какой причине координаты не могут корректно отображаться на карте Leaflet на странице пользователя? Я работаю на Django, в котором данные корректно отображаются в админ панели. Заранее спасибо за ответ!

Вернуться на верх