bsudekum/index.html

## index.html
<!DOCTYPE html >
<html>
<head>
  <meta charset='UTF-8'/>
  <title>Export to imgur</title>
  <script>window.L_PREFER_CANVAS = true;</script>
  <link href='//api.tiles.mapbox.com/mapbox.js/v1.5.1/mapbox.css' rel='stylesheet' />
  <script src='//api.tiles.mapbox.com/mapbox.js/v1.5.1/mapbox.js'></script>
  <script src='//code.jquery.com/jquery-1.8.2.min.js'></script>
  <script src='leaflet-image.js'></script>
  <script src='test.js'></script>
    <style>
      #map {
        position:relative;
        top:0;
        bottom:0;
        width:500px;
        height:500px;
      }
      button{
        position: absolute;
        z-index: 1001;
      }
    </style>
</head>
<body>
<h2>Export to Imgur</h2>
<div id='map'></div>
<div id='images'></div>
<button id='output'>output</button>

<script>
L.Browser.retina = true;

var map = L.mapbox.map('map', 'bobbysud.map-tyt3admo', {
  tileLayer: {
    detectRetina: true
  }
})
  .setView([38.8737,-77.0729], 12);

L.geoJson(data).addTo(map);

document.getElementById('output').addEventListener('click', function() {
  leafletImage(map, doImage);
});

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();
  try {
    var imgSend = canvas.toDataURL('image/png').split(',')[1];
  } catch(e) {
    var imgSend = canvas.toDataURL('image/png').split(',')[1];
  }

  $.ajax({
    url:'https://api.imgur.com/3/upload',
    type: 'POST',
    data: {
      image:imgSend,
      type: 'png',
      title: 'image'
    },
    beforeSend: function(xhr){
      xhr.setRequestHeader('Authorization', 'Client-ID 469226b25b097ff')
    },
    success: function(data) {
      alert(data.data.link)
      imgUrl = data.link
    },
    error: function(data) {
      console.log(data);
    }
  });

}//do image

</script>
</body>
</html>

