Widget:Test

<style> .lm-wrapper{display:inline-block;max-width:100%;border:1px solid #a2a9b1;border-radius:6px;overflow:hidden;background:#f8f9fa;vertical-align:top} .lm-controls{display:flex;flex-wrap:wrap;align-items:center;gap:6px;padding:8px 12px;background:#f8f9fa;border-bottom:1px solid #a2a9b1;min-height:42px} .lm-controls-title{font-size:.82em;font-weight:bold;color:#54595d;margin-right:4px} .lm-btn{display:inline-flex;align-items:center;padding:4px 12px;font-size:.82em;font-family:inherit;color:#202122;background:#fff;border:1px solid #a2a9b1;border-radius:3px;cursor:pointer;transition:background .15s,color .15s,border-color .15s;white-space:nowrap} .lm-btn:hover{background:#eaf3fb;border-color:#3680b0;color:#0645ad} .lm-btn-active{background:#3680b0;color:#fff;border-color:#3680b0} .lm-viewport{position:relative;display:block;overflow:hidden;background:#eaecf0} .lm-layer{position:absolute;top:0;left:0;width:100%;height:100%;display:block;object-fit:fill;max-width:none;transition:opacity .2s ease;pointer-events:none} .lm-layer:first-child{position:relative} .lm-opacity-bar{display:flex;align-items:center;gap:8px;padding:6px 12px;background:#f8f9fa;border-top:1px solid #a2a9b1} .lm-opacity-label{font-size:.80em;color:#54595d;white-space:nowrap} .lm-opacity-slider{flex:1;accent-color:#3680b0;cursor:pointer} .lm-opacity-value{font-size:.80em;color:#202122;min-width:36px;text-align:right} </style>

   Ebenen

   Deckkraft:
   <input class="lm-opacity-slider" type="range" min="0" max="100" value="100">
   100%

<script> (function() {

 var wrapperId = 'lm-karte';
 var wrapper = document.getElementById(wrapperId);
 if (!wrapper) return;

 var viewport = wrapper.querySelector('.lm-viewport');
 var controls = wrapper.querySelector('.lm-controls');
 var opacityBar = wrapper.querySelector('.lm-opacity-bar');
 var opacitySlider = opacityBar.querySelector('.lm-opacity-slider');
 var opacityValue = opacityBar.querySelector('.lm-opacity-value');

 var comment = viewport.innerHTML.match(//);
 if (!comment) return;

 var layers;
 try { layers = JSON.parse(comment[1]); }
 catch(e) { console.error('LayeredMap: Ungültiges JSON', e); return; }

 viewport.innerHTML = ;
 layers.forEach(function(layer, i) {
   var img = document.createElement('img');
   img.className = 'lm-layer';
   img.id = wrapperId + '-layer' + i;
   img.src = layer.image;
   img.alt = layer.label;
   img.style.opacity = layer.visible ? '1' : '0';
   viewport.appendChild(img);
 });

 controls.innerHTML = 'Ebenen';
 layers.forEach(function(layer, i) {
   var btn = document.createElement('button');
   btn.type = 'button';
   btn.textContent = layer.label;
   btn.className = 'lm-btn' + (layer.visible ? ' lm-btn-active' : );
   if (layer.visible) {
     btn.style.background = layer.color;
     btn.style.borderColor = layer.color;
     btn.style.color = '#fff';
   }
   btn.addEventListener('click', function() {
     layer.visible = !layer.visible;
     var img = document.getElementById(wrapperId + '-layer' + i);
     if (img) img.style.opacity = layer.visible ? '1' : '0';
     btn.className = 'lm-btn' + (layer.visible ? ' lm-btn-active' : );
     btn.style.background = layer.visible ? layer.color : ;
     btn.style.borderColor = layer.visible ? layer.color : ;
     btn.style.color = layer.visible ? '#fff' : ;
   });
   btn.addEventListener('mouseenter', function() {
     if (!layer.visible) return;
     var img = document.getElementById(wrapperId + '-layer' + i);
     opacitySlider.dataset.target = wrapperId + '-layer' + i;
     opacitySlider.value = Math.round(parseFloat(img.style.opacity) * 100);
     opacityValue.textContent = opacitySlider.value + '%';
     opacityBar.style.display = 'flex';
   });
   controls.appendChild(btn);
 });

 opacitySlider.addEventListener('input', function() {
   var img = document.getElementById(opacitySlider.dataset.target);
   if (img) img.style.opacity = opacitySlider.value / 100;
   opacityValue.textContent = opacitySlider.value + '%';
 });
 wrapper.addEventListener('mouseleave', function() {
   opacityBar.style.display = 'none';
 });

})(); </script>