Menu
I played around with leaflet.js and found it to be very slow with a simple vector layer containing around 200 circles. The first page load takes several seconds and it's more or less not possible to zoom or scroll the map, the reaction of the page is incredible slow. As I've seen much more complicated leaflet examples, I'm pretty sure I did something wrong. Here the code of my test page:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link
rel="stylesheet"
href="http://cdn.leafletjs.com/leaflet-0.7/leaflet.css"
/>
</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="http://openstreetmap.org">OpenStreetMap</a>';
L.tileLayer(
'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: 'Map data © ' + 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>
Any idea what could cause the problem?
284
Your code seems fine. You could try one of the global override switches to force drawing with canvas (L_PREFER_CANVAS). The "use-case" that's documented on the reference page seems to address your exact issue:
From: http://leafletjs.com/reference.html#global
L_PREFER_CANVAS
Forces Leaflet to use the Canvas back-end (if available) for vector layers instead of SVG. This can increase performance considerably in some cases (e.g. many thousands of circle markers on the map).
177
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
