Adds rotation settings

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

Author: dkastl

app/views/projects/settings/_gtt.html.erb

@@ -14,7 +14,7 @@
     </p>
     <p>
       <%= content_tag(:label, l(:gtt_map_rotate_label)) %>
-      <%= number_field_tag('gtt_configuration[map_rotation]', @project.map_rotation, min: 1, max: 360, size: 10 ) %>
+      <%= number_field_tag('gtt_configuration[map_rotation]', @project.map_rotation, min: 0, max: 359, size: 10, readonly: true ) %>
       <br /><em><%= t :gtt_map_rotate_info_html  %></em>
     </p>
   </div>

config/locales/en.yml

@@ -53,7 +53,7 @@ en:
   gtt_tile_sources_load_example: "Load example configuration."
 
   gtt_map_rotate_label: "Map rotation"
-  gtt_map_rotate_info_html: "Hold down <code>Shift+Alt</code> and drag to rotate."
+  gtt_map_rotate_info_html: "Hold down <code>Shift+Alt</code> and drag the map to rotate."
 
   gtt_settings_general_center_lon: "Default map center longitude"
   gtt_settings_general_center_lat: "Default map center latitude"

src/components/gtt-client.ts

@@ -335,24 +335,19 @@ export class GttClient {
     this.toolbar.addControl(maximizeCtrl)
 
     // Map rotation
-    function radiansToDegrees(radians:number) {
-      let degrees = radians * (180 / Math.PI)
-      degrees = (degrees % 360 + 360) % 360
-      return degrees
-    }
-
-    function degreesToRadians(degrees:number) {
-      return degrees * (Math.PI / 180)
-    }
-
-    const rotation_field = document.querySelector('#gtt_configuration_map_rotation')
+    const rotation_field = document.querySelector('#gtt_configuration_map_rotation') as HTMLElement
     if (rotation_field !== null) {
       this.map.getView().on('change:rotation', (evt) => {
         rotation_field.setAttribute(
           'value',
           String(Math.round(radiansToDegrees(evt.target.getRotation())))
         )
       })
+
+      // TODO: remove readonly flag from field and update map on input
+      // rotation_field.addEventListener("oninput", (evt) => {
+      //   console.log(evt)
+      // })
     }
 
     if (this.contents.edit) {
@@ -849,7 +844,8 @@ export class GttClient {
       // Avoid flicker (map move)
       center: center,
       zoom: parseInt(this.defaults.zoom),
-      maxZoom: parseInt(this.defaults.maxzoom) // applies for Mierune Tiles
+      maxZoom: parseInt(this.defaults.maxzoom), // applies for Mierune Tiles
+      rotation: degreesToRadians(parseInt(this.map.getTargetElement().getAttribute("data-rotation")))
     })
     this.map.setView(view)
   }
@@ -1382,6 +1378,16 @@ const getCookie = (cname:string):string => {
   return ''
 }
 
+const radiansToDegrees = (radians: number) => {
+  let degrees = radians * (180 / Math.PI)
+  degrees = (degrees % 360 + 360) % 360
+  return degrees
+}
+
+const degreesToRadians = (degrees: number) => {
+  return degrees * (Math.PI / 180)
+}
+
 const getMapSize = (map: Map) => {
   let size = map.getSize()
   if (size.length === 2 && size[0] <= 0 && size[1] <= 0) {