2

My Leaflet map is completely functional -- so that's great. However, I noticed that my vector layer (upwards of 200 points) is slightly delayed whenever I try zooming in or out -- it almost appears to "bounce," and it's very jarring. I've tried it in Firefox and Chrome and it works the same in both browsers. I understand that this is a lot of data to render, but I'm wondering if there's anything I can do to remedy this awkward problem?

Here's the small amount of JS I've written so far (the HTML is mostly just a blank div with the id "milwaukee_map"):

// load the initial map!
var theMap = L.map('milwaukee_map', {
    minZoom: 11,
    maxZoom: 19
})
    .setView([43.041475, -87.923975], // zoom to Milwaukee County by default
    11) // set initial zoom level

// add basemap tiles
L.tileLayer('http://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png', {
    attribution: 'Basemap Data &copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>; Basemap &copy; <a href="http://cartodb.com/attributions">CARTO</a>',
    subdomains: 'abcd'
}).addTo(theMap);

// load stops from carto
function getStops() {
    $.getJSON('https://benjamin-schroeder.carto.com/api/v2/sql?format=GeoJSON&q=SELECT the_geom, stop_name FROM mcts_stops_feb_16', function(data){
        stopsLayer = L.geoJson(data, {
            pointToLayer: function(feature, latlng) {
                return new L.CircleMarker(latlng, {radius: 2, fillOpacity: 0.85});
            }
        })
        .addTo(theMap);
    })
}

getStops();

Live example: https://pantherfile.uwm.edu/schro333/public/mcts_map/

Thanks!

Benjamin Schroeder
  • 27
  • 1
  • 6

1 Answers1

2

You might have a mismatch between Leaflet CSS and JS versions.

See also: https://github.com/Leaflet/Leaflet/issues/4774

If this does not solve your problem, please consider simplifying your live example, as somehow it makes the browser freeze.

ghybs
  • 47,565
  • 6
  • 74
  • 99
  • Many thanks for the response! I switched from carto.js to Leaflet's CSS/JS and both seem to be the same version. Still having the problem, unfortunately. I've updated the live example to only render one point. – Benjamin Schroeder Aug 10 '16 at 19:56
  • ... And just as I say that, I realized I hadn't removed the link to the mismatched CSS file. It works perfectly now. Thank you so much! – Benjamin Schroeder Aug 10 '16 at 19:58