From 0f7a4c4909b9105795860f98a4e7eabfdbdf5988 Mon Sep 17 00:00:00 2001
From: Matthew Landauer <matthew@openaustralia.org>
Date: Sat, 8 Sep 2012 12:38:30 +1000
Subject: [PATCH] Move maps and streetview initialisation to its own js file

---
 app/views/applications/show.html.haml | 44 ++-------------------------
 public/javascripts/maps.js            | 43 ++++++++++++++++++++++++++
 2 files changed, 45 insertions(+), 42 deletions(-)
 create mode 100644 public/javascripts/maps.js

diff --git a/app/views/applications/show.html.haml b/app/views/applications/show.html.haml
index b687f20db..d77e2b3a5 100644
--- a/app/views/applications/show.html.haml
+++ b/app/views/applications/show.html.haml
@@ -90,49 +90,9 @@
 - if @application.location
   :javascript
     $(document).ready(function(){
-      var map = new mxn.Mapstraction("map_div","google");
-      point = new mxn.LatLonPoint(#{@application.lat},#{@application.lng});
-      map.setCenterAndZoom(point,16);
-      map.addControls({ zoom: 'small' });
-      marker = new mxn.Marker(point)
-      marker.setLabel("#{escape_javascript(@application.address)}");
-      map.addMarker(marker);
-
-      // Can't yet figure out how to make the POV point at the marker
-      var pointToLookAt = new google.maps.LatLng(#{@application.lat},#{@application.lng});
-      var myPano = new  google.maps.StreetViewPanorama(document.getElementById("pano"),
-        {position: pointToLookAt, navigationControl: false, addressControl: false, zoom: 0});
-      google.maps.event.addListener(myPano, 'position_changed', function() {
-        // Orient the camera to face the position we're interested in
-        var angle = computeAngle(pointToLookAt, myPano.getPosition());
-        myPano.setPov({heading:angle, pitch:0, zoom:1}); 
-      }); 
-      var panoMarker = new google.maps.Marker({position: pointToLookAt, title: "#{escape_javascript(@application.address)}"}); 
-      panoMarker.setMap(myPano); 
-      
+      initialiseMaps(#{@application.lat}, #{@application.lng}, "#{escape_javascript(@application.address)}");
     })
 
-    function computeAngle(endLatLng, startLatLng) {
-      var DEGREE_PER_RADIAN = 57.2957795;
-      var RADIAN_PER_DEGREE = 0.017453;
-
-      var dlat = endLatLng.lat() - startLatLng.lat();
-      var dlng = endLatLng.lng() - startLatLng.lng();
-      // We multiply dlng with cos(endLat), since the two points are very closeby,
-      // so we assume their cos values are approximately equal.
-      var yaw = Math.atan2(dlng * Math.cos(endLatLng.lat() * RADIAN_PER_DEGREE), dlat)
-        * DEGREE_PER_RADIAN;
-      return wrapAngle(yaw);
-    }
-
-    function wrapAngle(angle) {
-      if (angle >= 360) {
-        angle -= 360;
-      } else if (angle < 0) {
-        angle += 360;
-      }
-      return angle;
-    }
-    
+= javascript_include_tag "maps.js"
 = javascript_include_tag "/javascripts/applications.js"
 
diff --git a/public/javascripts/maps.js b/public/javascripts/maps.js
new file mode 100644
index 000000000..a5c549d83
--- /dev/null
+++ b/public/javascripts/maps.js
@@ -0,0 +1,43 @@
+function initialiseMaps(latitude, longitude, address) {
+  var map = new mxn.Mapstraction("map_div","google");
+  point = new mxn.LatLonPoint(latitude, longitude);
+  map.setCenterAndZoom(point,16);
+  map.addControls({ zoom: 'small' });
+  marker = new mxn.Marker(point)
+  marker.setLabel(address);
+  map.addMarker(marker);
+
+  // Can't yet figure out how to make the POV point at the marker
+  var pointToLookAt = new google.maps.LatLng(latitude, longitude);
+  var myPano = new  google.maps.StreetViewPanorama(document.getElementById("pano"),
+    {position: pointToLookAt, navigationControl: false, addressControl: false, zoom: 0});
+  google.maps.event.addListener(myPano, 'position_changed', function() {
+    // Orient the camera to face the position we're interested in
+    var angle = computeAngle(pointToLookAt, myPano.getPosition());
+    myPano.setPov({heading:angle, pitch:0, zoom:1}); 
+  }); 
+  var panoMarker = new google.maps.Marker({position: pointToLookAt, title: address}); 
+  panoMarker.setMap(myPano); 
+}
+
+function computeAngle(endLatLng, startLatLng) {
+  var DEGREE_PER_RADIAN = 57.2957795;
+  var RADIAN_PER_DEGREE = 0.017453;
+
+  var dlat = endLatLng.lat() - startLatLng.lat();
+  var dlng = endLatLng.lng() - startLatLng.lng();
+  // We multiply dlng with cos(endLat), since the two points are very closeby,
+  // so we assume their cos values are approximately equal.
+  var yaw = Math.atan2(dlng * Math.cos(endLatLng.lat() * RADIAN_PER_DEGREE), dlat)
+    * DEGREE_PER_RADIAN;
+  return wrapAngle(yaw);
+}
+
+function wrapAngle(angle) {
+  if (angle >= 360) {
+    angle -= 360;
+  } else if (angle < 0) {
+    angle += 360;
+  }
+  return angle;
+}