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/262846.png', crossOrigin: '', projection: 'EPSG:4326', imageExtent: [10.014525,47.698391,12.736191,49.498389] }), 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"; } } });