Created
September 2, 2021 00:51
-
-
Save juaoose/50ab36d325817f5bd449230d5c1d572c to your computer and use it in GitHub Desktop.
Adding RealtimeIRL as a StreamElements overlay: Add a custom widget and add these to the widget in the html and js sections.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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: '© <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) { | |
| 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()); | |
| }); | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment