Merge branch 'collisions' into staging

app/assets/javascripts/application.js

@@ -11,11 +11,13 @@
 //= require knockout
 //= require superbly-tagfield.min
 //= require maps
+//= require map_collisions
 //= require map_display
 //= require map_edit
 //= require map_popup
 //= require map_style
 //= require openlayers_pz
+//= require openlayers_flatjson
 //= require ui
 //= require tags
 //= require library_message

app/assets/javascripts/map_collisions.js.erb

@@ -0,0 +1,68 @@
+/**
+ *
+ * Displaying collision information, with popups
+ *
+ */
+
+MapCollisions = {
+  collisions_url: "<%= Geo::COLLISIONS_URL %>",
+  collisions_key: "<%= Geo::COLLISIONS_API_KEY %>",
+  map: null,
+  layer: null,
+
+  init: function(m) {
+    this.map = m;
+    l = new OpenLayers.Layer.Vector("Collisions", {
+                      projection: new OpenLayers.Projection("EPSG:4326"),
+                      strategies: [new OpenLayers.Strategy.BBOX({resFactor: 3, ratio: 1.5})],
+                      styleMap: MapStyle.collisionStyle(),
+                      protocol: new OpenLayers.Protocol.Script({
+                          url: this.collisions_url,
+                          format: new OpenLayers.Format.FlatJSON({
+                              getResultArray : function(obj){ return obj.collisions.collision},
+                              getLat : function(obj) { return obj.latitude },
+                              getLon : function(obj) { return obj.longitude }
+                          }),
+                          params: {
+                              key: this.collisions_key
+                          },
+                          filterToParams: function(filter, params) {
+                              // serialise BBOX into n/s/e/w url parameters
+                              if (filter.type === OpenLayers.Filter.Spatial.BBOX) {
+                                  params.w = filter.value.toArray()[0];
+                                  params.s = filter.value.toArray()[1];
+                                  params.e = filter.value.toArray()[2];
+                                  params.n = filter.value.toArray()[3];
+                              }
+                              return params;
+                          }
+                      })
+                  });
+    this.layer = l;
+    l.setVisibility(false);
+    m.addLayer(l);
+    m.addControl(new OpenLayers.Control.SelectFeature(l, {id: 'collSelector', onSelect: MapCollisions.createPopup, onUnselect: MapCollisions.destroyPopup }));
+    m.getControl('collSelector').activate();
+    m.getControl('collSelector').handlers.feature.stopDown = false; // Allow click-drag on polygons to move the map
+  },
+
+  createPopup: function(feature) {
+      feature.popup = new OpenLayers.Popup.FramedCloud("pop",
+          feature.geometry.getBounds().getCenterLonLat(),
+          null,
+          '<h3><a href="' + feature.attributes.url + '">Collision ' + feature.attributes.accref + ' in ' + feature.attributes.accyr + '</a></h3>' +
+            '<p>Date and time: ' + feature.attributes.datetime + '</p>' +
+            '<p>Severity: ' + feature.attributes.severity + '</p>' +
+            '<p><a href="' + feature.attributes.url + '">View full, detailed report at CycleStreets</a></p>',
+          null,
+          true,
+          function() { MapCollisions.map.getControl('collSelector').unselectAll(); this.destroy(); }
+      );
+      map.addPopup(feature.popup);
+  },
+
+  destroyPopup: function(feature) {
+      feature.popup.destroy();
+      feature.popup = null;
+  }
+}

app/assets/javascripts/map_style.js

@@ -50,5 +50,17 @@ MapStyle = {
     styleMap.styles["default"].addRules(this.displayRules);
     styleMap.styles["select"].addRules(this.displayRules);
     return styleMap;
+  },
+
+  collisionStyle: function() {
+    var lookup = {
+      fatal: { strokeColor: '#aa0000', fillColor: '#ff0000', pointRadius: 10 },
+      serious: { strokeColor: '#e44500', fillColor: '#ff8814', pointRadius: 8 },
+      slight: { strokeColor: '#a7932f', fillColor: '#fcff00', pointRadius: 6 }
+    }
+    var styleMap = new OpenLayers.StyleMap();
+    styleMap.addUniqueValueRules("default", "severity", lookup);
+    styleMap.addUniqueValueRules("select", "severity", lookup);
+    return styleMap;
   }
 }

app/assets/javascripts/openlayers_flatjson.js

