Adds map rotation computation

Signed-off-by: Daniel Kastl <[email protected]>

Author: dkastl

app/controllers/.keep

@@ -12,13 +12,17 @@
         {}, { multiple: true, size: 5 } %>
       <br /><em><%= t :gtt_tile_sources_info %></em>
     </p>
+    <p>
+      <%= content_tag(:label, "Map rotation") %>
+      <%= number_field_tag('settings[project_map_rotation]', 0, min: 1, max: 360, size: 10, readonly: true ) %>
+      <br /><em><%= t :gtt_map_rotate_info %></em>
+    </p>
   </div>
 
   <div class="box">
     <%= map_form_field f, @form.map, bounds: nil, edit_mode: 'Polygon' %>
   </div>
 
-
   <%= submit_tag l(:button_save) %>
 
 <% end %>

app/helpers/.keep

@@ -50,6 +50,8 @@ en:
   gtt_tile_sources_select_xyz: "XYZ Tiles"
   gtt_tile_sources_load_example: "Load example configuration"
 
+  gtt_map_rotate_info: "Hold down <code>Shift+Alt</code> and drag to rotate."
+
   gtt_settings_general_center_lon: "Default map center longitude"
   gtt_settings_general_center_lat: "Default map center latitude"
   gtt_settings_general_zoom_level: "Default map zoom level"

app/models/.keep

@@ -120,7 +120,6 @@ export class GttClient {
       this.defaults.geocoder = JSON.stringify(quick_hack.geocoder)
     }
 
-
     this.contents = options.target.dataset
 
     // create map at first
@@ -134,6 +133,7 @@ export class GttClient {
         })
       ]),
       controls: control_defaults({
+        rotateOptions: {},
         attributionOptions: {
           collapsible: false
         }
@@ -212,8 +212,8 @@ export class GttClient {
       this.layerArray.forEach( (l:Layer) => {
           if( l.get("baseLayer") ) {
             this.map.addLayer(l)
-          } 
-        } 
+          }
+        }
       )
 
       var containsOverlay = false;
@@ -222,8 +222,8 @@ export class GttClient {
           if( !l.get("baseLayer") ) {
             this.map.addLayer(l)
             containsOverlay = true
-          } 
-        } 
+          }
+        }
       )
     }
 
@@ -287,8 +287,6 @@ export class GttClient {
       })
     }
 
-
-
     // For map div focus settings
     if (options.target) {
       if (options.target.getAttribute('tabindex') == null) {
@@ -320,6 +318,15 @@ export class GttClient {
     })
     this.toolbar.addControl(maximizeCtrl)
 
+    // Map rotation
+    this.map.getView().on('change:rotation', (evt) => {
+      const degrees = evt.target.getRotation() * 180 / Math.PI
+      document.querySelector('#settings_project_map_rotation').setAttribute(
+        'value',
+        String(Math.round(degrees % 360))
+      )
+    })
+
     if (this.contents.edit) {
       this.setControls(this.contents.edit.split(' '))
     } else if (this.contents.popup) {
@@ -398,7 +405,6 @@ export class GttClient {
     else {
       this.map.addControl(new LayerPopup())
     }
-        
 
     // Because Redmine filter functions are applied later, the Window onload
     // event provides a workaround to have filters loaded before executing