Map

<!-- import MapLibre GL JS and its stylesheet -->
<script src="https://trmnl.com/js/maplibre-gl/5.24.0/maplibre-gl.js"></script>
<link href="https://trmnl.com/js/maplibre-gl/5.24.0/maplibre-gl.css" rel="stylesheet">

<!-- markup with an empty, ID'd .map container for the canvas -->
<div class="view view--full">
  <div class="layout layout--col gap--small">
    <div class="grid grid--cols-3">
      <div class="item">
        <div class="meta"></div>
        <div class="content">
          <span class="value value--small value--tnums">14&deg;C</span>
          <span class="label">South Bank</span>
        </div>
      </div>
      <div class="item">
        <div class="meta"></div>
        <div class="content">
          <span class="value value--small value--tnums">17:53</span>
          <span class="label">Sunset</span>
        </div>
      </div>
      <div class="item">
        <div class="meta"></div>
        <div class="content">
          <span class="value value--small value--tnums">2.1 km</span>
          <span class="label">To the office</span>
        </div>
      </div>
    </div>

    <div id="map-streets" class="map stretch w--full"></div>
  </div>

  <div class="title_bar">
    <img class="image image--adaptive" src="/images/plugins/trmnl--render.svg" alt="TRMNL Logo">
    <span class="title">Map</span>
    <span class="instance">Streets</span>
  </div>
</div>

<script type="text/javascript">
  // Wait for MapLibre and the framework TRMNLMaps helper (bundled in the
  // plugin runtime), then build the map from the live screen.
  function whenReady(cb) {
    var tries = 0;
    (function attempt() {
      if (window.TRMNLMaps && window.maplibregl) return cb();
      if (++tries > 200) return;
      setTimeout(attempt, 50);
    })();
  }

  whenReady(function () {
    var el = "map-streets";
    // watch() rebuilds on device/scale/mode/dark/theme change; options() carries
    // the style for the preset, painted from the live screen.
    TRMNLMaps.watch(el, function () {
      return new maplibregl.Map(TRMNLMaps.options({
        el: el, preset: "streets", center: [-0.1276, 51.5072], zoom: 13
      }));
    });
  });
</script>

// One watch() per container; only the preset changes.
["streets", "minimal", "outline"].forEach(function (preset) {
  var el = "map-style-" + preset;
  TRMNLMaps.watch(el, function () {
    return new maplibregl.Map(TRMNLMaps.options({
      el: el, preset: preset, center: [2.3522, 48.8566], zoom: 12
    }));
  });
});

var route = [
  [13.4240, 52.5390], [13.4205, 52.5352], [13.4150, 52.5310], [13.4088, 52.5265],
  [13.4010, 52.5210], [13.3930, 52.5170], [13.3840, 52.5125], [13.3759, 52.5096]
];
var home = [
  [13.3759, 52.5096], [13.3850, 52.5150], [13.3960, 52.5232], [13.4060, 52.5290],
  [13.4150, 52.5345], [13.4240, 52.5390]
];

whenReady(function () {
  var el = "map-commute";
  TRMNLMaps.watch(el, function () {
    var map = new maplibregl.Map(TRMNLMaps.options({ el: el, preset: "minimal" }));
    map.on("load", function () {
      // route() and dot() draw crisp fills from the chart-series ramp:
      // the ride in takes step 0 of 2, the ride home step 1.
      TRMNLMaps.route(map, route, { el: el, width: 3, i: 0, n: 2 });
      TRMNLMaps.route(map, home, { el: el, id: "home", width: 3, i: 1, n: 2 });
      TRMNLMaps.dot(map, route[0], { el: el, id: "start", radius: 5 });
      TRMNLMaps.dot(map, route[route.length - 1], { el: el, id: "end", radius: 5, hollow: true });
    });
    // fit() frames both routes on an integer zoom, no animation.
    TRMNLMaps.fit(map, route.concat(home), { padding: TRMNLPaint.px(24, { el: el }), maxZoom: 14 });
    return map;
  });
});

// Nothing here names a device or a color: the slots resolve per screen.
TRMNLMaps.watch(el, function () {
  return new maplibregl.Map(TRMNLMaps.options({
    el: el, preset: "streets", center: [151.2153, -33.8568], zoom: 12
  }));
});

// A theme re-points a map slot like any other component slot (SCSS):
// @include theme-slots.bg-slot("map-water", "blue-65");
// @include theme-slots.bg-slot("map-road-minor", "gray-50");

<!-- The map fills the layout; the cards are its positioned children. -->
<div class="view view--full">
  <div class="layout layout--col">
    <div id="map-overlay" class="map stretch w--full">
      <div class="absolute top--3 left--3 z--2 p--2 bg--white outline">
        <span class="label label--small">Shoreditch</span>
        <span class="value value--xsmall value--tnums">4 min</span>
      </div>
      <div class="absolute bottom--3 left--3 z--2 p--2 bg--white outline">
        <span class="label label--small">Next bus 17:12</span>
      </div>
    </div>
  </div>

  <div class="title_bar">
    <img class="image image--adaptive" src="https://usetrmnl.com/images/plugins/trmnl--render.svg" alt="TRMNL Logo">
    <span class="title">Map</span>
    <span class="instance">Floating card</span>
  </div>
</div>

<script type="text/javascript">
  TRMNLMaps.watch("map-overlay", function () {
    return new maplibregl.Map(TRMNLMaps.options({
      el: "map-overlay", preset: "streets", center: [-0.0779, 51.5252], zoom: 14
    }));
  });
</script>