|
|
| Zeile 1: |
Zeile 1: |
| <style> | | <iframe src="/wiki/britonia_karte/britonia_karte.html" width="680" height="800" frameborder="0" style="border:none; max-width:100%"></iframe> |
| .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>
| |
| | |
| <div class="lm-wrapper" id="lm-{{{id|karte}}}" style="width:{{{width|800}}}px;max-width:100%">
| |
| <div class="lm-controls" role="toolbar" aria-label="Kartenebenen">
| |
| <span class="lm-controls-title">Ebenen</span>
| |
| </div>
| |
| <div class="lm-viewport" style="width:{{{width|800}}}px;height:{{{height|600}}}px;max-width:100%">
| |
| <!--layerdata:{{{layers}}}-->
| |
| </div>
| |
| <div class="lm-opacity-bar" style="display:none">
| |
| <span class="lm-opacity-label">Deckkraft:</span>
| |
| <input class="lm-opacity-slider" type="range" min="0" max="100" value="100">
| |
| <span class="lm-opacity-value">100%</span>
| |
| </div>
| |
| </div>
| |
| | |
| <script>
| |
| (function() {
| |
| var wrapperId = 'lm-{{{id|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(/<!--layerdata:([\s\S]*?)-->/);
| |
| 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 = '<span class="lm-controls-title">Ebenen</span>';
| |
| 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> | |
<iframe src="/wiki/britonia_karte/britonia_karte.html" width="680" height="800" frameborder="0" style="border:none; max-width:100%"></iframe>