mathewbyrne/location.html

## location.html
<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>Navigation Test</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <script>
        var isTouchDevice = 'ontouchstart' in document.documentElement;
        window.onload = function () {
            var where = document.getElementById('where');
            var coordinates = document.getElementById('coordinates');
            where.addEventListener(isTouchDevice ? 'touchstart' : 'click', function (event) {
                event.preventDefault();
                where.setAttribute('disabled', '');
                window.navigator.geolocation.getCurrentPosition(function (position) {
                    coordinates.innerHTML = coordinates.innerHTML + "(" + position.coords.latitude + ", " + position.coords.longitude + ")\n";
                    where.removeAttribute('disabled');
                });
            });
        };
    </script>
    <link href="http://fonts.googleapis.com/css?family=Source+Sans+Pro" rel="stylesheet" type="text/css">
    <style>
        body {
            padding: 1em;
        }
        pre, button {
            display: block;
            width: 100%;
            -webkit-appearance: none;
            font-family: "Source Sans Pro", Helvetica, sans-serif;
            font-size: 100%;
            margin-bottom: 0.5em;
            border: none;
            box-sizing: border-box;
            border-radius: 3px;
            padding: 0.5em;
        }
        pre {
            background: #efefef;
            height: 20em;
            overflow: auto;
        }
        button {
            background-color: #adadad;
            color: white;
            padding: 0.5em;
        }
        button[disabled] {
            background-color: #efefef;
        }
    </style>
</head>
<body>
    <pre id="coordinates"></pre>
    <button id="where">Where am I?</button>
</body>
</html>
	<!doctype html>
	<html>
	<head>
	<meta charset="utf-8">
	<title>Navigation Test</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
	<script>
	var isTouchDevice = 'ontouchstart' in document.documentElement;
	window.onload = function () {
	var where = document.getElementById('where');
	var coordinates = document.getElementById('coordinates');
	where.addEventListener(isTouchDevice ? 'touchstart' : 'click', function (event) {
	event.preventDefault();
	where.setAttribute('disabled', '');
	window.navigator.geolocation.getCurrentPosition(function (position) {
	coordinates.innerHTML = coordinates.innerHTML + "(" + position.coords.latitude + ", " + position.coords.longitude + ")\n";
	where.removeAttribute('disabled');
	});
	});
	};
	</script>
	<link href="http://fonts.googleapis.com/css?family=Source+Sans+Pro" rel="stylesheet" type="text/css">
	<style>
	body {
	padding: 1em;
	}
	pre, button {
	display: block;
	width: 100%;
	-webkit-appearance: none;
	font-family: "Source Sans Pro", Helvetica, sans-serif;
	font-size: 100%;
	margin-bottom: 0.5em;
	border: none;
	box-sizing: border-box;
	border-radius: 3px;
	padding: 0.5em;
	}
	pre {
	background: #efefef;
	height: 20em;
	overflow: auto;
	}
	button {
	background-color: #adadad;
	color: white;
	padding: 0.5em;
	}
	button[disabled] {
	background-color: #efefef;
	}
	</style>
	</head>
	<body>
	<pre id="coordinates"></pre>
	<button id="where">Where am I?</button>
	</body>
	</html>