Mcast location tracker

Httprelay.io mcast communication method example. Location tracking side.

by Jonas Jasas

HTML

<div class="share">
  <h1>Location tracker</h1>
  <h2><a href="https://httprelay.io">Httprelay.io</a> mcast communication method example</h2>
  <label for="consumer-url">Share this link to show your location in real time (can be multiple viewers at once):</label>
  <input type="text" id="consumer-url" size="50" readonly value="https://fiddle.jshell.net/jasajona/dn0ktq8o/show/?chanid=">
  <p><a href="https://jsfiddle.net/jasajona/dn0ktq8o/">Viewer source code</a></p>
  <p>
    <em>IMPORTANT!</em> demo.httprelay.io instance runs in extremely limited environment.
    In order to evaluate performance or use it in production please 
    <a href="https://gitlab.com/jonas.jasas/httprelay#installation" target="_blank">run your own instance</a>.
  </p>
</div>

CSS

body {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  margin: 0;
}

.share {
   flex: 1 1 auto;
   max-width: 80vw;
   text-align: center;
}

JavaScript

var	chanId = 'map' + Math.round(Math.random()*1000)
$('#consumer-url').val($('#consumer-url').val() + chanId)

// WSecret protects channel from unauthorized writes
var url = 'https://demo.httprelay.io/mcast/' + chanId + '?wsecret=' + Math.round(Math.random()*1000)	

navigator.geolocation.watchPosition(
	p => $.ajax({
  	method: 'POST',
    url: url,
  	data: JSON.stringify({lat: p.coords.latitude, lng: p.coords.longitude}),
    contentType: 'application/json'
  }),
  () => alert('Please enable your GPS position feature'),
  { enableHighAccuracy: true }
);