CODEWITHSUNDEEP
html5-canvasextjs4.1openstreetmapleaflet
Rahul G Nair
Rahul G Nair

Reputation: 1376

Is it possible to save Openstreets Map (leaflet) as an image

I am using leaflet with openstreetmaps to generate a map on Ext js panel.
As maps are coming as tiles in openstreet maps, I need to combine these tiles to create a single image in order to save as an image .

Upvotes: 2

Views: 5740

Answers (3)

JP_
JP_

Reputation: 1666

This seems to work for me:

http://www.yncoder.com/save-leaflet-map-as-image/

var images = container.getElementsByTagName('img');
for (var i = 0; i < images.length; i++) {
    images[i].setAttribute('crossOrigin', 'anonymous');
    images[i].src = images[i].src;
}

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

canvas.width  = document.documentElement.clientWidth;
canvas.height = document.documentElement.clientHeight;

for (i = 0; i < images.length; i++) {
    if (typeof images[i] != 'undefined') {
        context.drawImage(images[i],
            images[i].style.left.slice(0, -2), // slice off 'px' from end of str
            images[i].style.top.slice(0, -2),
            images[i].clientWidth,
            images[i].clientHeight
        );
    }
}

window.open(canvas.toDataURL());

Upvotes: 0

Dawied
Dawied

Reputation: 1117

I do this using the so called Tile Stitching method (server side). Steps are:

  • On the client side collect all the tile images in your document, for example using jQuery you could do: 

    $('[class^="leaflet-tile leaflet-tile-loaded"]')

That will give you an array with all the img elements of the tiles for your map.

  • get the width and height, x and y, and the url of the images and put in a data structure of your liking

  • send the data structure to a function on your server that will retrieve the urls and stitch the images together using the x,y,width,height attributes.

I got the idea from this article used with openlayers: http://trac.osgeo.org/openlayers/wiki/TileStitchingPrinting. In the article you will find a working php example. Using the information above the javascript portion for Leaflet should not be difficult.

Upvotes: 1

emecas
emecas

Reputation: 1586

You can save a Leaflet Map as a PNG file by using this resource

Saving a Leaflet Map to a PNG Example using Javascript and PHP

Upvotes: 1

Related Questions