juanr.co

Adding RealtimeIRL overlays to StreamElements

2 min read

The idea behind leaflet overlay was to try to make overlays work on some other applications such as Prism Live, however, when using StreamElements overlays you might run into some issues.

Problem

If you embed a regular overlay using the iframe tag you will end up with a map on the default position (somewhere near Africa) and the map will not update, it looks like this happens because of cross origin policies enforced by StreamElements.

Solution

This is how you manage to get a working map overlay in StreamElements overlays:

  1. Create a custom widget.
  2. Open the editor and copy the following content:
  • HTML tab:
<html>
<head>
  <script src="https://www.gstatic.com/firebasejs/8.10.0/firebase.js"></script>
  <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css"
    integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
    crossorigin="anonymous" />
  <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"
    integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="
    crossorigin="anonymous"></script>
</head>
 
<body>
  <div style="position: relative">
    <div id="map" style="width: 300px; height: 250px"></div>
    <div id="marker" style="
          background-color: cyan;
          height: 12px;
          width: 12px;
          position: absolute;
          border-radius: 50%;
          top: 119px;
          left: 144px;
          box-shadow: 0 0 10px cyan;
          z-index: 400;
        "></div>
  </div>
</body>
 
</html>
  • JS tab:
const pullKey = "<YOUR_RTIRL_PULL_KEY>";
const mapboxToken = "<YOUR_MAPBOX_AT>";
 
var app;
var map = L.map("map").setView([0, 0], 13);
L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}', {
  accessToken: mapboxToken,
  attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> © <a href="https://www.mapbox.com/">Mapbox</a>',
  id: 'mapbox/streets-v11',
  tileSize: 512,
  zoomOffset: -1,
 
  zoom: 13,
}).addTo(map);
 
// Setting this through options does not seem to work
map.removeControl(map.zoomControl);
map.dragging.disable();
 
addEventListener('load', onReady);
 
function onReady() {
 firebase.database.INTERNAL.forceWebSockets();
  app = firebase.initializeApp( {
	apiKey: "AIzaSyC4L8ICZbJDufxe8bimRdB5cAulPCaYVQQ",
	databaseURL: "https://rtirl-a1d7f-default-rtdb.firebaseio.com",
	projectId: "rtirl-a1d7f",
	appId: "1:684852107701:web:d77a8ed0ee5095279a61fc",
  },
  "rtirl-api");
 
	addLocationListener(function (location) {
	  console.log(location);
	  map.panTo({
		lng: location.longitude,
		lat: location.latitude,
	  });
	});
  }
 
 
function addLocationListener(callback) {
  return addListener("location", callback);
}
 
function addListener(type, callback) {
  return app
    .database()
    .ref()
    .child("pullables")
    .child(pullKey)
    .child(type)
    .on("value", function (snapshot) {
      callback(snapshot.val());
    });
}

Graph View

Backlinks