## leaflet-image.js
(function(e){if("function"==typeof bootstrap)bootstrap("leafletimage",e);else if("object"==typeof exports)module.exports=e();else if("function"==typeof define&&define.amd)define(e);else if("undefined"!=typeof ses){if(!ses.ok())return;ses.makeLeafletImage=e}else"undefined"!=typeof window?window.leafletImage=e():global.leafletImage=e()})(function(){var define,ses,bootstrap,module,exports;
return (function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);throw new Error("Cannot find module '"+o+"'")}var f=n[o]={exports:{}};t[o][0].call(f.exports,function(e){var n=t[o][1][e];return s(n?n:e)},f,f.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){
var queue = require('./queue');

// leaflet-image
module.exports = function leafletImage(map, callback) {

    var dimensions = map.getSize(),
        layerQueue = new queue(1);

    var canvas = document.createElement('canvas');
    canvas.width = dimensions.x;
    canvas.height = dimensions.y;
    var ctx = canvas.getContext('2d');

    // layers are drawn in the same order as they are composed in the DOM:
    // tiles, paths, and then markers
    map.eachLayer(drawTileLayer);
    if (map._pathRoot) layerQueue.defer(handlePathRoot, map._pathRoot);
    map.eachLayer(drawMarkerLayer);
    layerQueue.awaitAll(layersDone);

    function drawTileLayer(l) {
        if (l instanceof L.TileLayer) layerQueue.defer(handleTileLayer, l);
    }

    function drawMarkerLayer(l) {
        if (l instanceof L.Marker) layerQueue.defer(handleMarkerLayer, l);
    }

    function done() {
        callback(null, canvas);
    }

    function layersDone(err, layers) {
        if (err) throw err;
        layers.forEach(function(layer) {
            if (layer && layer.canvas) {
                ctx.drawImage(layer.canvas, 0, 0);
            }
        });
        done();
    }

    function handleTileLayer(layer, callback) {
        var canvas = document.createElement('canvas');

        canvas.width = dimensions.x;
        canvas.height = dimensions.y;

        var ctx = canvas.getContext('2d'),
            bounds = map.getPixelBounds(),
            origin = map.getPixelOrigin(),
            zoom = map.getZoom(),
            tileSize = layer.options.tileSize;

        if (zoom > layer.options.maxZoom ||
            zoom < layer.options.minZoom ||
            // mapbox.tileLayer
            (layer.options.format && !layer.options.tiles)) {
            return callback();
        }

        var offset = new L.Point(
            ((origin.x / tileSize) - Math.floor(origin.x / tileSize)) * tileSize,
            ((origin.y / tileSize) - Math.floor(origin.y / tileSize)) * tileSize
        );

        var tileBounds = L.bounds(
            bounds.min.divideBy(tileSize)._floor(),
            bounds.max.divideBy(tileSize)._floor()),
            tiles = [],
            center = tileBounds.getCenter(),
            j, i, point,
            tileQueue = new queue(1);

        for (j = tileBounds.min.y; j <= tileBounds.max.y; j++) {
            for (i = tileBounds.min.x; i <= tileBounds.max.x; i++) {
                tiles.push(new L.Point(i, j));
            }
        }

        tiles.forEach(function(tilePoint) {
            var originalTilePoint = tilePoint.clone();

            layer._adjustTilePoint(tilePoint);

            var tilePos = layer._getTilePos(originalTilePoint)
                .subtract(bounds.min)
                .add(origin);

            if (tilePoint.y >= 0) {
                var url = layer.getTileUrl(tilePoint) + '?cache=' + (+new Date());
                tileQueue.defer(loadTile, url, tilePos, tileSize);
            }
        });

        tileQueue.awaitAll(tileQueueFinish);

        function loadTile(url, tilePos, tileSize, callback) {
            var im = new Image();
            im.crossOrigin = '';
            im.onload = function() {
                callback(null, {
                    img: this,
                    pos: tilePos,
                    size: tileSize
                });
            };
            im.src = url;
        }

        function tileQueueFinish(err, data) {
            data.forEach(drawTile);
            callback(null, { canvas: canvas });
        }

        function drawTile(d) {
            ctx.drawImage(d.img, Math.floor(d.pos.x), Math.floor(d.pos.y),
                d.size, d.size);
        }
    }

    function handlePathRoot(root, callback) {
        var bounds = map.getPixelBounds();
        var origin = map.getPixelOrigin();
        var canvas = document.createElement('canvas');
        canvas.width = dimensions.x;
        canvas.height = dimensions.y;
        var ctx = canvas.getContext('2d');
        var pos = L.DomUtil.getPosition(root).subtract(bounds.min).add(origin);
        ctx.drawImage(root, pos.x, pos.y);
        callback(null, {
            canvas: canvas
        });
    }

    function handleMarkerLayer(marker, callback) {
        var canvas = document.createElement('canvas'),
            ctx = canvas.getContext('2d'),
            pixelBounds = map.getPixelBounds(),
            minPoint = new L.Point(pixelBounds.min.x, pixelBounds.min.y),
            pixelPoint = map.project(marker.getLatLng()),
            url = marker._icon.src + '?cache=false',
            im = new Image(),
            size = marker.options.icon.options.iconSize,
            pos = pixelPoint.subtract(minPoint),
            x = pos.x - (size[0] / 2),
            y = pos.y - size[1];

        canvas.width = dimensions.x;
        canvas.height = dimensions.y;
        im.crossOrigin = '';

        im.onload = function() {
            ctx.drawImage(this, x, y, size[0], size[1]);
            callback(null, {
                canvas: canvas
            });
        };

        im.src = url;
    }
};

},{"./queue":2}],2:[function(require,module,exports){
(function() {
  if (typeof module === "undefined") self.queue = queue;
  else module.exports = queue;
  queue.version = "1.0.4";

  var slice = [].slice;

  function queue(parallelism) {
    var q,
        tasks = [],
        started = 0, // number of tasks that have been started (and perhaps finished)
        active = 0, // number of tasks currently being executed (started but not finished)
        remaining = 0, // number of tasks not yet finished
        popping, // inside a synchronous task callback?
        error = null,
        await = noop,
        all;

    if (!parallelism) parallelism = Infinity;

    function pop() {
      while (popping = started < tasks.length && active < parallelism) {
        var i = started++,
            t = tasks[i],
            a = slice.call(t, 1);
        a.push(callback(i));
        ++active;
        t[0].apply(null, a);
      }
    }

    function callback(i) {
      return function(e, r) {
        --active;
        if (error != null) return;
        if (e != null) {
          error = e; // ignore new tasks and squelch active callbacks
          started = remaining = NaN; // stop queued tasks from starting
          notify();
        } else {
          tasks[i] = r;
          if (--remaining) popping || pop();
          else notify();
        }
      };
    }

    function notify() {
      if (error != null) await(error);
      else if (all) await(error, tasks);
      else await.apply(null, [error].concat(tasks));
    }

    return q = {
      defer: function() {
        if (!error) {
          tasks.push(arguments);
          ++remaining;
          pop();
        }
        return q;
      },
      await: function(f) {
        await = f;
        all = false;
        if (!remaining) notify();
        return q;
      },
      awaitAll: function(f) {
        await = f;
        all = true;
        if (!remaining) notify();
        return q;
      }
    };
  }

  function noop() {}
})();

},{}]},{},[1])
(1)
});
;

