diff --git a/map/static/map.html b/map/static/map.html
index 092132a..984578d 100644
--- a/map/static/map.html
+++ b/map/static/map.html
@@ -1,36 +1,53 @@
-<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.3/leaflet.css" />
-<script src="http://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.3/leaflet.js"></script>
-<div id="map" style="width: 100%; height: 100%;"></div>
+<!DOCTYPE html>
+<html>
+<head>
+	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
+	<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.3/leaflet.css" />
+	<script src="http://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.3/leaflet.js"></script>
+	<style type="text/css">
+		body {
+			padding: 0;
+			margin: 0;
+		}
+		html, body, #map {
+			height: 100%;
+		}
+	</style>
+</head>
+<body>
+	<div id="map"></div>
 
-<script type="text/javascript">
-var map = L.map('map').setView([49.46200, 11.1030], 17);
-L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
-    attribution: 'Map data &copy; <a href="https://openstreetmap.org">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>',
-    maxNativeZoom: 19,
-    maxZoom: 22
-}).addTo(map);
-var links = new L.TileLayer('http://localhost:8000/{z}/{x}/{y}.png', {maxNativeZoom: 22, maxZoom: 22, attribution: "", maximumAge: 1000*3600*24*10}).addTo(map);
-var routers = new L.TileLayer('http://localhost:8001/{z}/{x}/{y}.png', {maxNativeZoom: 22, maxZoom: 22, attribution: "", maximumAge: 1000*3600*24*10}).addTo(map);
-layersControl = new L.Control.Layers({}, {"links": links, "routers": routers});
-map.addControl(layersControl);
-//var marker = L.marker([49.47502, 10.99253]).addTo(map);
+	<script type="text/javascript">
+	var map = L.map('map').setView([49.46200, 11.1030], 17);
+	L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
+		attribution: 'Map data &copy; <a href="https://openstreetmap.org">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>',
+		maxNativeZoom: 19,
+		maxZoom: 22
+	}).addTo(map);
+	var links = new L.TileLayer('http://localhost:8000/{z}/{x}/{y}.png', {maxNativeZoom: 22, maxZoom: 22, attribution: "", maximumAge: 1000*3600*24*10}).addTo(map);
+	var routers = new L.TileLayer('http://localhost:8001/{z}/{x}/{y}.png', {maxNativeZoom: 22, maxZoom: 22, attribution: "", maximumAge: 1000*3600*24*10}).addTo(map);
+	layersControl = new L.Control.Layers({}, {"links": links, "routers": routers});
+	map.addControl(layersControl);
+	//var marker = L.marker([49.47502, 10.99253]).addTo(map);
 
-map.on('click', function(e) {
-	console.log(e.latlng);
-	console.log(map.getZoom());
-	// height = width of world in px
-	size_of_world_in_px = map.options.crs.scale(map.getZoom());
-	deg_lng_per_pix = 360 / size_of_world_in_px;
-	deg_lat_per_pix = 180 / size_of_world_in_px;
-	/*
-	db.routers.create_index([("location", "2dsphere")])
-	49,11
-	50,12
-	-> difference 1,1
-	-> in pix at zoom level 0 1.4,0.7
-	-> pythagoras -> distance in px
-	*/
-});
+	map.on('click', function(e) {
+		console.log(e.latlng);
+		console.log(map.getZoom());
+		// height = width of world in px
+		size_of_world_in_px = map.options.crs.scale(map.getZoom());
+		deg_lng_per_pix = 360 / size_of_world_in_px;
+		deg_lat_per_pix = 180 / size_of_world_in_px;
+		/*
+		db.routers.create_index([("location", "2dsphere")])
+		49,11
+		50,12
+		-> difference 1,1
+		-> in pix at zoom level 0 1.4,0.7
+		-> pythagoras -> distance in px
+		*/
+	});
 
 
-</script>
+	</script>
+</body>
+</html>
