Home

Awesome

gLayers.Leaflet

generic map layers for leaflet 0.7 and 1.0-rc, moving from original GIST here https://gist.github.com/Sumbera/11114288 to this repo.

L.CanvasLayer - full screen generic canvas layer for leaflet

##API

methodsdescription
needRedrawwill schedule next frame call for drawLayer
delegate(object)optionaly set receiver of the events if not 'inheriting' from L.CanvasLayer
eventsdescription
onLayerDidMountafter layer is attached/added to the map
onLayerWillUnmountbefore layer is removed from the map
onDrawLayer(info)when layer is drawn , info contains view parameters like bounds, size, canvas etc.
note : events will be called only if presented on the 'subclass' or if delegate(receiver) is set

Examples

Basic usage

        L.canvasLayer()
            .delegate(this) // -- if we do not inherit from L.CanvasLayer  we can setup a delegate to receive events from L.CanvasLayer
            .addTo(leafletMap);
      
        function onDrawLayer(info) {
            var ctx = info.canvas.getContext('2d');
            ctx.clearRect(0, 0, info.canvas.width, info.canvas.height);
            ctx.fillStyle = "rgba(255,116,0, 0.2)";
            for (var i = 0; i < data.length; i++) {
                var d = data[i];
                if (info.bounds.contains([d[0], d[1]])) {
                    dot = info.layer._map.latLngToContainerPoint([d[0], d[1]]);
                    ctx.beginPath();
                    ctx.arc(dot.x, dot.y, 3, 0, Math.PI * 2);
                    ctx.fill();
                    ctx.closePath();
                }
            }
        };

Custom layer

  
          myCustomCanvasDraw= function(){
              this.onLayerDidMount = function (){      
                 // -- prepare custom drawing    
              };
              this.onLayerWillUnmount  = function(){
                 // -- custom cleanup    
              };
              this.setData = function (data){
                // -- custom data set
                this.needRedraw(); // -- call to drawLayer
              };
              this.onDrawLayer = function (viewInfo){
              // -- custom  draw
              }
              
          }
          
          myCustomCanvasDraw.prototype = new L.CanvasLayer(); // -- setup prototype 
          
          var myLayer = new myCustomCanvasDraw();
          myLayer.addTo(leafletMap);

Other useful full view Leaflet Canvas sources here: