Allow keyboard movements on RegionChooser map

website/index.html

@@ -32,7 +32,7 @@
 		Left click on the map to create markers, when last marker meets first marker, it will form a polygon.
 		</p>
 	</div>
-        <div id="map" class="map"></div>
+        <div id="map" class="map" tabindex="0"></div>
 	<div id="side">
 		<input id="reset" value="Reset" type="button" class="navi" disabled/>
 		<input id="send" value="Send" type="button" class="navi" disabled/>

website/script/simstadt_openlayers.js

 //TODO: Add zoom to extent as control
-//TODO: Add keyboard controls . ol.interaction.KeyboardPan
 //TODO: Don't allow multiple sketch
 //TODO: Add text to citygml vector
 //TODO: Try to leave everything in 4326 
-//TODO: Gray buttons until polygon is closed
 
 var reset_btn = $('#reset')[0];
 var send_btn = $('#send')[0];
@@ -56,6 +54,9 @@ var intersections_layer = new ol.layer.Vector({
 var map = new ol.Map({
 	target : 'map',
 	layers : [ osm_layer, kml_layer, intersections_layer ],
+	interactions : ol.interaction.defaults({
+		keyboard : true
+	})
 });
 
 // The features are not added to a regular vector layer/source,
@@ -195,6 +196,7 @@ $('#reset').click(function() {
 		intersections.clear();
 		reset_btn.disabled = true;
 		send_btn.disabled = true;
+		focusOnMap();
 	}
 });
 
@@ -204,4 +206,12 @@ $('#send').click(function() {
 		dataProjection : ol.proj.get('EPSG:4326'),
 		featureProjection : ol.proj.get('EPSG:3857')
 	}));
+	focusOnMap();
 });
+
+function focusOnMap() {
+	$('#map').focus();
+	$('#map').scrollIntoView();
+}
+
+focusOnMap();