test.html

<!DOCTYPE html>
<html lang="de">
<head>
  <meta charset="UTF-8">
  <title>RTIRL Maps Widget — Debug</title>
  <link rel="stylesheet"
        href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"
        integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY="
        crossorigin="">
  <link rel="stylesheet" href="style.css">
  <style>
    body { background: #222; }
    #panel {
      position: absolute; right: 12px; top: 12px; z-index: 1000;
      font-family: system-ui, sans-serif; color: #fff; display: flex;
      flex-direction: column; gap: 6px; max-width: 220px;
    }
    #panel button { padding: 6px 8px; cursor: pointer; }
    #panel hr { width: 100%; border: 0; border-top: 1px solid #555; margin: 4px 0; }
    #panel label { font-size: 12px; display: flex; align-items: center; gap: 6px; }
  </style>
</head>
<body>
  <div id="stage">
    <div id="widget"><div id="map"></div></div>
    <div id="speed"></div>
  </div>

  <div id="panel">
    <button data-cmd="!map on">!map on</button>
    <button data-cmd="!map off">!map off</button>
    <button data-cmd="!map off 5">!map off 5 (auto-show)</button>
    <button data-cmd="!map zoom 13">!map zoom 13</button>
    <button data-cmd="!map zoom 17">!map zoom 17</button>
    <button data-cmd="!map trail on">!map trail on</button>
    <button data-cmd="!map trail off">!map trail off</button>
    <button data-cmd="!map freeze">!map freeze</button>
    <button data-cmd="!map follow">!map follow</button>
    <button data-cmd="!map reload">!map reload</button>
    <hr>
    <button data-cmd="!map speed on">!map speed on</button>
    <button data-cmd="!map speed off">!map speed off</button>
    <label>Speed (m/s): <input id="speedSlider" type="range" min="0" max="30" step="0.5" value="0.41"></label>
    <label><span id="speedReadout">0.41 m/s → 1 km/h</span></label>
    <button id="move">simulate move</button>
  </div>

  <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"
          integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo="
          crossorigin=""></script>
  <script src="js/parsers.js"></script>
  <script src="js/command-router.js"></script>
  <script src="js/map-view.js"></script>
  <script src="js/speed-view.js"></script>
  <script>
    // Config aus der URL lesen, damit du z.B. ?speedFont=Roboto&speedSize=32 testen kannst.
    var config = parseConfig(window.location.search);

    var mapView = createMapView({
      mapId: 'map', mainId: 'widget', pinUrl: '', size: config.size, zoom: config.zoom,
    });

    // Stage-Box + #speed-Band wie in main.js bemaßen und stylen.
    var speedGap = 8;
    var speedBand = Math.round(config.speedSize * 1.4);
    var stage = document.getElementById('stage');
    if (stage) {
      stage.style.width = config.size + 'px';
      stage.style.height = (config.size + speedGap + speedBand) + 'px';
    }
    var speedEl = document.getElementById('speed');
    if (speedEl) {
      speedEl.style.width = config.size + 'px';
      speedEl.style.height = speedBand + 'px';
      speedEl.style.lineHeight = speedBand + 'px';
      speedEl.style.marginTop = speedGap + 'px';
      speedEl.style.fontFamily = "'" + config.speedFont + "', Arial, sans-serif";
      speedEl.style.fontSize = config.speedSize + 'px';
    }
    if (config.speedFont && config.speedFont.toLowerCase() !== 'arial') {
      var fontLink = document.createElement('link');
      fontLink.rel = 'stylesheet';
      fontLink.href = 'https://fonts.googleapis.com/css2?family=' +
        encodeURIComponent(config.speedFont).replace(/%20/g, '+') + '&display=swap';
      document.head.appendChild(fontLink);
    }

    var speedView = createSpeedView({ elId: 'speed', enabled: config.speed });
    speedView.setMapVisible(config.show);

    var router = createCommandRouter({ mapView: mapView, speedView: speedView, cmd: config.cmd });

    var buttons = document.querySelectorAll('#panel button[data-cmd]');
    buttons.forEach(function (b) {
      b.addEventListener('click', function () {
        router.handleMessage({ isPrivileged: true, text: b.getAttribute('data-cmd') });
      });
    });

    // Speed-Slider: aktualisiert die Anzeige direkt und speist den nächsten "move".
    var slider = document.getElementById('speedSlider');
    var readout = document.getElementById('speedReadout');
    function currentSpeed() { return parseFloat(slider.value); }
    function updateReadout() {
      readout.textContent = currentSpeed() + ' m/s → ' + formatSpeed(currentSpeed());
    }
    slider.addEventListener('input', function () {
      updateReadout();
      speedView.setSpeed(currentSpeed());
    });
    updateReadout();

    // simulierte Bewegung: kleiner Random-Walk um Hannover. Position und Speed
    // sind – wie bei RTIRL – zwei getrennte Streams: Position via handleLocation,
    // Speed direkt an speedView (analog createSpeedFeed).
    var lat = 52.3762675, lon = 9.7407488;
    document.getElementById('move').addEventListener('click', function () {
      lat += (Math.random() - 0.5) * 0.002;
      lon += (Math.random() - 0.5) * 0.002;
      router.handleLocation({ latitude: lat, longitude: lon });
      speedView.setSpeed(currentSpeed());
    });
  </script>
</body>
</html>