@@ -0,0 +1,145 @@
+/* Copyright (c) 2006-2011 by OpenLayers Contributors (see authors.txt for
+ * full list of contributors). Published under the Clear BSD license.
+ * See http://svn.openlayers.org/trunk/openlayers/license.txt for the
+ * full text of the license. */
+
+/**
+ * @requires OpenLayers/Format/JSON.js
+ * @requires OpenLayers/Feature/Vector.js
+ * @requires OpenLayers/Geometry/Point.js
+ * @requires OpenLayers/Geometry/MultiPoint.js
+ * @requires OpenLayers/Geometry/LineString.js
+ * @requires OpenLayers/Geometry/MultiLineString.js
+ * @requires OpenLayers/Geometry/Polygon.js
+ * @requires OpenLayers/Geometry/MultiPolygon.js
+ * @requires OpenLayers/Console.js
+ */
+
+/**
+ * Class: OpenLayers.Format.FlatJSON
+ * Read JSON POI documents with no GeoJSON structure.
+ * Create a new parser with the
+ *     <OpenLayers.Format.FlatJSON> constructor.
+ *
+ * Inherits from:
+ *  - <OpenLayers.Format>
+ */
+OpenLayers.Format.FlatJSON = OpenLayers.Class(OpenLayers.Format, {
+
+    /**
+     * Method: getResultArray
+     * Return the Array that cointains the items from
+     *     the obj. Method to be overriden
+     *
+     * Parameters:
+     * obj - {Object} An object created from a JSON document
+     *
+     * Returns:
+     * <Object> An array of items.
+     */
+    getResultArray: function(obj){ return obj.results},
+
+    /**
+     * Method: getLat
+     * Return the latitude value contained in the obj.
+     *     Method to be overriden
+     *
+     * Parameters:
+     * obj - {Object} An object item from a JSON object
+     *
+     * Returns:
+     * A number
+     */
+    getLat: function(obj){ return obj.lat },
+    /**
+     * Method: getLon
+     * Return the longitude value contained in the obj.
+     *     Method to be overriden
+     *
+     * Parameters:
+     * obj - {Object} An object item from a JSON object
+     *
+     * Returns:
+     * A number
+     */
+    getLon: function(obj){ return obj.lon },
+
+    read: function(json, type, filter) {
+        var results = null;
+        var obj = null;
+        if (typeof json == "string") {
+            obj = OpenLayers.Format.JSON.prototype.read.apply(this,
+                                                              [json, filter]);
+        } else {
+            obj = json;
+        }
+        if(!obj) {
+            OpenLayers.Console.error("Bad JSON: " + json);
+            return;
+        }
+        var res = this.getResultArray(obj);
+        if (!res){
+            OpenLayers.Console.error("Can't find the results Array : "+ json);
+            return;
+        }
+        results = this.parseFeatures(res,this);
+        return results;
+    },
+
+    parseFeatures: function(obj,format){
+        var features = [];
+        for (var i = 0; i< obj.length; i++){
+            var feat = this.parseFeature(obj[i],format);
+            if (feat) features.push(feat);
+        }
+        return features;
+    },
+
+
+    /**
+     * Method: parseFeature
+     * Convert an object item from a JSON into an
+     *     <OpenLayers.Feature.Vector>.
+     *
+     * Parameters:
+     * obj - {Object} An object created from a GeoJSON object
+     *
+     * Returns:
+     * {<OpenLayers.Feature.Vector>} A feature.
+     */
+    parseFeature: function(obj,format) {
+        var feature, geometry, attributes, bbox;
+        attributes=new Object();
+        for (att in obj){
+            attributes[att]=obj[att];
+        }
+
+        try {
+            var lat, lon;
+            lat = format.getLat(obj);
+            lon = format.getLon(obj);
+            if (isNaN(parseFloat(lat)) || !isFinite(lat)) return;
+            if (isNaN(parseFloat(lon)) || !isFinite(lon)) return;
+            geometry = new OpenLayers.Geometry.Point(lon,lat);
+        } catch(err) {
+            // deal with bad geometries
+            //throw err;
+            return;
+        }
+
+        bbox = (geometry && geometry.bbox) || obj.bbox;
+
+        feature = new OpenLayers.Feature.Vector(geometry, attributes);
+        if(bbox) {
+            feature.bounds = OpenLayers.Bounds.fromArray(bbox);
+        }
+        if(obj.id) {
+            feature.fid = obj.id;
+        }
+        return feature;
+    },
+
+
+    CLASS_NAME: "OpenLayers.Format.FlatJSON"
+
+});

app/helpers/maps_helper.rb

@@ -100,4 +100,8 @@ def add_location_layer(name, url, strategy, map, page)
                                                                 strategies: [strategy]))
     page << map.add_layer(locationlayer)
   end
+
+  def add_collision_layer(map, page)
+    page << 'MapCollisions.init(map)'
+  end
 end

app/views/issues/_map.html.haml

@@ -1,3 +1,4 @@
 - m = display_map(issue, geometry_issue_path(issue, :json)) do |map, page|
+  - add_collision_layer(map, page)
   %div#map
 != m.to_html

config/initializers/geo.rb

@@ -4,4 +4,7 @@ module Geo
   MAP_SEARCH_ZOOM = 14
   # If you see this place, then there's a better choice of places to use.
   NOWHERE_IN_PARTICULAR = RGeo::Geos::Factory.create({has_z_coordinate: true}).point(-1, 53, 6)
+
+  COLLISIONS_API_KEY = 'b7af2f6899b5d784'
+  COLLISIONS_URL = 'http://cyclestreets.net/api/collisions.json'
 end

config/initializers/map_layers.rb

@@ -1,4 +1,6 @@
 module MapLayers
-  OPENCYCLEMAP = OpenLayers::Layer::OSM.new("OpenCycleMap", ["a", "b", "c"].map {|k| "http://#{k}.tile.opencyclemap.org/cycle/${z}/${x}/${y}.png"}, {opacity: 0.8})
-  OS_STREETVIEW = OpenLayers::Layer::OSM.new("OS StreetView", ["a", "b", "c"].map {|k| "http://#{k}.os.openstreetmap.org/sv/${z}/${x}/${y}.png"}, {opacity: 0.8})
+  OPENCYCLEMAP = OpenLayers::Layer::OSM.new("OpenCycleMap", ["a", "b", "c"].map {|k| "http://#{k}.tile.opencyclemap.org/cycle/${z}/${x}/${y}.png"},
+                                            {opacity: 0.8, tileOptions: {crossOriginKeyword: :null}})
+  OS_STREETVIEW = OpenLayers::Layer::OSM.new("OS StreetView", ["a", "b", "c"].map {|k| "http://#{k}.os.openstreetmap.org/sv/${z}/${x}/${y}.png"},
+                                             {opacity: 0.8, tileOptions: {crossOriginKeyword: :null}})
 end