recorder/docroot/map/index.html
2018-11-22 23:01:48 +01:00

65 lines
2.2 KiB
HTML

<!DOCTYPE html>
<html>
<head>
<title>GeoJSON track</title>
<meta name="viewport" content="width=device-width, height=device-height, user-scalable=no, initial-scale=1.0" />
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes">
<link rel="icon" sizes="192x192" href="../static/recorder.png" />
<link rel="apple-touch-icon" href="../static/recorder.png" />
<style type="text/css">
html { height: 100%; }
body { height: 100%; margin: 0px; padding: 0px; }
#map-canvas { height: 100%; }
body { font-size: 80%; padding: 0; margin: 0px; }
</style>
<script
src="https://code.jquery.com/jquery-3.1.1.min.js"
integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
crossorigin="anonymous">
</script>
<script src="../static/js/mustache.js"></script>
<script src="../static/js/moment.min.js"></script>
<script src="map_google.js"></script>
<script src="map_leaflet.js"></script>
<script src="../static/apikey.js"></script>
<script>
function loadMapsAPI() {
var script = document.createElement('script');
script.type = 'text/javascript';
if (typeof apiKey != 'undefined' && apiKey != "" ) {
script.src = 'https://maps.googleapis.com/maps/api/js?v=3' +
'&key=' + apiKey +'&callback=initialize_googlemaps';
} else {
$("head").append("<link rel='stylesheet' href='/static/leaflet/leaflet.css' type='text/css' />");
// Dynamic script loading from http://stackoverflow.com/a/8578840
(function(d, s, id){
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)){ return; }
js = d.createElement(s); js.id = id;
js.onload = function(){
initialize_leaflet();
};
js.src = "/static/leaflet/leaflet.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'leaflet'));
}
document.body.appendChild(script);
}
document.addEventListener("DOMContentLoaded", function(event) {
loadMapsAPI();
});
</script>
</head>
<body>
<div id="map-canvas"></div>
</body>
</html>