johan/brown.svg

## brown.svg

      
Display the source blob

    
Display the rendered blob

    
    Raw
  

              brown.svg
            
          
      Sorry, something went wrong. Reload?
      Sorry, we cannot display this file.
      Sorry, this file is invalid so it cannot be displayed.
      
          Viewer requires iframe.
      
    
## index.html
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>HTML5 GPS Plotter</title>
  <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="black">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div id="map"></div>
  <script src="https://maps.googleapis.com/maps/api/js?sensor=true"></script>
  <script src="index.js"></script>
  <script type="text/javascript">
    var _gaq = _gaq || [];
    _gaq.push(['_setAccount', 'UA-33539406-1']);
    _gaq.push(['_trackPageview']);
    (function() {
      var ga = document.createElement('script'); ga.async = true;
      ga.src = ('https:' == location.protocol ? 'https://ssl' : 'http://www')
             + '.google-analytics.com/ga.js';
      var oy = document.getElementsByTagName('script')[0];
      oy.parentNode.insertBefore(ga, oy);
    })();
  </script>
</body>
</html>

## index.js
var map
  , you
  , pos
  , t_0
  , log = ''
  , url = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAARCAYAAADdRIy+AAAAAXNSR0IArs4c6QAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9sBHxAxMpOb3XcAAAOBSURBVDjLfZRNa1xlGIav877nY2bOzJnMR77TNIkJpSpBW4qiGGJAECpSEFz0D/gDKrp9wVVBXPkLXLkrqBtBZKJFQaqghbZp09SkTUwyH5mvMzPnvHPOcZEUumj6wL17nmvz3PdtcMoopQRg27btdpYvXQSS7N9/3NZaB0BHKTV83p3xHJAFzFQWVj4bdPjonGsXisIwm35Iy2C40dON0VHrxurD9evAvlKqfypQKeW15l9d/enI+9qr+2fWXplmcbpA0UtT6wx48OSIu4/r3Nqqkjs3tvN+/uiat31vHagppRIA8xnYBPnShRub1reiUU0vX5gnPTlKfjzPzEiKIBPg4GDFNrlmwJ2bW7O981PfXM1mP7b73T+B/wDECSwTRdHi9/L8V9t399Le3BSMT0B+BDIukWkTp1ySfIF4bJzk7ByMlfn3zl76x/RrXwohlpRSRQCplDKAs9uzF6/+/Oveh1GpyOjSAsWJUUbyOTK2hU4EDS05HNocxDYHkaQRG9Dr03hULU8vz9e9o92ttbW1ugA8YGrTz7wT6JhkbJJBdoSelaMTSGoD2O1DLYB2CD1t03dKUJyAyUmCgWbTz6w4jlMA0ibgSim9Wms4S2EEcnk6Ikd7KKkDMoaUgC5QF9CS0MWEdB68IhQK1FrRDIICkDUBUwhh+M3Aw3XBcakmKUoGuAZEBlgG9CVUTWiY0JaAnYFUBtwsfifwyJMAlglorXXsOk6bSGbBJLIk94cwAM5YYNvQT6CewKEFiQNoEwwbTBs3JduABnwT8E3T9MuOfLzRjaeIYpAJ2jJ4aMC2AVb62FrBEGILsAGRQJxAklB2zZ1EJwOgJ4DOcDjcfSnT+8XRIQwGEA6ODWXAUELfPlZsnkRBAFpDEOBEmsW0fzMMwyqgZaVSYXV1NSyFh61mbumtvX5SJpuBnAupp04FQqAHBIAP1Jqwf8DreePepc5v16WU95VSwdN1P47jB5ed29fmDO1TrUOtDZ0TSPNEPU7e3YVagzmh/feSW58KITaUUl0ACVCpVKhUKv67b7+xP1/K/NXxs282+kEhiQEtIBTQS+BIw2ELeVDl5V536wNv+xPXf/K7Uqr+oraxgdF19/Lnjyz3is6mygeYaQwYJ+5b3aC2EHa+W/F/+AJoKKX0C+vrGbABpCzLyvqzK8uJIaPcTuWfMAw10D+tD/8H7d6IDx2EfHUAAAAASUVORK5CYII='
  , dot = 'brown.svg'
  , head = '["latitude","longitude","precision","time"]'
  , zoom
  , time
  , from
  ;

google.maps.event.addDomListener(window, 'load', init);

function init() {
  map = new google.maps.Map( document.getElementById('map')
                           , { zoom: zoom
                             , mapTypeId: google.maps.MapTypeId.ROADMAP
                           //styles: [{
                           //  stylers: [{saturation: -100}]
                           //}]
                             });

  if (navigator.geolocation)
    navigator.geolocation.watchPosition(gotPosition, function() {
      noGeolocation('Error: The Geolocation service failed.');
    }, { enableHighAccuracy: true, maximumAge: 10e3, timeout: 20e3 });
  else
    noGeolocation('Error: Your browser doesn\'t support geolocation.');
}

function plot(pos) {
  new google.maps.Marker({ position: pos
                         , clickable: false
                         , icon: new google.maps.MarkerImage(dot, null, null,
                                                             p(3, 3), s(6, 6))
                         , map: map
                         , zIndex: 0
                         });
}

function gotPosition(position) {
  var at  = position.coords
    , off = at.accuracy
    , z
    ;

  pos = ll(at.latitude, at.longitude);
  if (you) you.setPosition(pos); else {
    t_0 = Math.round(+new Date / 1000);
    you = new google.maps.Marker({ map: map
                                 , zIndex: 1
                                 , position: pos
                                 , icon: marker(url, s(20, 17), p(10, 8))
                                 });
    google.maps.event.addListener(you, 'click', function() {
      location = 'mailto:?subject=GPS%20Track&body='
               + encodeURIComponent(log + ' ]\n}\n');
    });
  }
  if (!zoom) map.setCenter(pos);

  // zoom in, as precision improves (or out again)
  if (off > 2e3) z = 15;
  if (off < 2e3) z = 16;
  if (off < 900) z = 17;
  if (off < 100) z = 18;
  if (z !== zoom) map.setZoom(zoom = z);

  plot(pos);
  map.panTo(pos);
  save(at);
}

function noGeolocation(message) {
  var opts = { map: map
             , position: ll(60, 105)
             , content: message
             }
    , info = new google.maps.InfoWindow(opts);
  map.setCenter(opts.position);
}

function s(w, h) { return new google.maps.Size(w, h); }
function p(x, y) { return new google.maps.Point(x, y); }
function ll(y, x) { return new google.maps.LatLng(y, x); }
function marker(url, size, hotspot, origin) {
  return new google.maps.MarkerImage(url, size, origin || p(0, 0), hotspot);
}

function save(at) {
  var lat = at.latitude.toFixed(6) // decimeter precision should be quite enough
    , lng = at.longitude.toFixed(6)
    , pre = at.accuracy.toFixed(0)
    ;
  time = Math.round(new Date / 1000) - t_0;
  log += (log ? ' ,' : '{"time":'+ t_0 +'\n,"head":\n '+ head +'\n,"data":\n [')
       + '[' + lat +','+ lng +','+ pre +','+ time +']\n';
}

## style.css
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

#map {
  height: 100%;
}

