Last active
November 4, 2022 18:26
-
-
Save tophtucker/c675a1bb4186a333108ad1be724e7c7b to your computer and use it in GitHub Desktop.
Batterymap
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html> | |
<head> | |
<meta name="viewport" content="initial-scale=1.0, user-scalable=no"> | |
<meta charset="utf-8"> | |
<title>Batterymap</title> | |
<style> | |
html, body { | |
height: 100%; | |
margin: 0; | |
padding: 0; | |
} | |
#map { | |
height: 100%; | |
} | |
</style> | |
</head> | |
<body> | |
<div id="map"></div> | |
<script> | |
function initMap() { | |
var directionsService = new google.maps.DirectionsService; | |
var map = new google.maps.Map(document.getElementById('map'), { | |
zoom: 12, | |
center: {lat: 40.790278, lng: -73.959722} | |
}); | |
var infoWindow = new google.maps.InfoWindow({map: map}); | |
var destWindow = new google.maps.InfoWindow({map: map}); | |
// Try HTML5 geolocation. | |
if (navigator.geolocation) { | |
navigator.geolocation.getCurrentPosition(function(position) { | |
var pos = { | |
lat: position.coords.latitude, | |
lng: position.coords.longitude | |
}; | |
infoWindow.setPosition(pos); | |
infoWindow.setContent('From here, battery will lose…'); | |
destWindow.setPosition(pos) | |
destWindow.setContent('Drag map to destination') | |
map.setCenter(pos); | |
var timeout; | |
map.addListener('center_changed', function() { | |
clearTimeout(timeout) | |
timeout = window.setTimeout(update, 500); | |
}); | |
function update() { | |
var goTo = map.getCenter().toJSON(); | |
var driving, | |
transit, | |
walking; | |
var modes = {'DRIVING': undefined, 'TRANSIT': undefined, 'WALKING': undefined}; | |
Object.keys(modes).forEach(function(mode) { | |
getDistance(directionsService, pos, goTo, mode, function(time) { | |
modes[mode] = time; | |
render(); | |
}); | |
}) | |
function render() { | |
var html = Object.keys(modes).map(function(mode) { | |
return getBatteryFromTime(modes[mode]) + ' ' + mode.toLowerCase() | |
}).join('<br/>') | |
// destWindow.open(); | |
destWindow.setPosition(goTo); | |
destWindow.setContent(html); | |
destWindow.setZIndex(999); | |
} | |
} | |
}, function() { | |
handleLocationError(true, infoWindow, map.getCenter()); | |
}); | |
} else { | |
// Browser doesn't support Geolocation | |
handleLocationError(false, infoWindow, map.getCenter()); | |
} | |
} | |
function getDistance(directionsService, from, to, mode, callback) { | |
directionsService.route({ | |
origin: from, | |
destination: to, | |
travelMode: mode | |
}, function(response, status) { | |
if (status === 'OK') { | |
console.log(response) | |
if(response.routes && response.routes[0].legs && response.routes[0].legs[0].duration) { | |
callback(response.routes[0].legs[0].duration.value); | |
} else { | |
callback(false) | |
} | |
} else { | |
callback(false) | |
console.log('Directions request failed due to ' + status); | |
} | |
}); | |
} | |
function handleLocationError(browserHasGeolocation, infoWindow, pos) { | |
infoWindow.setPosition(pos); | |
infoWindow.setContent(browserHasGeolocation ? | |
'Error: The Geolocation service failed.' : | |
'Error: Your browser doesn\'t support geolocation.'); | |
} | |
function getBatteryFromTime(seconds) { | |
if(!seconds) return "?" | |
var iPhone7BatteryLifeInSeconds = 615 * 60; | |
return Math.round((seconds / iPhone7BatteryLifeInSeconds) * 100) + '%'; | |
} | |
</script> | |
<script async defer | |
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCHQK4s3qUUwAF5ADAoZ-qDoDMeg7Noso4&callback=initMap"> | |
</script> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment