Skip to content

Instantly share code, notes, and snippets.

@juaoose

juaoose/index.html

Last active July 5, 2022 21:17
Show Gist options
  • Save juaoose/2806d4eb4f036aa6f54c979b9510a51a to your computer and use it in GitHub Desktop.
Save juaoose/2806d4eb4f036aa6f54c979b9510a51a to your computer and use it in GitHub Desktop.
Download ZIP
show two streamers in an overlay, it does not use your pull key so it will only show your location when youre live on twitch
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<script src="https://api.mapbox.com/mapbox-gl-js/v2.2.0/mapbox-gl.js"></script>
<script src="https://unpkg.com/@mapbox/mapbox-sdk/umd/mapbox-sdk.min.js"></script>
<script src="https://mapbox.github.io/mapbox-gl-language/index.js"></script>
<script src="https://unpkg.com/@rtirl/api@latest/lib/index.min.js"></script>
<link
href="https://api.mapbox.com/mapbox-gl-js/v2.2.0/mapbox-gl.css"
rel="stylesheet"
/>
</head>
<body>
<div style="position: relative; width: 100%; height: 100%">
<div id="map" style="width: 300px; height: 250px"></div>
</div>
<script>
// You have to get your own mapbox acces token at mapbox.com, it has a free tier :)
mapboxgl.accessToken =
"pk.eyJ1IjoiampqampqampqampqampqampqaiIsImEiOiJja290MThwMzIwNjNkMndwaHR5djlhYThqIn0.zULjRWtxmVmaWe-FDobI-A";
var map = new mapboxgl.Map({
container: "map",
style: "mapbox://styles/mapbox/streets-v11",
interactive: false,
attributionControl: false,
zoom: 5,
});
map.addControl(new MapboxLanguage({ defaultLanguage: "en" }));
const marker1 = new mapboxgl.Marker()
.setLngLat([12.554729, 55.70651])
.addTo(map);
const marker2 = new mapboxgl.Marker()
.setLngLat([12.554729, 55.70651])
.addTo(map);
//TODO Change for the streamers twitch ids
const myStreamerId = "437343696";
const otherStreamerId = "753285921";
RealtimeIRL.forStreamer("twitch", myStreamerId).addLocationListener(
function (location) {
marker1.setLngLat([location.longitude, location.latitude]);
fitBounds();
}
);
RealtimeIRL.forStreamer("twitch", otherStreamerId).addLocationListener(
function (location) {
marker2.setLngLat([location.longitude, location.latitude]);
fitBounds();
}
);
function fitBounds() {
map.fitBounds([marker1.getLngLat(), marker2.getLngLat()], {
padding: 30,
});
}
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment