Tag: legends

var context = canvas.getContext(contextType);

Map Title in Leaflet Map

Take the map title in a variable and measure its width. if its width is less than one forth of canvas width then set its width according to canvas width. else the tile is larger then split it.

function getMapHeading(context,canvas){
 var mapheading = $("#mapTitle").html();
 var pix = context.measureText(mapheading).width;
 if(pix<(canvas.width/4))
 {
 var xval = (canvas.width-pix*4)/2;
 context.font = "bold 35px proximanova-semibold-webfont";
 context.fillText(mapheading,xval,40);
 }
 else
 {
 mapheading = mapheading.split(" ");
 //console.log("mapheading",mapheading);
 //mapheading = mapheading.toString();
 pix = canvas.width/4;
 var line = "",nextline = "";
 for(var i=0; i<mapheading.length; i++)
 {
 if(context.measureText(line).width<pix)
 {
 line += mapheading[i] + " ";
 }
 else
 {
 nextline += mapheading[i] + " ";
 }
 }
 context.font = "bold 35px proximanova-semibold-webfont";
 context.fillText(line,25,40);
 if(nextline.length>0)
 {
 context.fillText(nextline,25,80);
 }
 }
 }

Map Legends in Leaflet Map Printable

Similarly function is created for legend as getLegeds(). In this function we have taken legend title, icon, range and containing div in variables. Check everything and recreate the context as you want it to be appeared on print.

function getLegends(context,canvas){
 var legendheading = $("#legendTitle").html();
 var paralegend = $('.paralegend');
 var legendclr = $('.paralegend i');
 var divlegend = $('.leaflet-control.leaflet-bottom.leaflet-left');
 var width = divlegend.width(),height = divlegend.height();
 var x =10,dx=20,dy=20;
 var y = canvas.height-height+15;
 var legendtext = [],legendcolor = [],rects = [];
 for(var i=0; i<paralegend.length;i++)
 {
 legendtext.push(paralegend[i].innerText);
 }
 for(var j=0; j<legendclr.length; j++)
 {
 legendcolor.push(legendclr[j].style.background);
 }
 for(var l=0;l<legendcolor.length;l++)
 {
 rects.push(new shape(x,y,dx,dy,legendcolor[l],legendtext[l]));
 y=y+25;
 }
 context.font = "bold 15px proximanova-semibold-webfont";
 context.fillText(legendheading,x,canvas.height-height);
 for(var k=0;k<rects.length;k++)
 {
 var sqr = rects[k];
 context.fillStyle = sqr.fill;
 context.fillRect(sqr.x,sqr.y,sqr.dx,sqr.dy);
 context.strokeStyle='#000';
 context.lineWidth=1;
 context.strokeRect(sqr.x,sqr.y,sqr.dx,sqr.dy);
 context.fillStyle = 'black';
 context.font = "15px proximanova-semibold-webfont";
 context.fillText(sqr.text,sqr.x+25,sqr.y+15);
 }
 }

Leaflet-image plugin for printing map – Leaflet Print Map – Legends, Title, Layer, Color

Now Call the leafletImage() function and provide the create map and call the callback function. In this callback you can call the getMapHeading() and getLegends() functions. For this function we have taken the image data in data variable by using getImageData() method. And The getImageData() method returns an ImageData object that copies the pixel data for the specified rectangle on a canvas.

So the rectangle is given as whole canvas. Then set the globalCompositionOperation as destination-over. The globalCompositeOperation property sets or returns how a source (new) image are drawn onto a destination (existing) image. The putImageData() puts the image data back onto the canvas. The drawImage method draws an image onto the canvas.

leafletImage(map, function(err, canvas) {
 var context = canvas.getContext("2d");
 getMapHeading(context,canvas);
 getLegends(context,canvas);
 var data = context.getImageData(0, 0, canvas.width, canvas.height);

//store the current globalCompositeOperation
 var compositeOperation = context.globalCompositeOperation;

//set to draw behind current content
 context.globalCompositeOperation = "destination-over";

//set background color
 //context.fillStyle = "grey";
 context.fillStyle = "#ddd";
 //draw background / rect on entire canvas
 context.fillRect(0, 0, canvas.width, canvas.height);

var dataURL = canvas.toDataURL("image/png");
 console.log(dataURL);
 context.clearRect (0,0,canvas.width, canvas.height);

//restore it with original / cached ImageData
 context.putImageData(data, 0,0);

//reset the globalCompositeOperation to what it was
 context.globalCompositeOperation = compositeOperation;

context.drawImage(canvas,0,0);
 print.href = dataURL;
 print.download = "map.png";
 });

finally On printing the map will look like

Hope you enjoyed this article and are now able to create Leaflet Print Map – Legends, Title, Layer, Color. If you find any problem in implementing a printable map, do comment below. Thanks.