From c56f704e998b418aa3f11d5e3b6b86d6c7ce40e6 Mon Sep 17 00:00:00 2001
From: Matthew Somerville <matthew@fury.ukcod.org.uk>
Date: Wed, 9 Mar 2011 22:21:04 +0000
Subject: Fixes to other map types to work with lat/lon. Split OSM JavaScript
 into core OpenLayers bits and OSM config bit.

---
 web/js/map-OpenLayers.js    | 181 +++++++++++++++++++++++++++++++++++++++++
 web/js/map-OpenStreetMap.js | 191 +++-----------------------------------------
 web/js/map-bing-ol.js       |  40 +++-------
 web/js/map-bing.js          |   2 +-
 web/js/map-google.js        |   2 +-
 web/js/map-streetview.js    |  34 +++-----
 web/js/map-tilma-ol.js      |  33 ++++----
 7 files changed, 228 insertions(+), 255 deletions(-)
 create mode 100644 web/js/map-OpenLayers.js

(limited to 'web/js')

diff --git a/web/js/map-OpenLayers.js b/web/js/map-OpenLayers.js
new file mode 100644
index 000000000..3b887c10d
--- /dev/null
+++ b/web/js/map-OpenLayers.js
@@ -0,0 +1,181 @@
+YAHOO.util.Event.onContentReady('map', function() {
+
+    fixmystreet.ZOOM_OFFSET = 14;
+
+    var perm = new OpenLayers.Control.Permalink();
+    set_map_config(perm);
+
+    fixmystreet.map = new OpenLayers.Map("map", {
+        controls: fixmystreet.controls,
+        displayProjection: new OpenLayers.Projection("EPSG:4326")
+    });
+
+    fixmystreet.layer_options = OpenLayers.Util.extend({
+        zoomOffset: fixmystreet.ZOOM_OFFSET,
+        numZoomLevels: 4
+    }, fixmystreet.layer_options);
+    var layer = new fixmystreet.map_type("", fixmystreet.layer_options);
+    fixmystreet.map.addLayer(layer);
+
+    if (!fixmystreet.map.getCenter()) {
+        var centre = new OpenLayers.LonLat( fixmystreet.longitude, fixmystreet.latitude );
+        centre.transform(
+            new OpenLayers.Projection("EPSG:4326"),
+            fixmystreet.map.getProjectionObject()
+        );
+        fixmystreet.map.setCenter(centre, 2);
+    }
+
+    if (document.getElementById('mapForm')) {
+        var click = new OpenLayers.Control.Click();
+        fixmystreet.map.addControl(click);
+        click.activate();
+    }
+
+    /* To let permalink not be caught by the Click layer, answer found
+     * at http://www.mail-archive.com/users@openlayers.org/msg12958.html
+     * Not sure why you can't use eventListeners or events.register...
+     */
+    OpenLayers.Event.observe( perm.element, "click", function(e) {
+        OpenLayers.Event.stop(e);
+        location.href = OpenLayers.Event.element(e).href;
+        return false;
+    });
+
+    fixmystreet.markers = new OpenLayers.Layer.Markers("Markers");
+    var cols = { 'red':'R', 'green':'G', 'blue':'B', 'purple':'P' };
+    for (var i=0; i<fixmystreet.pins.length; i++) {
+        var pin = fixmystreet.pins[i];
+        var src = '/i/pin' + cols[pin[2]] + '.gif';
+        var size = new OpenLayers.Size(32, 59);
+        var offset = new OpenLayers.Pixel(-3, -size.h-2);
+        var icon = new OpenLayers.Icon(src, size, offset);
+        var loc = new OpenLayers.LonLat(pin[1], pin[0]);
+        loc.transform(
+            new OpenLayers.Projection("EPSG:4326"),
+            fixmystreet.map.getProjectionObject()
+        );
+        var marker = new OpenLayers.Marker(loc, icon);
+        if (pin[3]) {
+            marker.id = pin[3];
+            marker.events.register('click', marker, function(evt) {
+                window.location = '/report/' + this.id;
+                OpenLayers.Event.stop(evt);
+            });
+        }
+        fixmystreet.markers.addMarker(marker);
+    }
+    fixmystreet.map.addLayer(fixmystreet.markers);
+
+});
+
+YAHOO.util.Event.addListener('hide_pins_link', 'click', function(e) {
+    YAHOO.util.Event.preventDefault(e);
+    var showhide = [
+        'Show pins', 'Hide pins',
+        'Dangos pinnau', 'Cuddio pinnau',
+        "Vis nåler", "Gjem nåler"
+    ];
+    for (var i=0; i<showhide.length; i+=2) {
+        if (this.innerHTML == showhide[i]) {
+            fixmystreet.markers.setVisibility(true);
+            this.innerHTML = showhide[i+1];
+        } else if (this.innerHTML == showhide[i+1]) {
+            fixmystreet.markers.setVisibility(false);
+            this.innerHTML = showhide[i];
+        }
+    }
+});
+
+/* Overridding the buttonDown function of PanZoom so that it does
+   zoomTo(0) rather than zoomToMaxExtent()
+*/
+OpenLayers.Control.PanZoomFMS = OpenLayers.Class(OpenLayers.Control.PanZoom, {
+    buttonDown: function (evt) {
+        if (!OpenLayers.Event.isLeftClick(evt)) {
+            return;
+        }
+
+        switch (this.action) {
+            case "panup":
+                this.map.pan(0, -this.getSlideFactor("h"));
+                break;
+            case "pandown":
+                this.map.pan(0, this.getSlideFactor("h"));
+                break;
+            case "panleft":
+                this.map.pan(-this.getSlideFactor("w"), 0);
+                break;
+            case "panright":
+                this.map.pan(this.getSlideFactor("w"), 0);
+                break;
+            case "zoomin":
+                this.map.zoomIn();
+                break;
+            case "zoomout":
+                this.map.zoomOut();
+                break;
+            case "zoomworld":
+                this.map.zoomTo(0);
+                break;
+        }
+
+        OpenLayers.Event.stop(evt);
+    }
+});
+
+/* Overriding Permalink so that it can pass the correct zoom to OSM */
+OpenLayers.Control.PermalinkFMS = OpenLayers.Class(OpenLayers.Control.Permalink, {
+    updateLink: function() {
+        var separator = this.anchor ? '#' : '?';
+        var href = this.base;
+        if (href.indexOf(separator) != -1) {
+            href = href.substring( 0, href.indexOf(separator) );
+        }
+
+        href += separator + OpenLayers.Util.getParameterString(this.createParams(null, this.map.getZoom()+fixmystreet.ZOOM_OFFSET));
+        if (this.anchor && !this.element) {
+            window.location.href = href;
+        }
+        else {
+            this.element.href = href;
+        }
+    }
+});
+
+/* Click handler */
+OpenLayers.Control.Click = OpenLayers.Class(OpenLayers.Control, {                
+    defaultHandlerOptions: {
+        'single': true,
+        'double': false,
+        'pixelTolerance': 0,
+        'stopSingle': false,
+        'stopDouble': false
+    },
+
+    initialize: function(options) {
+        this.handlerOptions = OpenLayers.Util.extend(
+            {}, this.defaultHandlerOptions
+        );
+        OpenLayers.Control.prototype.initialize.apply(
+            this, arguments
+        ); 
+        this.handler = new OpenLayers.Handler.Click(
+            this, {
+                'click': this.trigger
+            }, this.handlerOptions
+        );
+    }, 
+
+    trigger: function(e) {
+        var lonlat = fixmystreet.map.getLonLatFromViewPortPx(e.xy);
+        lonlat.transform(
+            fixmystreet.map.getProjectionObject(),
+            new OpenLayers.Projection("EPSG:4326")
+        );
+        document.getElementById('fixmystreet.latitude').value = lonlat.lat;
+        document.getElementById('fixmystreet.longitude').value = lonlat.lon;
+        document.getElementById('mapForm').submit();
+    }
+});
+
diff --git a/web/js/map-OpenStreetMap.js b/web/js/map-OpenStreetMap.js
index 4f5bf6fdf..9d226f6a7 100644
--- a/web/js/map-OpenStreetMap.js
+++ b/web/js/map-OpenStreetMap.js
@@ -1,186 +1,13 @@
-YAHOO.util.Event.onContentReady('map', function() {
-
-    fixmystreet.ZOOM_OFFSET = 14;
-
-    var perm = new OpenLayers.Control.Permalink();
-    fixmystreet.map = new OpenLayers.Map("map", {
-        controls: [
-            new OpenLayers.Control.ArgParser(),
-            //new OpenLayers.Control.LayerSwitcher(),
-            new OpenLayers.Control.Navigation(),
-            perm,
-            new OpenLayers.Control.PermalinkFMS('osm_link', 'http://www.openstreetmap.org/'),
-            new OpenLayers.Control.PanZoomFMS()
-        ],
-        displayProjection: new OpenLayers.Projection("EPSG:4326")
-    });
-    var osm = new fixmystreet.map_type("", {
-        zoomOffset: fixmystreet.ZOOM_OFFSET,
-        numZoomLevels: 4
-    });
-    fixmystreet.map.addLayer(osm);
-
-    if (!fixmystreet.map.getCenter()) {
-        var centre = new OpenLayers.LonLat( fixmystreet.longitude, fixmystreet.latitude );
-        centre.transform(
-            new OpenLayers.Projection("EPSG:4326"),
-            fixmystreet.map.getProjectionObject()
-        );
-        fixmystreet.map.setCenter(centre, 2);
-    }
-
-    if (document.getElementById('mapForm')) {
-        var click = new OpenLayers.Control.Click();
-        fixmystreet.map.addControl(click);
-        click.activate();
-    }
-
-    /* To let permalink not be caught by the Click layer, answer found
-     * at http://www.mail-archive.com/users@openlayers.org/msg12958.html
-     * Not sure why you can't use eventListeners or events.register...
-     */
-    OpenLayers.Event.observe( perm.element, "click", function(e) {
-        OpenLayers.Event.stop(e);
-        location.href = OpenLayers.Event.element(e).href;
-        return false;
-    });
-
-    fixmystreet.markers = new OpenLayers.Layer.Markers("Markers");
-    var cols = { 'red':'R', 'green':'G', 'blue':'B', 'purple':'P' };
-    for (var i=0; i<fixmystreet.pins.length; i++) {
-        var pin = fixmystreet.pins[i];
-        var src = '/i/pin' + cols[pin[2]] + '.gif';
-        var size = new OpenLayers.Size(32, 59);
-        var offset = new OpenLayers.Pixel(-3, -size.h-2);
-        var icon = new OpenLayers.Icon(src, size, offset);
-        var loc = new OpenLayers.LonLat(pin[1], pin[0]);
-        loc.transform(
-            new OpenLayers.Projection("EPSG:4326"),
-            fixmystreet.map.getProjectionObject()
-        );
-        var marker = new OpenLayers.Marker(loc, icon);
-        if (pin[3]) {
-            marker.id = pin[3];
-            marker.events.register('click', marker, function(evt) {
-                window.location = '/report/' + this.id;
-                OpenLayers.Event.stop(evt);
-            });
-        }
-        fixmystreet.markers.addMarker(marker);
-    }
-    fixmystreet.map.addLayer(fixmystreet.markers);
-
-});
-
-YAHOO.util.Event.addListener('hide_pins_link', 'click', function(e) {
-    YAHOO.util.Event.preventDefault(e);
-    var showhide = [
-        'Show pins', 'Hide pins',
-        'Dangos pinnau', 'Cuddio pinnau',
-        "Vis nåler", "Gjem nåler"
+function set_map_config(perm) {
+    fixmystreet.controls = [
+        new OpenLayers.Control.ArgParser(),
+        //new OpenLayers.Control.LayerSwitcher(),
+        new OpenLayers.Control.Navigation(),
+        perm,
+        new OpenLayers.Control.PermalinkFMS('osm_link', 'http://www.openstreetmap.org/'),
+        new OpenLayers.Control.PanZoomFMS()
     ];
-    for (var i=0; i<showhide.length; i+=2) {
-        if (this.innerHTML == showhide[i]) {
-            fixmystreet.markers.setVisibility(true);
-            this.innerHTML = showhide[i+1];
-        } else if (this.innerHTML == showhide[i+1]) {
-            fixmystreet.markers.setVisibility(false);
-            this.innerHTML = showhide[i];
-        }
-    }
-});
-
-/* Overridding the buttonDown function of PanZoom so that it does
-   zoomTo(0) rather than zoomToMaxExtent()
-*/
-OpenLayers.Control.PanZoomFMS = OpenLayers.Class(OpenLayers.Control.PanZoom, {
-    buttonDown: function (evt) {
-        if (!OpenLayers.Event.isLeftClick(evt)) {
-            return;
-        }
-
-        switch (this.action) {
-            case "panup":
-                this.map.pan(0, -this.getSlideFactor("h"));
-                break;
-            case "pandown":
-                this.map.pan(0, this.getSlideFactor("h"));
-                break;
-            case "panleft":
-                this.map.pan(-this.getSlideFactor("w"), 0);
-                break;
-            case "panright":
-                this.map.pan(this.getSlideFactor("w"), 0);
-                break;
-            case "zoomin":
-                this.map.zoomIn();
-                break;
-            case "zoomout":
-                this.map.zoomOut();
-                break;
-            case "zoomworld":
-                this.map.zoomTo(0);
-                break;
-        }
-
-        OpenLayers.Event.stop(evt);
-    }
-});
-
-/* Overriding Permalink so that it can pass the correct zoom to OSM */
-OpenLayers.Control.PermalinkFMS = OpenLayers.Class(OpenLayers.Control.Permalink, {
-    updateLink: function() {
-        var separator = this.anchor ? '#' : '?';
-        var href = this.base;
-        if (href.indexOf(separator) != -1) {
-            href = href.substring( 0, href.indexOf(separator) );
-        }
-
-        href += separator + OpenLayers.Util.getParameterString(this.createParams(null, this.map.getZoom()+fixmystreet.ZOOM_OFFSET));
-        if (this.anchor && !this.element) {
-            window.location.href = href;
-        }
-        else {
-            this.element.href = href;
-        }
-    }
-});
-
-/* Click handler */
-OpenLayers.Control.Click = OpenLayers.Class(OpenLayers.Control, {                
-    defaultHandlerOptions: {
-        'single': true,
-        'double': false,
-        'pixelTolerance': 0,
-        'stopSingle': false,
-        'stopDouble': false
-    },
-
-    initialize: function(options) {
-        this.handlerOptions = OpenLayers.Util.extend(
-            {}, this.defaultHandlerOptions
-        );
-        OpenLayers.Control.prototype.initialize.apply(
-            this, arguments
-        ); 
-        this.handler = new OpenLayers.Handler.Click(
-            this, {
-                'click': this.trigger
-            }, this.handlerOptions
-        );
-    }, 
-
-    trigger: function(e) {
-        var lonlat = fixmystreet.map.getLonLatFromViewPortPx(e.xy);
-        lonlat.transform(
-            fixmystreet.map.getProjectionObject(),
-            new OpenLayers.Projection("EPSG:4326")
-        );
-        document.getElementById('fixmystreet.latitude').value = lonlat.lat;
-        document.getElementById('fixmystreet.longitude').value = lonlat.lon;
-        document.getElementById('mapForm').submit();
-    }
-});
+}
 
 // http://www.openstreetmap.org/openlayers/OpenStreetMap.js (added maxResolution)
 
diff --git a/web/js/map-bing-ol.js b/web/js/map-bing-ol.js
index ba9445326..047cdff52 100644
--- a/web/js/map-bing-ol.js
+++ b/web/js/map-bing-ol.js
@@ -1,33 +1,13 @@
-YAHOO.util.Event.onContentReady('map', function() {
-    var map = new OpenLayers.Map("map", {
-        controls: [
-                  new OpenLayers.Control.ArgParser(),
-                  //new OpenLayers.Control.LayerSwitcher(),
-                  new OpenLayers.Control.Navigation(),
-                  new OpenLayers.Control.PanZoom()
-                ],
-        displayProjection: new OpenLayers.Projection("EPSG:4326")
-    });
-    var bing = new OpenLayers.Layer.Bing("", {
-        zoomOffset: 13,
-        numZoomLevels: 4
-    });
-    map.addLayer(bing);
-
-    var centre = new OpenLayers.LonLat( fixmystreet.easting, fixmystreet.northing );
-    centre.transform(
-        new OpenLayers.Projection("EPSG:27700"),
-        map.getProjectionObject()
-    );
-    map.setCenter(centre, 3);
-});
-
-OpenLayers.Util.OS = {};
-OpenLayers.Util.OS.MISSING_TILE_URL = "http://openstreetmap.org/openlayers/img/404.png";
-OpenLayers.Util.OS.originalOnImageLoadError = OpenLayers.Util.onImageLoadError;
-OpenLayers.Util.onImageLoadError = function() {
-    OpenLayers.Util.OS.originalOnImageLoadError;
-};
+function set_map_config(perm) {
+    fixmystreet.ZOOM_OFFSET = 13;
+    fixmystreet.controls = [
+        new OpenLayers.Control.ArgParser(),
+        new OpenLayers.Control.Navigation(),
+        perm,
+        new OpenLayers.Control.PanZoomFMS()
+    ];
+    fixmystreet.map_type = OpenLayers.Layer.Bing;
+}
 
 OpenLayers.Layer.Bing = OpenLayers.Class(OpenLayers.Layer.XYZ, {
     initialize: function(name, options) {
diff --git a/web/js/map-bing.js b/web/js/map-bing.js
index fbbbcc676..da8f3512b 100644
--- a/web/js/map-bing.js
+++ b/web/js/map-bing.js
@@ -1,5 +1,5 @@
 YAHOO.util.Event.onContentReady('map', function() {
-    var centre = new Microsoft.Maps.Location( fixmystreet.lat, fixmystreet.lon );
+    var centre = new Microsoft.Maps.Location( fixmystreet.latitude, fixmystreet.longitude );
     var map = new Microsoft.Maps.Map(document.getElementById("map"), {
         mapTypeId: Microsoft.Maps.MapTypeId.ordnanceSurvey,
         center: centre,
diff --git a/web/js/map-google.js b/web/js/map-google.js
index 77e54ab7c..ab9bb9042 100644
--- a/web/js/map-google.js
+++ b/web/js/map-google.js
@@ -1,5 +1,5 @@
 YAHOO.util.Event.onContentReady('map', function() {
-    var centre = new google.maps.LatLng( fixmystreet.lat, fixmystreet.lon );
+    var centre = new google.maps.LatLng( fixmystreet.latitude, fixmystreet.longitude );
     var map = new google.maps.Map(document.getElementById("map"), {
         mapTypeId: google.maps.MapTypeId.ROADMAP,
         center: centre,
diff --git a/web/js/map-streetview.js b/web/js/map-streetview.js
index 088e5b6a2..cfd595b95 100644
--- a/web/js/map-streetview.js
+++ b/web/js/map-streetview.js
@@ -1,27 +1,13 @@
-YAHOO.util.Event.onContentReady('map', function() {
-    var map = new OpenLayers.Map("map", {
-        controls: [
-            new OpenLayers.Control.ArgParser(),
-            //new OpenLayers.Control.LayerSwitcher(),
-            new OpenLayers.Control.Navigation(),
-            new OpenLayers.Control.PanZoom()
-        ],
-        displayProjection: new OpenLayers.Projection("EPSG:4326")
-    });
-    var streetview = new OpenLayers.Layer.StreetView("OS StreetView (1:10000)", {
-        zoomOffset: 14,
-        numZoomLevels: 4
-    });
-    map.addLayer(streetview);
-
-    var centre = new OpenLayers.LonLat( fixmystreet.easting, fixmystreet.northing );
-    centre.transform(
-        new OpenLayers.Projection("EPSG:27700"),
-        map.getProjectionObject()
-    );
-    map.setCenter(centre, 2);
-});
-
+function set_map_config(perm) {
+    fixmystreet.controls = [
+        new OpenLayers.Control.ArgParser(),
+        //new OpenLayers.Control.LayerSwitcher(),
+        new OpenLayers.Control.Navigation(),
+        perm,
+        new OpenLayers.Control.PanZoomFMS()
+    ];
+    fixmystreet.map_type = OpenLayers.Layer.StreetView;
+}
 
 // http://os.openstreetmap.org/openlayers/OS.js (added one line)
 
diff --git a/web/js/map-tilma-ol.js b/web/js/map-tilma-ol.js
index cfd196c1d..5230a5d2c 100644
--- a/web/js/map-tilma-ol.js
+++ b/web/js/map-tilma-ol.js
@@ -1,21 +1,19 @@
-YAHOO.util.Event.onContentReady('map', function() {
-    var map = new OpenLayers.Map("map", {
-        controls: [
-            new OpenLayers.Control.ArgParser(),
-            new OpenLayers.Control.Navigation(),
-            new OpenLayers.Control.PanPanel()
-        ]
-    });
-    var tilma = new OpenLayers.Layer.Tilma("Tilma", {
+function set_map_config(perm) {
+    fixmystreet.controls = [
+        new OpenLayers.Control.ArgParser(),
+        perm,
+        new OpenLayers.Control.Navigation(),
+        new OpenLayers.Control.PanPanel()
+    ];
+    fixmystreet.map_type = OpenLayers.Layer.Tilma;
+    fixmystreet.layer_options = {
         maxResolution: fixmystreet.maxResolution,
         tileSize: new OpenLayers.Size(fixmystreet.tilewidth, fixmystreet.tileheight),
-        map_type: fixmystreet.tile_type
-    });
-    map.addLayer(tilma);
-
-    var centre = new OpenLayers.LonLat( fixmystreet.easting, fixmystreet.northing );
-    map.setCenter(centre);
-});
+        map_type: fixmystreet.tile_type,
+        numZoomLevels: 1,
+        zoomOffset: 0
+    };
+}
 
 OpenLayers.Layer.Tilma = OpenLayers.Class(OpenLayers.Layer.XYZ, {
     initialize: function(name, options) {
@@ -23,8 +21,9 @@ OpenLayers.Layer.Tilma = OpenLayers.Class(OpenLayers.Layer.XYZ, {
         options = OpenLayers.Util.extend({
             transitionEffect: "resize",
             numZoomLevels: 1,
+            projection: "EPSG:27700",
             units: "m",
-            maxExtent: new OpenLayers.Bounds(0, 0, 700000, 1300000),
+            maxExtent: new OpenLayers.Bounds(0, 0, 700000, 1300000)
         }, options);
         var newArguments = [name, url, options];
         OpenLayers.Layer.XYZ.prototype.initialize.apply(this, newArguments);
-- 
cgit v1.2.3