esisa/leaflet_image

## leaflet_image
<!DOCTYPE html>
<html lang="en">
<head>
    <script src='//api.tiles.mapbox.com/mapbox.js/v1.6.1/mapbox.js'></script>
    <link href='//api.tiles.mapbox.com/mapbox.js/v1.6.1/mapbox.css' rel='stylesheet' />
    <script src='//api.tiles.mapbox.com/mapbox.js/plugins/leaflet-image/v0.0.3/leaflet-image.js'></script>
    <script src='//api.tiles.mapbox.com/mapbox.js/plugins/leaflet-image/v0.0.3/leaflet-image.js'></script>
    <style type="text/css">

        html,
        body {
            height: 100%;
        /* The html and body elements cannot have any padding or margin. */
        }
        #map{
          height: 100%;
        }

    </style>


</head>


<body>

  <div id="image"></div>
  <div id="map"></div>


  <script type="text/javascript">


    L_PREFER_CANVAS = true;

    var map = new L.Map('map', {zoom: 4, center: [65.2 ,10.572]});

    // Add layer
    var veikart = L.mapbox.tileLayer('esisa.map-0tz2sd3q');
    map.addLayer(veikart);

    var myLines = [{
        "type": "LineString",
        "coordinates": [[-100, 40], [-105, 45], [-110, 55]]
    }, {
        "type": "LineString",
        "coordinates": [[-105, 40], [-110, 45], [-115, 55]]
    }];


    // Create geojson object, add to map and add myLines to it
    var lines = L.geoJson(myLines, {}).addTo(map);


    // Create image of map
    function createImg() {
      leafletImage(map, doImage);
    }

    // Callback for createing image
    function doImage(err, canvas) {
        var img = document.createElement('img');
        var dimensions = map.getSize();
        img.width = dimensions.x;
        img.height = dimensions.y;
        img.src = canvas.toDataURL();
        document.getElementById('image').innerHTML = '';
        document.getElementById('image').appendChild(img);

    }
  </script>

</body>

</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<script src='//api.tiles.mapbox.com/mapbox.js/v1.6.1/mapbox.js'></script>
	<link href='//api.tiles.mapbox.com/mapbox.js/v1.6.1/mapbox.css' rel='stylesheet' />
	<script src='//api.tiles.mapbox.com/mapbox.js/plugins/leaflet-image/v0.0.3/leaflet-image.js'></script>
	<script src='//api.tiles.mapbox.com/mapbox.js/plugins/leaflet-image/v0.0.3/leaflet-image.js'></script>
	<style type="text/css">

	html,
	body {
	height: 100%;
	/* The html and body elements cannot have any padding or margin. */
	}
	#map{
	height: 100%;
	}

	</style>


	</head>



	<body>

	<div id="image"></div>
	<div id="map"></div>


	<script type="text/javascript">


	L_PREFER_CANVAS = true;

	var map = new L.Map('map', {zoom: 4, center: [65.2 ,10.572]});

	// Add layer
	var veikart = L.mapbox.tileLayer('esisa.map-0tz2sd3q');
	map.addLayer(veikart);

	var myLines = [{
	"type": "LineString",
	"coordinates": [[-100, 40], [-105, 45], [-110, 55]]
	}, {
	"type": "LineString",
	"coordinates": [[-105, 40], [-110, 45], [-115, 55]]
	}];


	// Create geojson object, add to map and add myLines to it
	var lines = L.geoJson(myLines, {}).addTo(map);


	// Create image of map
	function createImg() {
	leafletImage(map, doImage);
	}

	// Callback for createing image
	function doImage(err, canvas) {
	var img = document.createElement('img');
	var dimensions = map.getSize();
	img.width = dimensions.x;
	img.height = dimensions.y;
	img.src = canvas.toDataURL();
	document.getElementById('image').innerHTML = '';
	document.getElementById('image').appendChild(img);

	}
	</script>

	</body>

	</html>