leaflet js: draw POIs as canvas

Question

I want to draw many geo points with Leaflet. Therefore I want to use HTML5 canvas to improve the performance. My datasoure is geoJSON. As I saw in the documention of Leaflet, it is not possible to draw the geo positions as canvas yet.

var anotherGeojsonLayer = new L.GeoJSON(coorsField, {
        pointToLayer: function (latlng){
            return new L.Marker(latlng, {
                icon: new BaseballIcon()
            });
        }
    });

I think I should hook up here:

pointToLayer: function (latlng) { }

Does somebody know how to draw my latlng objects as canvas?

Answer 1

I'm Leaflet author. You can do this by using L.CircleMarker instead of regular Marker, and also using an experimental L_PREFER_CANVAS switch to render vectors as Canvas (instead of SVG), like this: https://github.com/CloudMade/Leaflet/blob/master/debug/vector/vector-canvas.html

Answer 2

Expanding on the original answer in case anyone needs this for Leaflet 1.0. You should still use L.circleMarker() (Leaflet circleMarker documentation) instead of L.marker(), but the way to use the canvas has changed.

In Leaflet 1.0, the experimental L_PREFER_CANVAS switch has been upgraded to an official map option preferCanvas (Leaflet preferCanvas documentation).

var map = L.map('mapid', {
        preferCanvas: true
    });

Alternatively, you can explicitly set the canvas renderer; I think this does the same thing as the preferCavas option. Here's the Leaflet documentation for canvas.

var map = L.map('mapid', {
        renderer: L.canvas()
    });

Either of these options (preferCanvas: true or renderer: L.canvas()) with L.circleMarker() was significantly faster than a regular layer using L.marker().