@media print {
  html, body {
    height: auto;
  }

  #map {
    height: 650px;
  }
}
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="UTF-8">
	<title>HTML5 GPS Plotter</title>
	<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="apple-mobile-web-app-status-bar-style" content="black">
	<link rel="stylesheet" href="style.css">
	</head>
	<body>
	<div id="map"></div>
	<script src="https://maps.googleapis.com/maps/api/js?sensor=true"></script>
	<script src="index.js"></script>
	<script type="text/javascript">
	var _gaq = _gaq \|\| [];
	_gaq.push(['_setAccount', 'UA-33539406-1']);
	_gaq.push(['_trackPageview']);
	(function() {
	var ga = document.createElement('script'); ga.async = true;
	ga.src = ('https:' == location.protocol ? 'https://ssl' : 'http://www')
	+ '.google-analytics.com/ga.js';
	var oy = document.getElementsByTagName('script')[0];
	oy.parentNode.insertBefore(ga, oy);
	})();
	</script>
	</body>
	</html>
	var map
	, you
	, pos
	, t_0
	, log = ''
	, url = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAARCAYAAADdRIy+AAAAAXNSR0IArs4c6QAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9sBHxAxMpOb3XcAAAOBSURBVDjLfZRNa1xlGIav877nY2bOzJnMR77TNIkJpSpBW4qiGGJAECpSEFz0D/gDKrp9wVVBXPkLXLkrqBtBZKJFQaqghbZp09SkTUwyH5mvMzPnvHPOcZEUumj6wL17nmvz3PdtcMoopQRg27btdpYvXQSS7N9/3NZaB0BHKTV83p3xHJAFzFQWVj4bdPjonGsXisIwm35Iy2C40dON0VHrxurD9evAvlKqfypQKeW15l9d/enI+9qr+2fWXplmcbpA0UtT6wx48OSIu4/r3Nqqkjs3tvN+/uiat31vHagppRIA8xnYBPnShRub1reiUU0vX5gnPTlKfjzPzEiKIBPg4GDFNrlmwJ2bW7O981PfXM1mP7b73T+B/wDECSwTRdHi9/L8V9t399Le3BSMT0B+BDIukWkTp1ySfIF4bJzk7ByMlfn3zl76x/RrXwohlpRSRQCplDKAs9uzF6/+/Oveh1GpyOjSAsWJUUbyOTK2hU4EDS05HNocxDYHkaQRG9Dr03hULU8vz9e9o92ttbW1ugA8YGrTz7wT6JhkbJJBdoSelaMTSGoD2O1DLYB2CD1t03dKUJyAyUmCgWbTz6w4jlMA0ibgSim9Wms4S2EEcnk6Ikd7KKkDMoaUgC5QF9CS0MWEdB68IhQK1FrRDIICkDUBUwhh+M3Aw3XBcakmKUoGuAZEBlgG9CVUTWiY0JaAnYFUBtwsfifwyJMAlglorXXsOk6bSGbBJLIk94cwAM5YYNvQT6CewKEFiQNoEwwbTBs3JduABnwT8E3T9MuOfLzRjaeIYpAJ2jJ4aMC2AVb62FrBEGILsAGRQJxAklB2zZ1EJwOgJ4DOcDjcfSnT+8XRIQwGEA6ODWXAUELfPlZsnkRBAFpDEOBEmsW0fzMMwyqgZaVSYXV1NSyFh61mbumtvX5SJpuBnAupp04FQqAHBIAP1Jqwf8DreePepc5v16WU95VSwdN1P47jB5ed29fmDO1TrUOtDZ0TSPNEPU7e3YVagzmh/feSW58KITaUUl0ACVCpVKhUKv67b7+xP1/K/NXxs282+kEhiQEtIBTQS+BIw2ELeVDl5V536wNv+xPXf/K7Uqr+oraxgdF19/Lnjyz3is6mygeYaQwYJ+5b3aC2EHa+W/F/+AJoKKX0C+vrGbABpCzLyvqzK8uJIaPcTuWfMAw10D+tD/8H7d6IDx2EfHUAAAAASUVORK5CYII='
	, dot = 'brown.svg'
	, head = '["latitude","longitude","precision","time"]'
	, zoom
	, time
	, from
	;

	google.maps.event.addDomListener(window, 'load', init);

	function init() {
	map = new google.maps.Map( document.getElementById('map')
	, { zoom: zoom
	, mapTypeId: google.maps.MapTypeId.ROADMAP
	//styles: [{
	// stylers: [{saturation: -100}]
	//}]
	});

	if (navigator.geolocation)
	navigator.geolocation.watchPosition(gotPosition, function() {
	noGeolocation('Error: The Geolocation service failed.');
	}, { enableHighAccuracy: true, maximumAge: 10e3, timeout: 20e3 });
	else
	noGeolocation('Error: Your browser doesn\'t support geolocation.');
	}

	function plot(pos) {
	new google.maps.Marker({ position: pos
	, clickable: false
	, icon: new google.maps.MarkerImage(dot, null, null,
	p(3, 3), s(6, 6))
	, map: map
	, zIndex: 0
	});
	}

	function gotPosition(position) {
	var at = position.coords
	, off = at.accuracy
	, z
	;

	pos = ll(at.latitude, at.longitude);
	if (you) you.setPosition(pos); else {
	t_0 = Math.round(+new Date / 1000);
	you = new google.maps.Marker({ map: map
	, zIndex: 1
	, position: pos
	, icon: marker(url, s(20, 17), p(10, 8))
	});
	google.maps.event.addListener(you, 'click', function() {
	location = 'mailto:?subject=GPS%20Track&body='
	+ encodeURIComponent(log + ' ]\n}\n');
	});
	}
	if (!zoom) map.setCenter(pos);

	// zoom in, as precision improves (or out again)
	if (off > 2e3) z = 15;
	if (off < 2e3) z = 16;
	if (off < 900) z = 17;
	if (off < 100) z = 18;
	if (z !== zoom) map.setZoom(zoom = z);

	plot(pos);
	map.panTo(pos);
	save(at);
	}

	function noGeolocation(message) {
	var opts = { map: map
	, position: ll(60, 105)
	, content: message
	}
	, info = new google.maps.InfoWindow(opts);
	map.setCenter(opts.position);
	}

	function s(w, h) { return new google.maps.Size(w, h); }
	function p(x, y) { return new google.maps.Point(x, y); }
	function ll(y, x) { return new google.maps.LatLng(y, x); }
	function marker(url, size, hotspot, origin) {
	return new google.maps.MarkerImage(url, size, origin \|\| p(0, 0), hotspot);
	}

	function save(at) {
	var lat = at.latitude.toFixed(6) // decimeter precision should be quite enough
	, lng = at.longitude.toFixed(6)
	, pre = at.accuracy.toFixed(0)
	;
	time = Math.round(new Date / 1000) - t_0;
	log += (log ? ' ,' : '{"time":'+ t_0 +'\n,"head":\n '+ head +'\n,"data":\n [')
	+ '[' + lat +','+ lng +','+ pre +','+ time +']\n';
	}
	html, body {
	height: 100%;
	margin: 0;
	padding: 0;
	}

	#map {
	height: 100%;
	}

	@media print {
	html, body {
	height: auto;
	}

	#map {
	height: 650px;
	}
	}