Search code examples
djangocanvasleafletdjango-leaflet

Django leaflet canvas

How to make django-leaflet render with canvas? I checked on leaflet documentation that it should use preferCanvas but there are no manual in django leaflet that shows how to do it, while var map are hidden somewhere... Any clue

Solution

  • Even if you don't have access to the preferCanvas option or the renderer option of the L.Map, you can still use the renderer option of individual vector layers.

    Using this in django-less, vanilla javascript would look like:

    var map = new L.Map('leaflet', { /* map options */ });

var myCanvasRenderer = L.canvas();

var circle = L.circleMarker([0, 0], {
  radius: 30,
  renderer: myCanvasRenderer
}).addTo(map);

var line = L.polyline([[60, 10],[20, 200]], {
  renderer: myCanvasRenderer
}).addTo(map);

    Make sure that you're creating the L.Canvas renderer once and reusing it in all your vector layers.

    You can confirm this works by using the developer tools of your web browser and noting that there is a <canvas> element inside the Leaflet map container, but there is no <svg> element to be found:

    You can see this example live over here.