repeaterPlot = new ol.layer.Image({ title: "Plot", visible: true, source: new ol.source.ImageStatic({ attributions: [new ol.Attribution({ html: "CloudRF" })], url: 'https://plot.brandmeister.network/plots/311829.png', crossOrigin: '', projection: 'EPSG:4326', imageExtent: [-88.645721,38.556269,-86.315721,40.356267] }), opacity: 0.6 }); var plotLegend = function(options) { var element = document.createElement('div'); element.className = 'ol-unselectable ol-control'; element.id = 'legend-div'; element.style.background = "no-repeat url('https://plot.brandmeister.network/legend.png')"; element.style.display = 'block'; element.style.bottom = "0px"; element.style.left = "10px"; element.style.width = "28px"; element.style.height = "170px"; ol.control.Control.call(this, { element: element }); }; repeaterPlot.on('propertychange', function(e) { if (e.key === 'visible') { if (e.oldValue === true) { document.getElementById("legend-div").style.visibility = "hidden"; } else { document.getElementById("legend-div").style.visibility = "visible"; } } });