## test.js
var data = {
  "type": "FeatureCollection",
  "features": [
    {
      "type": "Feature",
      "properties": {},
      "geometry": {
        "type": "LineString",
        "coordinates": [
          [
            -77.02274322509766,
            38.948462386483904
          ],
          [
            -76.98532104492188,
            38.882748451536834
          ],
          [
            -77.09827423095703,
            38.87633407842684
          ],
          [
            -77.08694458007812,
            38.929502416386605
          ],
          [
            -77.02411651611327,
            38.891300048305425
          ],
          [
            -77.00660705566406,
            38.82901019751963
          ],
          [
            -77.15011596679688,
            38.81804367755417
          ],
          [
            -77.1796417236328,
            38.8594935943241
          ],
          [
            -77.1796417236328,
            38.9278999330871
          ],
          [
            -77.10411071777344,
            38.97382343009093
          ],
          [
            -77.00832366943358,
            38.984499048300435
          ],
          [
            -76.97502136230469,
            38.9396506365778
          ],
          [
            -76.93965911865234,
            38.862701613150506
          ],
          [
            -77.04299926757812,
            38.78352824456894
          ]
        ]
      }
    }
  ]
}
	<!DOCTYPE html >
	<html>
	<head>
	<meta charset='UTF-8'/>
	<title>Export to imgur</title>
	<script>window.L_PREFER_CANVAS = true;</script>
	<link href='//api.tiles.mapbox.com/mapbox.js/v1.5.1/mapbox.css' rel='stylesheet' />
	<script src='//api.tiles.mapbox.com/mapbox.js/v1.5.1/mapbox.js'></script>
	<script src='//code.jquery.com/jquery-1.8.2.min.js'></script>
	<script src='leaflet-image.js'></script>
	<script src='test.js'></script>
	<style>
	#map {
	position:relative;
	top:0;
	bottom:0;
	width:500px;
	height:500px;
	}
	button{
	position: absolute;
	z-index: 1001;
	}
	</style>
	</head>
	<body>
	<h2>Export to Imgur</h2>
	<div id='map'></div>
	<div id='images'></div>
	<button id='output'>output</button>

	<script>
	L.Browser.retina = true;

	var map = L.mapbox.map('map', 'bobbysud.map-tyt3admo', {
	tileLayer: {
	detectRetina: true
	}
	})
	.setView([38.8737,-77.0729], 12);

	L.geoJson(data).addTo(map);

	document.getElementById('output').addEventListener('click', function() {
	leafletImage(map, doImage);
	});

	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();
	try {
	var imgSend = canvas.toDataURL('image/png').split(',')[1];
	} catch(e) {
	var imgSend = canvas.toDataURL('image/png').split(',')[1];
	}

	$.ajax({
	url:'https://api.imgur.com/3/upload',
	type: 'POST',
	data: {
	image:imgSend,
	type: 'png',
	title: 'image'
	},
	beforeSend: function(xhr){
	xhr.setRequestHeader('Authorization', 'Client-ID 469226b25b097ff')
	},
	success: function(data) {
	alert(data.data.link)
	imgUrl = data.link
	},
	error: function(data) {
	console.log(data);
	}
	});

	}//do image

	</script>
	</body>
	</html>
	(function(e){if("function"==typeof bootstrap)bootstrap("leafletimage",e);else if("object"==typeof exports)module.exports=e();else if("function"==typeof define&&define.amd)define(e);else if("undefined"!=typeof ses){if(!ses.ok())return;ses.makeLeafletImage=e}else"undefined"!=typeof window?window.leafletImage=e():global.leafletImage=e()})(function(){var define,ses,bootstrap,module,exports;
	return (function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);throw new Error("Cannot find module '"+o+"'")}var f=n[o]={exports:{}};t[o][0].call(f.exports,function(e){var n=t[o][1][e];return s(n?n:e)},f,f.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){
	var queue = require('./queue');

	// leaflet-image
	module.exports = function leafletImage(map, callback) {

	var dimensions = map.getSize(),
	layerQueue = new queue(1);

	var canvas = document.createElement('canvas');
	canvas.width = dimensions.x;
	canvas.height = dimensions.y;
	var ctx = canvas.getContext('2d');

	// layers are drawn in the same order as they are composed in the DOM:
	// tiles, paths, and then markers
	map.eachLayer(drawTileLayer);
	if (map._pathRoot) layerQueue.defer(handlePathRoot, map._pathRoot);
	map.eachLayer(drawMarkerLayer);
	layerQueue.awaitAll(layersDone);

	function drawTileLayer(l) {
	if (l instanceof L.TileLayer) layerQueue.defer(handleTileLayer, l);
	}

	function drawMarkerLayer(l) {
	if (l instanceof L.Marker) layerQueue.defer(handleMarkerLayer, l);
	}

	function done() {
	callback(null, canvas);
	}

	function layersDone(err, layers) {
	if (err) throw err;
	layers.forEach(function(layer) {
	if (layer && layer.canvas) {
	ctx.drawImage(layer.canvas, 0, 0);
	}
	});
	done();
	}

	function handleTileLayer(layer, callback) {
	var canvas = document.createElement('canvas');

	canvas.width = dimensions.x;
	canvas.height = dimensions.y;

	var ctx = canvas.getContext('2d'),
	bounds = map.getPixelBounds(),
	origin = map.getPixelOrigin(),
	zoom = map.getZoom(),
	tileSize = layer.options.tileSize;

	if (zoom > layer.options.maxZoom \|\|
	zoom < layer.options.minZoom \|\|
	// mapbox.tileLayer
	(layer.options.format && !layer.options.tiles)) {
	return callback();
	}

	var offset = new L.Point(
	((origin.x / tileSize) - Math.floor(origin.x / tileSize)) * tileSize,
	((origin.y / tileSize) - Math.floor(origin.y / tileSize)) * tileSize
	);

	var tileBounds = L.bounds(
	bounds.min.divideBy(tileSize)._floor(),
	bounds.max.divideBy(tileSize)._floor()),
	tiles = [],
	center = tileBounds.getCenter(),
	j, i, point,
	tileQueue = new queue(1);

	for (j = tileBounds.min.y; j <= tileBounds.max.y; j++) {
	for (i = tileBounds.min.x; i <= tileBounds.max.x; i++) {
	tiles.push(new L.Point(i, j));
	}
	}

	tiles.forEach(function(tilePoint) {
	var originalTilePoint = tilePoint.clone();

	layer._adjustTilePoint(tilePoint);

	var tilePos = layer._getTilePos(originalTilePoint)
	.subtract(bounds.min)
	.add(origin);

	if (tilePoint.y >= 0) {
	var url = layer.getTileUrl(tilePoint) + '?cache=' + (+new Date());
	tileQueue.defer(loadTile, url, tilePos, tileSize);
	}
	});

	tileQueue.awaitAll(tileQueueFinish);

	function loadTile(url, tilePos, tileSize, callback) {
	var im = new Image();
	im.crossOrigin = '';
	im.onload = function() {
	callback(null, {
	img: this,
	pos: tilePos,
	size: tileSize
	});
	};
	im.src = url;
	}

	function tileQueueFinish(err, data) {
	data.forEach(drawTile);
	callback(null, { canvas: canvas });
	}

	function drawTile(d) {
	ctx.drawImage(d.img, Math.floor(d.pos.x), Math.floor(d.pos.y),
	d.size, d.size);
	}
	}

	function handlePathRoot(root, callback) {
	var bounds = map.getPixelBounds();
	var origin = map.getPixelOrigin();
	var canvas = document.createElement('canvas');
	canvas.width = dimensions.x;
	canvas.height = dimensions.y;
	var ctx = canvas.getContext('2d');
	var pos = L.DomUtil.getPosition(root).subtract(bounds.min).add(origin);
	ctx.drawImage(root, pos.x, pos.y);
	callback(null, {
	canvas: canvas
	});
	}

	function handleMarkerLayer(marker, callback) {
	var canvas = document.createElement('canvas'),
	ctx = canvas.getContext('2d'),
	pixelBounds = map.getPixelBounds(),
	minPoint = new L.Point(pixelBounds.min.x, pixelBounds.min.y),
	pixelPoint = map.project(marker.getLatLng()),
	url = marker._icon.src + '?cache=false',
	im = new Image(),
	size = marker.options.icon.options.iconSize,
	pos = pixelPoint.subtract(minPoint),
	x = pos.x - (size[0] / 2),
	y = pos.y - size[1];

	canvas.width = dimensions.x;
	canvas.height = dimensions.y;
	im.crossOrigin = '';

	im.onload = function() {
	ctx.drawImage(this, x, y, size[0], size[1]);
	callback(null, {
	canvas: canvas
	});
	};

	im.src = url;
	}
	};

	},{"./queue":2}],2:[function(require,module,exports){
	(function() {
	if (typeof module === "undefined") self.queue = queue;
	else module.exports = queue;
	queue.version = "1.0.4";

	var slice = [].slice;

	function queue(parallelism) {
	var q,
	tasks = [],
	started = 0, // number of tasks that have been started (and perhaps finished)
	active = 0, // number of tasks currently being executed (started but not finished)
	remaining = 0, // number of tasks not yet finished
	popping, // inside a synchronous task callback?
	error = null,
	await = noop,
	all;

	if (!parallelism) parallelism = Infinity;

	function pop() {
	while (popping = started < tasks.length && active < parallelism) {
	var i = started++,
	t = tasks[i],
	a = slice.call(t, 1);
	a.push(callback(i));
	++active;
	t[0].apply(null, a);
	}
	}

	function callback(i) {
	return function(e, r) {
	--active;
	if (error != null) return;
	if (e != null) {
	error = e; // ignore new tasks and squelch active callbacks
	started = remaining = NaN; // stop queued tasks from starting
	notify();
	} else {
	tasks[i] = r;
	if (--remaining) popping \|\| pop();
	else notify();
	}
	};
	}

	function notify() {
	if (error != null) await(error);
	else if (all) await(error, tasks);
	else await.apply(null, [error].concat(tasks));
	}

	return q = {
	defer: function() {
	if (!error) {
	tasks.push(arguments);
	++remaining;
	pop();
	}
	return q;
	},
	await: function(f) {
	await = f;
	all = false;
	if (!remaining) notify();
	return q;
	},
	awaitAll: function(f) {
	await = f;
	all = true;
	if (!remaining) notify();
	return q;
	}
	};
	}

	function noop() {}
	})();

	},{}]},{},[1])
	(1)
	});
	;
	var data = {
	"type": "FeatureCollection",
	"features": [
	{
	"type": "Feature",
	"properties": {},
	"geometry": {
	"type": "LineString",
	"coordinates": [
	[
	-77.02274322509766,
	38.948462386483904
	],
	[
	-76.98532104492188,
	38.882748451536834
	],
	[
	-77.09827423095703,
	38.87633407842684
	],
	[
	-77.08694458007812,
	38.929502416386605
	],
	[
	-77.02411651611327,
	38.891300048305425
	],
	[
	-77.00660705566406,
	38.82901019751963
	],
	[
	-77.15011596679688,
	38.81804367755417
	],
	[
	-77.1796417236328,
	38.8594935943241
	],
	[
	-77.1796417236328,
	38.9278999330871
	],
	[
	-77.10411071777344,
	38.97382343009093
	],
	[
	-77.00832366943358,
	38.984499048300435
	],
	[
	-76.97502136230469,
	38.9396506365778
	],
	[
	-76.93965911865234,
	38.862701613150506
	],
	[
	-77.04299926757812,
	38.78352824456894
	]
	]
	}
	}
	]
	}