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: 0.82em;
   font-weight: bold;
   color: #54595d;
   margin-right: 4px;

} .lm-btn {

   display: inline-flex;
   align-items: center;
   padding: 4px 12px;
   font-size: 0.82em;
   font-family: inherit;
   color: #202122;
   background: #ffffff;
   border: 1px solid #a2a9b1;
   border-radius: 3px;
   cursor: pointer;
   transition: background 0.15s, color 0.15s, border-color 0.15s;
   white-space: nowrap;

} .lm-btn:hover {

   background: #eaf3fb;
   border-color: #3680b0;
   color: #0645ad;

} .lm-btn-active {

   background: #3680b0;
   color: #ffffff;
   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 0.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: 0.80em;
   color: #54595d;
   white-space: nowrap;

} .lm-opacity-slider {

   flex: 1;
   accent-color: #3680b0;
   cursor: pointer;

} .lm-opacity-value {

   font-size: 0.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() {

 function init() {
   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) { 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';
   });
 }

 if (document.readyState === 'loading') {
   document.addEventListener('DOMContentLoaded', init);
 } else {
   init();
 }

})(); </script>