From 6fdce3d014eb95bc3447e2cce5fe5e2758451a3a Mon Sep 17 00:00:00 2001
From: Matt Le <ml9951@rit.edu>
Date: Tue, 19 Dec 2017 12:52:41 -0500
Subject: [PATCH] Adding support for imageOverlay

---
 index.js         | 18 ++++++++++++++++++
 leaflet-image.js | 20 ++++++++++++++++++++
 2 files changed, 38 insertions(+)

diff --git a/index.js b/index.js
index b246d69..fe87736 100644
--- a/index.js
+++ b/index.js
@@ -42,9 +42,27 @@ module.exports = function leafletImage(map, callback) {
 
     function drawTileLayer(l) {
         if (l instanceof L.TileLayer) layerQueue.defer(handleTileLayer, l);
+        else if (l instanceof L.ImageOverlay) layerQueue.defer(handleImageOverlay, l);
         else if (l._heat) layerQueue.defer(handlePathRoot, l._canvas);
     }
 
+    function handleImageOverlay(imgOverlay, callback) {
+        var imgBounds = imgOverlay.getBounds(),
+            bounds = new L.Bounds(
+                map.latLngToLayerPoint(imgBounds.getNorthWest()),
+                map.latLngToLayerPoint(imgBounds.getSouthEast())),
+            size = bounds.getSize();
+        var imageObj = new Image();
+        imageObj.src = imgOverlay._url;
+        imageObj.onload = function () {
+            var ctx = canvas.getContext('2d');
+            ctx.drawImage(this, bounds.min.x, bounds.min.y, size.x, size.y);
+            callback(null, {
+                canvas: canvas
+            });
+        };
+    }
+
     function drawMarkerLayer(l) {
         if (l instanceof L.Marker && l.options.icon instanceof L.Icon) {
             layerQueue.defer(handleMarkerLayer, l);
diff --git a/leaflet-image.js b/leaflet-image.js
index 030a2c4..74c59d2 100644
--- a/leaflet-image.js
+++ b/leaflet-image.js
@@ -43,9 +43,27 @@ module.exports = function leafletImage(map, callback) {
 
     function drawTileLayer(l) {
         if (l instanceof L.TileLayer) layerQueue.defer(handleTileLayer, l);
+        else if (l instanceof L.ImageOverlay) layerQueue.defer(handleImageOverlay, l);
         else if (l._heat) layerQueue.defer(handlePathRoot, l._canvas);
     }
 
+    function handleImageOverlay(imgOverlay, callback) {
+        var imgBounds = imgOverlay.getBounds(),
+            bounds = new L.Bounds(
+                map.latLngToLayerPoint(imgBounds.getNorthWest()),
+                map.latLngToLayerPoint(imgBounds.getSouthEast())),
+            size = bounds.getSize();
+        var imageObj = new Image();
+        imageObj.src = imgOverlay._url;
+        imageObj.onload = function () {
+            var ctx = canvas.getContext('2d');
+            ctx.drawImage(this, bounds.min.x, bounds.min.y, size.x, size.y);
+            callback(null, {
+                canvas: canvas
+            });
+        };
+    }
+
     function drawMarkerLayer(l) {
         if (l instanceof L.Marker && l.options.icon instanceof L.Icon) {
             layerQueue.defer(handleMarkerLayer, l);
@@ -250,6 +268,8 @@ module.exports = function leafletImage(map, callback) {
     }
 
     function addCacheString(url) {
+        // workaround for https://github.com/mapbox/leaflet-image/issues/84
+        if (!url) return url;
         // If it's a data URL we don't want to touch this.
         if (isDataURL(url) || url.indexOf('mapbox.com/styles/v1') !== -1) {
             return url;