如何根据传单地图中多边形属性中的选项添加图像叠加层？

Question

I have a multi-polygon geojson file ( mapInfo ) that has one of the properties named "field_hazards". The hazards include "gale/storm, heavy rain, thunderstorm and Freezing rain " How can i an add image overlay depending on the field_hazard options?

Note the geojson file is got dynamically as a drupal feed. I have made the following code but it returns an empty map, the polygons are not rendered.

 function getImage(d) {
 return d === 'Freezing Rain' ? "http://mymap:8082/images/weather-images/43n.png" :
        d === 'Thunderstorm' ? "http://mymap:8082/images/weather-images/11.png" :
        d === 'Heavy Rain' ? "http://my:8082/weather-images/02n.png" :
        d === 'Gale\/Storm' ? "http://mymap:8082/images/weather-images/15.png" :
                        "http://my:8082/images/weather-images/09.png";

}
var imageUrl = getImage(feature.properties.field_hazards);
var imageLayer = L.imageOverlay(imageUrl, imageBounds).addTo(map).bringToBack();
var boxOptions = {fillOpacity:0, opacity:0, onEachFeature: onEachBox};
//create the image interaction box
var imageBox = L.geoJson(mapInfo, boxOptions).addTo(map);
//zoom in to fit GeoJSON layer
map.fitBounds(imageBox.getBounds());

I have looked at this example " add image to rect polygon in leaflet ", but it requires me to have the image url preset as a property its self.

Answer 1

I got a solution from this link. Posted it in case some else is interested.

Adding image overly in leaflet map from a property