Creating a Leaflet image overlay with GeoJSON interaction from a latLng bounding box

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/leaflet.js"></script>
<script src="//lnaweisu.github.io/leaflet-polygon-fillPattern/leaflet-polygon.fillPattern.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/leaflet.css">
<div id="map">

</div>

CSS

#map { 
    height: 600px;
    width:100%;
}

JavaScript

var osmUrl = 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
			osmAttrib = '&copy; <a href="http://openstreetmap.org/copyright">OpenStreetMap</a> contributors',
			osm = L.tileLayer(osmUrl, {maxZoom: 18, attribution: osmAttrib});

var map = new L.Map('map', {layers: [osm], center: new L.LatLng(24, 121), zoom: 9});

var poly1 = [
    [24, 121],
    [24.5, 121],
    [24.5, 121.9],
    [24, 121.9]
];

//create the image overlay
var imageUrl = 'http://i.imgur.com/ktPFJKC.jpg';
var imageBounds = L.latLngBounds([
    poly1[0],
    poly1[2]
  ]);
var imageLayer = L.imageOverlay(imageUrl, imageBounds).addTo(map).bringToBack();

//convert polygon points to GeoJSON and set any properties you like
var polyTemp = L.polygon(poly1).toGeoJSON();
polyTemp.properties.name = 'pineapple';
//set the options for the GeoJSON image interaction box
var boxOptions = {fillOpacity:0, opacity:0, onEachFeature: onEachBox};
//create the image interaction box
var imageBox = L.geoJson(polyTemp, boxOptions).addTo(map);

//GeoJSON interactivity functions
function onEachBox(feature, layer) {
  layer.bindPopup("Hello, I'm a " + polyTemp.properties.name);
}

console.log(polyTemp)