Merge pull request #79 from thekid/feature/map-interactions

Explicitely set map interactions

Author: thekid

src/main/handlebars/content.handlebars

@@ -27,7 +27,7 @@ parent: feed
         {{count item.views '' '(Eine Ansicht)' '(# Ansichten)'}}
       </div>
 
-      <div id="map" tabindex="1">
+      <div id="map" tabindex="0">
         <div class="popup"></div>
       </div>
 

src/main/handlebars/journey.handlebars

@@ -29,7 +29,7 @@ parent: feed
       </div>
       {{> partials/images in=journey first='true' style='overview'}}
 
-      <div id="map" tabindex="1">
+      <div id="map" tabindex="0">
         <div class="popup"></div>
       </div>
 

src/main/handlebars/journeys.handlebars

@@ -11,7 +11,7 @@
     {{/with}}
   {{/inline}}
   {{#*inline "main"}}
-    <div id="map" class="full" tabindex="1">
+    <div id="map" class="full" tabindex="0">
       <div class="popup"></div>
     </div>
 

src/main/js/mapping.js

@@ -28,12 +28,19 @@ class Mapping {
 
   /** Escape input for use in HTML */
   html(input) {
-    return input.replace(/[<>&]/g, c => '&#' + c.charCodeAt(0) + ';');
+    return input?.replace(/[<>&]/g, c => '&#' + c.charCodeAt(0) + ';');
   }
 
   /** Project this map on to a given DOM element */
   project($element, connect) {
     const map = new ol.Map({
+      interactions: [
+        new ol.interaction.DragPan(),
+        new ol.interaction.PinchZoom(),
+        new ol.interaction.MouseWheelZoom({condition: event => event.originalEvent.ctrlKey}),
+        new ol.interaction.KeyboardPan(),
+        new ol.interaction.KeyboardZoom(),
+      ],
       target: $element,
       layers: [new ol.layer.Tile({source: new ol.source.OSM()})]
     });