CODEWITHSUNDEEP
javascriptjqueryajaxleafletgeojson
f00b43r
f00b43r

Reputation: 61

Leaflet becomes very slow when adding only a few markers through geojson objects

I'm trying to load geojson data about a bus line on a map. The bus stops are Points and the line is a LineString. Those are in a proper geojson file: http://pastebin.ca/2886659

Then I'm loading the file via AJAX (y tried it loading directly with the same effect/result). In the geojson file are around 90 points, so in theory shouldn't be a anything to worry about. When only loading 5 points it is somehow fast, but with already 10 points the browser becomes very slow and starts eating my memory.

This should be the part of the code that is relevant:

$("#load").click (function() {
  $.ajax({
    type: "POST",
    url: "./data/test.geojson",
    dataType: 'json',
    success: function (response) {
      console.log(response);
      geojsonLayer = L.geoJson(response, {
        onEachFeature: function (feature, layer) {
          layer.bindPopup(feature.properties.name);
      }});

      map.addLayer(geojsonLayer);
    }
  });
});

Especially when commenting out map.addLayer(geojsonLayer); all is working quickly, but no data is shown either :)

Check the complete code here: http://jsfiddle.net/5vnrj8ec/5/

Not sure if this is related: But when only loading 5 points through the geojson object, each time I click in a popup it is getting slower and slower....

Thank you very much!

Upvotes: 1

Views: 1093

Answers (1)

f00b43r
f00b43r

Reputation: 61

This was caused by a conflict with the Zoomslider library. In case you are using this and you are observing the same problems, just kick the include out of your header and check again.

Upvotes: 1

Related Questions