Problem loading large amount of geoJSON data to Leaflet map

I have geoJSON with more than 5000 objects containing various coordinates, but when they are displayed on the sitemap, the page either crashes or loads the objects for a very long time, but further interaction with the site is impossible.

In index.html I have the following code:

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);

The code for packing class objects into a JSON file contained in /locdata/

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

The JSON looks like this:

{"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]}}]}

What is the reason that the coordinates cannot be displayed correctly on the Leaflet map on the user page? I'm working on Django, in which the data is displayed correctly in the admin panel. Thanks in advance for your reply!

Back to Top