Sync location tracker and viewer

Httprelay.io sync communication method example. Location exchange between two peers.

by Jonas Jasas

HTML

<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB0vbY3Fy-xQRr4WgqPJ_jECC_D0vRprXc"></script>
<div class="share">
  <h1>Location tracker and viewer</h1>
  <h2><a href="https://httprelay.io">Httprelay.io</a> sync communication method example</h2>
  <label class="">
    Share this link with someone on mobile device to exchange and track each others location in real time:<br/>
    <input type="text" class="url" size="50" readonly value="https://fiddle.jshell.net/jasajona/cgaju9o8/show/?chanid=">
  </label>
  <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>
<div class="map"></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;
}

.map {
  width: 100vw;
  height: 100vh;
}

JavaScript

var map = new google.maps.Map($('.map')[0])
var marker = new google.maps.Marker({ map: map })
var chanId

try {
  query = new URLSearchParams(top.location.search)
	chanId = query.get('chanid')
} catch(e) {}

if (chanId) {
  $('.share').hide()
} else {
	chanId = 'map' + Math.round(Math.random()*1000)
  $('.url').val($('.url').val() + chanId)
  $('.map').hide()
}

function updatePosition(chanId) {
  navigator.geolocation.getCurrentPosition(position => {
    $.get('https://demo.httprelay.io/sync/'+chanId+'?lat='+position.coords.latitude+'&lng='+position.coords.longitude)
      .done((data, textStatus, request) => {
				let query = new URLSearchParams(request.getResponseHeader('Httprelay-Query'))
				let position = { lat: parseFloat(query.get('lat')), lng: parseFloat(query.get('lng'))}
        marker.setPosition(position)
      	map.setCenter(position)
      	map.setZoom(17)
        $('.share').hide()
        $('.map').show()
    }).always(() => setTimeout(() => updatePosition(chanId), 5000))
  });
}

updatePosition(chanId)