Leaflet.js с векторным слоем очень медленный

Я играл с leaflet.js и нашел его очень медленным с простым векторным слоем, содержащим около 200 кругов. Загрузка первой страницы занимает несколько секунд, и ее более или менее невозможно масштабировать или прокручивать карту, реакция страницы невероятно медленная. Поскольку я видел намного более сложные примеры буклетов, я почти уверен, что сделал что-то не так. Здесь код моей тестовой страницы:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <link
       rel="stylesheet"
       href="#" onclick="location.href='http://cdn.leafletjs.com/leaflet-0.7/leaflet.css'; return false;"
       />
  </head>
  <body>
    <div id="map" style="width: 1100px; height: 550px"></div>
    <script
       src="http://cdn.leafletjs.com/leaflet-0.7/leaflet.js">
    </script>
    <script>

var points = [ 
[ 48.538385 , 11.166186 ],
...
];
      var map = L.map('map').setView([51.0, 10.20], 6);
      mapLink = '<a href="#" onclick="location.href='http://openstreetmap.org'; return false;">OpenStreetMap</a>';
      L.tileLayer(
      'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
      attribution: 'Map data &copy; ' + mapLink,
      maxZoom: 16,
      }).addTo(map);

     for ( var i = 0;  i < points.length; i++) {
    var c = L.circle([points[i][0], points[i][1]], 20);
    c.addTo(map);
      }
    </script>
  </body>
</html>

Любая идея, что может вызвать проблему?

Ответ 1