Using canvas

[nmccready]

From @iamsaint on February 16, 2015 11:0

Hi. Could you tell me how to use canvas to draw map layer with your directive?

Copied from original issue: tombatossals/angular-leaflet-directive#634

[nmccready]

From @nCore on March 2, 2015 14:30

You have two possibilities:

1. Create your own canvas, above the map (via higher z-index) like this:

#map {
    display: block;
    width: 100%;
    height: 100%;
    position: relative;
    z-index: 1;
}

#canvas {
    display: block:
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 2;
    /* this will allow you to scroll the map and pass-through all the events */
    pointer-events: none; 
}

and then just simply get it in javascript and draw anything on it:

var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');

// drawing logic

1. You can use this plugin for Leaflet: https://github.com/CartoDB/Leaflet.CanvasLayer and use with mapObject given by leafletData.getMap() promise.

[nmccready]

From @simonpeters on May 13, 2015 11:59

Doesn't leaflet support canvas out of the box?

[nmccready]

Look at the code and the examples.

https://github.com/tombatossals/angular-leaflet-directive/blob/master/src/services/leafletLayerHelpers.js

[nmccready]

If the functionality is missing then see if you can add it.