add image to rect polygon in leaflet - leaflet

Question

Here is the working JSFiddle
what I need is to add image to rect polygon and also don't want it to repeat itself as when zooming in or out and want it to be fixed. any suggestions will be appreciated and if there is any other way to achieve so.
If it can be placed in geojson that will be great as I have to give some properties to each polygon. And create all the rect polygon dynamically.
code is below
var osmUrl = 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
osmAttrib = '© OpenStreetMap 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 states = [{
"type": "Feature",
"properties": {"party": "Republican"},
"geometry": {
"type": "Polygon",
"coordinates": [[
[-104.05, 48.99],
[-96.58, 45.94],
[-104.03, 45.94],
[-104.05, 48.99]
]]
}
}, {
"type": "Feature",
"properties": {"party": "Democrat"},
"geometry": {
"type": "Polygon",
"coordinates": [[
[-109.05, 41.00],
[-102.03, 36.99],
[-109.04, 36.99],
[-109.05, 41.00]
]]
}
}];
var poly1 = [
[24, 121],
[24.5, 121],
[24.5, 121.9],
[24, 121.9]
];
L.polygon(poly1, {fill:'url(http://i.imgur.com/ktPFJKC.jpg)'}).addTo(map);
L.geoJson(states, {
style: function(feature) {
switch (feature.properties.party) {
case 'Republican': return {color:'#ff0000'};
case 'Democrat': return {color: "#0000ff"};
}
}
}).addTo(map);

Answer 1

The best thing to do here is use an ImageOverlay, which is designed for precisely this case. You can use the coordinates of your polygon object to create both the image overlay and an invisible GeoJSON layer that sits on top of it. If you are dynamically creating the polygon objects in the same format as your example poly1, then you can reference the indices of the corner points like this when creating 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();
The .bringToBack may be unnecessary if you always create the image before the GeoJSON polygon, but it does ensure that the image overlay doesn't interfere with other layer interactions. You can create a temporary GeoJSON object from the polygon object using .toGeoJSON, and set any GeoJSON properties you like:
var polyTemp = L.polygon(poly1).toGeoJSON();
polyTemp.properties.name = 'pineapple';
Then create an invisible L.GeoJSON layer to handle the interactions:
var boxOptions = {fillOpacity:0, opacity:0, onEachFeature: onEachBox};
var imageBox = L.geoJson(polyTemp, boxOptions).addTo(map);
function onEachBox(feature, layer) {
layer.bindPopup("Hello, I'm a " + polyTemp.properties.name);
}
The onEachBox function here is of course just an example to illustrate that you can access the GeoJSON properties. Here is an updated fiddle:
https://jsfiddle.net/17Ld98fv/