Link location viewer

Httprelay.io link communication method example

by Jonas Jasas

HTML

<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB0vbY3Fy-xQRr4WgqPJ_jECC_D0vRprXc"></script>
<div class="share">
  <h1>Location viewer</h1>
  <h2><a href="https://httprelay.io">Httprelay.io</a> link communication method example</h2>
  <label class="">
    Share this link with someone on mobile device to track his/her location in real time:<br/>
    <input type="text" class="url" size="50" readonly value="https://fiddle.jshell.net/jasajona/dr760w8L/show/?chanid=">
  </label>
  <p><a href="https://jsfiddle.net/jasajona/dr760w8L/">Tracker 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>
<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 = 'map' + Math.round(Math.random()*1000)
$('.url').val($('.url').val() + chanId)
$('.map').hide()

function getPosition(chanId) {
  $.get('https://demo.httprelay.io/link/' + chanId)
    .done(data => {
    	let pos = {lat: parseFloat(data.split('|')[0]), lng: parseFloat(data.split('|')[1])};
      marker.setPosition(pos)
      map.setCenter(pos)
      map.setZoom(17)
      $('.share').hide()
      $('.map').show()
  	}).always(() => getPosition(chanId))
}

getPosition(chanId)