Skip to content

Instantly share code, notes, and snippets.

@psychemedia

psychemedia/index.html

Last active December 15, 2016 12:42
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save psychemedia/b3fba6659815c500711da1e9ea439307 to your computer and use it in GitHub Desktop.
Save psychemedia/b3fba6659815c500711da1e9ea439307 to your computer and use it in GitHub Desktop.
Download ZIP
Geo-demo- - browser
Raw
index.html
<head>
<script src="https://code.jquery.com/jquery-latest.min.js"></script>
</head>
<body><h1>Example / Draft Activities</h1>
<div><em>This page is a placeholder containing drafts of, and links to, several interactive activities.</em></div>
<hr/>
<h2>Activity: Browser location lookup</h2>
<div>Click the <em>Try it</em> button to get your coordinates from the browser location service.</div>
<div>You will need to grant the browser permission to use location services. Note this is a black box lookup - you don't get to see what information the browser passes to the geolocation lookup.</div>
<button onclick="getLocation()" id='geolocate'>Browser geolocate...</button>
<div id="demo"></div><br/>
<hr/>
<h2>Activity: Mapping demo</h2>
<div><a href='mapping.html'>Mapping demo</a></div>
<hr/>
<h2>Activity: Geocoding demo</h2>
<div>Enter an address to try the Google Maps API geocoder:</div>
<input type="text" id="query" size=80 /><button id='geocode'>Get Coordinates for geocoded address</button>
<div id="results"></div>
<hr/>
<h2>Activity: Postcode Geocoding demo</h2>
<div>Enter a postcode to try the postcodes.io API geocoder:</div>
<input type="text" id="querypc" size=80 /><button id='geocodepc'>Get Coordinates for geocoded postcode</button>
<div id="resultspc"></div>
<hr/>
<h2>Activity: IP based Geolookup</h2>
<div>IP based geolookup</div>
<button id='geoip'>Get Coordinates for IP address</button>
<div id="resultsip"></div>
<script language='javascript'>
//Define a function to call the browser geolocation service
function getLocation() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showPosition);
} else {
$('#demo').append('Geolocation is not supported by this browser.')
}
}
//Define a function to display the current location according to the browser geolocation service
function showPosition(position) {
$('#demo').append( 'Latitude: ' + position.coords.latitude +
'<br/>Longitude: ' + position.coords.longitude
)
}
$(document).ready(function(){
$("#geocode").click(function(){
//The home of the Google maps geocoder API
var gmapsurl="https://maps.googleapis.com/maps/api/geocode/json";
var query = $("#query").val()
$.getJSON(gmapsurl,{ address: query, sensor: "false"}, function(json){
//Display the latitude and longitude
$('#results').append('<div><p>Co-ordinates for '+query+'</p>');
$('#results').append('<ul><li>Latitude : ' + json.results[0].geometry.location.lat+ '</li>' +
'<li>Longitude: ' + json.results[0].geometry.location.lng+ '</li></ul></div>'+'<div>Raw JSON response:<br/><code>'+JSON.stringify(json)+'</code></div>');
});
});
/* $("#geocodepc2").click(function(){
var pcurl="https://api.postcodes.io/postcodes/"+$("#querypc").val();
var querypc = $("#querypc").val()
$.getJSON(pcurl, function(json){
//Display the latitude and longitude
$('#resultspc').append('<div><p>Co-ordinates for '+querypc+'</p>');
$('#resultspc').append('<ul><li>Latitude : ' + json.result.latitude+ '</li>' +
'<li>Longitude: ' + json.result.longitude+ '</li></ul></div>');
});
});
*/
$("#geocodepc").click(function(){
$.ajax({url: "https://api.postcodes.io/postcodes/"+$("#querypc").val(),
type: "GET",
success: function(json) {
$('#resultspc').append('<div><p>Co-ordinates for '+$("#querypc").val()+'</p>');
$('#resultspc').append('<ul><li>Latitude : ' + json.result.latitude+ '</li>' +
'<li>Longitude: ' + json.result.longitude+ '</li></ul></div>'+'<div>Raw JSON response:<br/><code>'+JSON.stringify(json)+'</code></div>');
},
error: function(data) {
console.error(data);
}
});
});
$("#geoip").click(function(){
$.ajax({url: "https://freegeoip.net/json/",
type: "GET",
success: function(json) {
$('#resultsip').append('<div><p>Co-ordinates for '+json.ip+' registered in '+json.city+', '+json.country_name+'</p>');
$('#resultsip').append('<ul><li>Latitude : ' + json.latitude+ '</li>' +
'<li>Longitude: ' + json.longitude+ '</li></ul></div>' +'<div>Raw JSON response:<br/><code>'+JSON.stringify(json)+'</code></div>');
},
error: function(data) {
console.error(data);
}
});
})
});
</script>
<hr/>
<h2>Other demos</h2>
<ul><li><a href='mobile_browser.html'>mobile sensors demo</a> (via <em>https://github.com/csatarij/html5-sensor-demo</em>))</li></ul></li></ul></div>
<hr/>
</body>
Raw
mapping.html
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.3/leaflet.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Leaflet.awesome-markers/2.0.2/leaflet.awesome-markers.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet.markercluster/0.4.0/leaflet.markercluster-src.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet.markercluster/0.4.0/leaflet.markercluster.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.3/leaflet.css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Leaflet.awesome-markers/2.0.2/leaflet.awesome-markers.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet.markercluster/0.4.0/MarkerCluster.Default.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet.markercluster/0.4.0/MarkerCluster.css" />
<link rel="stylesheet" href="https://raw.githubusercontent.com/python-visualization/folium/master/folium/templates/leaflet.awesome.rotate.css" />
<style>
html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
#map {
position:absolute;
top:0;
bottom:0;
right:0;
left:0;
}
</style>
<style> #map_demo {
position : relative;
width : 500.0px;
height: 800.0px;
left: 0.0%;
top: 0.0%;
}
</style>
</head>
<body>
<div class="folium-map" id="map_demo" ></div>
<script>
var southWest = L.latLng(-90, -180);
var northEast = L.latLng(90, 180);
var bounds = L.latLngBounds(southWest, northEast);
var map_demo = L.map('map_demo', {
center:[55,-3],
zoom: 6,
maxBounds: bounds,
layers: [],
crs: L.CRS.EPSG3857
});
var tile_layer_demo = L.tileLayer(
'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
{
maxZoom: 18,
minZoom: 1,
attribution: 'Data by <a href="http://openstreetmap.org">OpenStreetMap</a>, under <a href="http://www.openstreetmap.org/copyright">ODbL</a>.',
detectRetina: false
}
).addTo(map_demo);
var marker_1 = L.marker(
[51.493429,-0.169101],
{
icon: new L.Icon.Default()
}
)
.addTo(map_demo);
</script>
</body>
</html>
Raw
mobile_browser.html
<!DOCTYPE html>
<!--
* @file html5demo.html
* @author Csatári János
*
* Demonstrating the HTML5+Javascript capabilities of accessing the sensors of a mobile device.
* Tested on Mozilla Firefox for Android 24.0
-->
<html>
<head>
<title>HTML5 sensor demonstration</title>
<meta content="text/html; charset=utf-8" http-equiv="Content-type">
<meta name="viewport" content="width=device-width" />
</head>
<body>
<button id="geolocation" onclick="geolocation(false)" style="font-size:150%">Geolocation</button>
<button id="geolocationha" onclick="geolocation(true)" style="font-size:150%">Geolocation - High Accuracy</button>
<button id="vibration" onclick="vibrate()" style="font-size:150%">Vibrate</button>
<button id="position" onclick="position()" style="font-size:150%">Position</button>
<button id="acceleration" onclick="acceleration()" style="font-size:150%">Acceleration</button>
<button id="battery" onclick="battery()" style="font-size:150%">Battery</button>
<button id="devicelight" onclick="devicelight()" style="font-size:150%">Device Light</button>
<button id="lightlevel" onclick="lightlevel()" style="font-size:150%">Light Level</button>
<button id="deviceproximity" onclick="deviceproximity()" style="font-size:150%">Device Proximity</button>
<button id="userproximity" onclick="userproximity()" style="font-size:150%">User Proximity</button>
<button id="camera" onclick="camera()" style="font-size:150%">Start Camera</button>
<input type=file accept=image/* capture=camera>Take a photo</input>
<p id="output"></p>
<video id="video"></video>
<script type="text/javascript">
var x=document.getElementById("output");
var posEnabl = false, accEnabl = false, devicelightEnabl = false, lightlevelEnabl = false, deviceproximityEnabl = false, userproximityEnabl = false;
var posHandler = function(event) {
x.innerHTML='Position <br/> Alpha: ' + event.alpha + ' <br/> Beta: ' + event.beta + ' <br/> Gamma: ' + event.gamma;
}
var accHandler = function(event) {
x.innerHTML='Acceleration <br/> X: ' + event.acceleration.x + '<br/> Y: ' + event.acceleration.y + '<br/> Z: ' + event.acceleration.z + '<br/>' +
'Acceleration including gravity <br/> X: ' + event.accelerationIncludingGravity.x + '<br/> Y: ' + event.accelerationIncludingGravity.y + '<br/> Z: ' + event.accelerationIncludingGravity.z + '<br/>' +
'Rotation rate <br/> Alfa: ' + event.rotationRate.alpha + '<br/> Béta: ' + event.rotationRate.beta + '<br/> Gamma: ' + event.rotationRate.gamma + '<br/>' +
'Interval: ' + event.interval;
}
var devicelightHandler = function(event) {
x.innerHTML='Device light: ' + event.value;
}
var lightlevelHandler = function(event) {
x.innerHTML='Light level: ' + event.value;
}
var deviceproximityHandler = function(event) {
x.innerHTML='Device proximity value: ' + event.value + ', min: ' + event.min + ', max: ' + event.max;
}
var userproximityHandler = function(event) {
x.innerHTML='User proximity: ' + event.near;
}
function geolocation(accuracy) {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(success, fail, {enableHighAccuracy:accuracy});
} else {
fail();
}
function success(position) {
x.innerHTML='Latitude: ' + position.coords.latitude +
', Longitude: ' + position.coords.longitude;
}
function fail() {
x.innerHTML='Error during reading location data!';
}
}
function vibrate() {
navigator.vibrate(1000);
}
window.addEventListener("compassneedscalibration", function(event) {
alert('Compass needs recalibration! Wave the device in an eight-figure!');
event.preventDefault();
}, false);
function position() {
if (posEnabl) {
window.removeEventListener("deviceorientation", posHandler, false);
posEnabl = false;
x.innerHTML='';
} else {
window.addEventListener("deviceorientation", posHandler, false);
posEnabl = true;
}
}
function acceleration() {
if (accEnabl) {
window.removeEventListener("devicemotion", accHandler, false);
accEnabl = false;
x.innerHTML='';
} else {
window.addEventListener("devicemotion", accHandler, false);
accEnabl = true;
}
}
function battery() {
var battery = navigator.battery || navigator.webkitBattery;
x.innerHTML='Battery Status: ' + battery.level;
}
function devicelight() {
if (devicelightEnabl) {
window.removeEventListener("devicelight", devicelightHandler, false);
devicelightEnabl = false;
x.innerHTML='';
} else {
window.addEventListener("devicelight", devicelightHandler, false);
devicelightEnabl = true;
}
}
function lightlevel() {
if (lightlevelEnabl) {
window.removeEventListener("lightlevel", lightlevelHandler, false);
lightlevelEnabl = false;
x.innerHTML='';
} else {
window.addEventListener("lightlevel", lightlevelHandler, false);
lightlevelEnabl = true;
}
}
function deviceproximity() {
if (deviceproximityEnabl) {
window.removeEventListener("deviceproximity", deviceproximityHandler, false);
deviceproximityEnabl = false;
x.innerHTML='';
} else {
window.addEventListener("deviceproximity", deviceproximityHandler, false);
deviceproximityEnabl = true;
}
}
function userproximity() {
if (userproximityEnabl) {
window.removeEventListener("userproximity", userproximityHandler, false);
userproximityEnabl = false;
x.innerHTML='';
} else {
window.addEventListener("userproximity", userproximityHandler, false);
userproximityEnabl = true;
}
}
function camera() {
var streaming = false,
video = document.querySelector('#video'),
width = 320,
height = 0;
navigator.getMedia = ( navigator.getUserMedia ||
navigator.webkitGetUserMedia ||
navigator.mozGetUserMedia ||
navigator.msGetUserMedia);
navigator.getMedia(
//constraints
{
video: true,
audio: true
},
//successCallback
function(stream) {
if (navigator.mozGetUserMedia) {
video.mozSrcObject = stream;
} else {
var vendorURL = window.URL || window.webkitURL;
video.src = vendorURL.createObjectURL(stream);
}
video.play();
},
//errorCallback
function(err) {
alert('The following error occurred: ' + err);
}
);
video.addEventListener('canplay', function(ev){
if (!streaming) {
height = video.videoHeight / (video.videoWidth/width);
video.setAttribute('width', width);
video.setAttribute('height', height);
streaming = true;
}
}, false);
}
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment