docker-osm/web/index.html

58 wiersze
1.4 KiB
HTML

<!DOCTYPE html><html><head>
<title>Docker OSM</title>
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" />
<style>
body {
padding: 0;
margin: 0;
}
html, body, #map {
height: 100%;
width: 100%;
background-color: #2b6adb;
}
#overlay{
position:absolute;
top:10px;
left:50px;
background-color:rgba(255, 255, 255, 0.7);
padding: 5px;
border: 1px solid;
border-radius: 2px;
z-index: 100;
}
</style>
</head>
<body>
<div id="map"></div>
<div id="overlay">timestamp</div>
<script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
<script>
var timestamp;
xmlhttp=new XMLHttpRequest();
xmlhttp.onreadystatechange=function() {
if (xmlhttp.readyState==4 && xmlhttp.status==200) {
timestamp = xmlhttp.responseText;
}
}
xmlhttp.open("GET", "settings/timestamp.txt", false );
xmlhttp.send();
document.getElementById('overlay').innerHTML = timestamp;
var map = L.map('map').setView([0, 0], 3);
var osm = L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png?').addTo(map);
var wms = L.tileLayer.wms("http://localhost:8198/", {
layers: 'osm_buildings20160720014515980',
format: 'image/png',
transparent: true,
attribution: "OpenStreetMap"
}).addTo(map);
var overlays = {
"OSM-Docker": wms,
"OSM-Tiles": osm
};
L.control.layers({}, overlays).addTo(map);
</script></body></html>