Showing points/Connecting lines between points on a single canvas.
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
data Added files via upload Apr 1, 2016
demo Create Canvas-With-Lots-Points.html Apr 1, 2016
lib Initial Commit Jan 15, 2014
src Update fullcanvas.js Mar 31, 2016
LICENSE Initial Commit Jan 15, 2014
ReadMe.md Update ReadMe.md Apr 1, 2016

ReadMe.md

Leaflet.fullcanvas

Provides implementation of points using canvas. With canvas you can show more number of points than SVG. The plugin uses the quad tree algorithm to minimize/optimize the number of points to be drawn.

Requires Leaflet 0.7.0 or newer.

Using the plugin

  • For canvas with points: Demo
  • For canvas with Loo..ots of points(160236 points): Demo
  • For canvas with lines connecting points: Demo
  • For canvas with points and popups: Demo

Usage

How to set data.

Create your map example:

 var map = L.map('map').setView([0, 35], 3);
     L.tileLayer('http://{s}.tile.cloudmade.com/7c2ed2e9170441289176d725eb0ca615/999/256/{z}/{x}/{y}.png', {
         maxZoom: 18
     }).addTo(map);

Create instance of the plugin canvas layer and add it to the map example:

    points = [];
    //make points slat denotes the latitude and slon denotes the longitude
    points.push({"slat": -33.3042, "slon": 26.5328});
    //make another point slat denotes the latitude and slon denotes the longitude
    points.push({"slat": -25, "slon": 29});
    //make a canvas layer
    var layer = new MyLayer();
    //set the data points to the layer
    layer.setData(points);
    //add canvas layer to the map
    layer.addLayerTo(map);

How to add data.

To add data live into the map: To the canvas layer created, you can add points

    //add points to the layer...here slat denotes the latitude and slon denotes the longitude
    layer.addData({"slat": -33.3042, "slon": 26.5328});

How to color/create your own points.

You can color/create your own points by overriding the drawSource function example:

    var MyLayer = L.FullCanvas.extend({
        //over riding the getsource function
        drawSource: function(point) {
            //get the context
            var ctx = layer.getCanvas().getContext("2d");
            ctx.globalCompositeOperation = "lighter";
            //drawing the shape of the point
            ctx.beginPath();
            //adding gradient 
            var grd = ctx.createRadialGradient(point.x, point.y, 0, point.x, point.y, 10);
            grd.addColorStop(0.200, 'rgba(255, 242, 0, 1)');
            grd.addColorStop(0.370, 'rgba(255, 157, 0, 1)');
            grd.addColorStop(0.5, 'rgba(255,255, 255, 1)');
            ctx.fillStyle = grd;
            ctx.arc(point.x, point.y , 2, 0, 2 * Math.PI, true);
            ctx.fill();
        }
    });

How to show popup.

You can color/create your own points by overriding the drawSource function example:

var MyLayer = L.FullCanvas.extend({
        //over riding the clickedPoints function
        clickedPoints: function(points){
            var text = "You clicked on the point Latitude["+ points[0].data.slat + "] Longitude["+ points[0].data.slon + "]";
            //show your popup
            alert(text);
        }

    });

how to draw lines between points.

Create instance of the plugin canvas layer and add points to the layer example:

    points = [];
    //make points slat denotes the source latitude and slon denotes the source longitude 
    //make points tlat denotes the target latitude and tlon denotes the target longitude 
    points.push({"slat": -33.3042, "slon": 26.5328,"tlat": -10, "tlon": 15});
    //make points slat denotes the source latitude and slon denotes the source longitude 
    //make points tlat denotes the target latitude and tlon denotes the target longitude 
    points.push({"slat": -25, "slon": 29, "tlat": -50, "tlon": 10});
    //make a canvas layer
    var layer = new MyLayer();
    //set the data points to the layer
    layer.setData(points);
    //add canvas layer to the map
    layer.addLayerTo(map);

how to draw lot of points in canvas.

We have to understand that when we have a lot of points to draw. We should not do

    var MyLayer = L.FullCanvas.extend({
        //over riding the getsource function
        drawSource: function(point) {
            //get the context
            var ctx = layer.getCanvas().getContext("2d");
            ctx.globalCompositeOperation = "lighter";
            //drawing the shape of the point
            ctx.beginPath();
            //adding gradient 
            var grd = ctx.createRadialGradient(point.x, point.y, 0, point.x, point.y, 10);
            grd.addColorStop(0.200, 'rgba(255, 242, 0, 1)');
            grd.addColorStop(0.370, 'rgba(255, 157, 0, 1)');
            grd.addColorStop(0.5, 'rgba(255,255, 255, 1)');
            ctx.fillStyle = grd;
            ctx.arc(point.x, point.y , 2, 0, 2 * Math.PI, true);
            ctx.fill();
        }
    });

Because if we have a 100000+ points the context drawing is expensive for each point. So best approach is to insert an image point instead of drawing the points.

    var imageObj = new Image();
    imageObj.src = "../data/shapes.png";//load any image
   //place the points in the canvas
    var MyLayer = L.FullCanvas.extend({
      drawSource: function(point) {
        var ctx = this.getCanvas().getContext("2d");
        ctx.drawImage(imageObj, point.x - 1, point.y - 1, 2, 2);
      }
    });