[TfL] Add roadworks markers to map

 - Displays roadworks as a proper asset layer for Roadworks category
 - Only show roadworks markers within red route boundaries
 - Adds info box on left column when roadworks marker selected

5 files changed, 127 insertions, 1 deletions

diff --git a/web/cobrands/tfl/assets.js b/web/cobrands/tfl/assets.js
index 24d95b465..61759f9b8 100644
--- a/web/cobrands/tfl/assets.js
+++ b/web/cobrands/tfl/assets.js
@@ -108,13 +108,14 @@ var tlrn_categories = [
     "Worn out road markings"
 ];
 
-fixmystreet.assets.add(defaults, {
+var red_routes_layer = fixmystreet.assets.add(defaults, {
     http_options: {
         url: "https://tilma.mysociety.org/mapserver/tfl",
         params: {
             TYPENAME: "RedRoutes"
         }
     },
+    name: "Red Routes",
     max_resolution: 9.554628534317017,
     road: true,
     non_interactive: true,
@@ -127,5 +128,122 @@ fixmystreet.assets.add(defaults, {
         not_found: fixmystreet.message_controller.road_not_found
     }
 });
+if (red_routes_layer) {
+    red_routes_layer.events.register( 'loadend', red_routes_layer, function(){
+        // The roadworks layer may have finished loading before this layer, so
+        // ensure the filters to only show markers that intersect with a red route
+        // are re-applied.
+        var roadworks = fixmystreet.map.getLayersByName("Roadworks");
+        if (roadworks.length) {
+            // .redraw() reapplies filters without issuing any new requests
+            roadworks[0].redraw();
+        }
+    });
+}
+
+
+/* Roadworks asset layer */
+
+var rw_stylemap = new OpenLayers.StyleMap({
+    'default': new OpenLayers.Style({
+        fillOpacity: 1,
+        fillColor: "#FFFF00",
+        strokeColor: "#000000",
+        strokeOpacity: 0.8,
+        strokeWidth: 2,
+        pointRadius: 6,
+        graphicWidth: 39,
+        graphicHeight: 25,
+        graphicOpacity: 1,
+        externalGraphic: '/cobrands/tfl/warning@2x.png'
+    }),
+    'hover': new OpenLayers.Style({
+        fillColor: "#55BB00",
+        externalGraphic: '/cobrands/tfl/warning-green@2x.png'
+    }),
+    'select': new OpenLayers.Style({
+        fillColor: "#55BB00",
+        externalGraphic: '/cobrands/tfl/warning-green@2x.png'
+    })
+});
+
+fixmystreet.assets.add(asset_defaults, {
+    http_options: {
+        params: {
+            TYPENAME: "roadworks"
+        }
+    },
+    name: "Roadworks",
+    non_interactive: false,
+    always_visible: false,
+    road: false,
+    all_categories: false,
+    asset_category: "Roadworks",
+    stylemap: rw_stylemap,
+    asset_id_field: 'works_ref',
+    asset_item: 'roadworks',
+    attributes: {
+        promoter_works_ref: 'works_ref',
+        start: 'start',
+        end: 'end',
+        promoter: 'promoter',
+        works_desc: 'description',
+        works_state: 'status',
+        tooltip: 'location'
+    },
+    filter_key: true,
+    filter_value: function(feature) {
+        var red_routes = fixmystreet.map.getLayersByName("Red Routes");
+        if (!red_routes.length) {
+            return false;
+        }
+        red_routes = red_routes[0];
+        return red_routes.getFeaturesWithinDistance(feature.geometry, 10).length > 0;
+    },
+    select_action: true,
+    actions: {
+        asset_found: function(feature) {
+            this.fixmystreet.actions.asset_not_found.call(this);
+            feature.layer = this;
+            var attr = feature.attributes,
+            location = attr.location.replace(/\\n/g, '\n'),
+            desc = attr.description.replace(/\\n/g, '\n');
+
+            var $msg = $('<div class="js-roadworks-message js-roadworks-message-' + this.id + ' box-warning"></div>');
+            var $dl = $("<dl></dl>").appendTo($msg);
+            if (attr.promoter) {
+                $dl.append("<dt>Responsibility</dt>");
+                $dl.append($("<dd></dd>").text(attr.promoter));
+            }
+            $dl.append("<dt>Location</dt>");
+            var $summary = $("<dd></dd>").appendTo($dl);
+            location.split("\n").forEach(function(para) {
+                if (para.match(/^(\d{2}\s+\w{3}\s+(\d{2}:\d{2}\s+)?\d{4}( - )?){2}/)) {
+                    // skip showing the date again
+                    return;
+                }
+                if (para.match(/^delays/)) {
+                    // skip showing traffic delay information
+                    return;
+                }
+                $summary.append(para).append("<br />");
+            });
+            if (desc) {
+                $dl.append("<dt>Description</dt>");
+                $dl.append($("<dd></dd>").text(desc));
+            }
+            $dl.append("<dt>Dates</dt>");
+            var $dates = $("<dd></dd>").appendTo($dl);
+            $dates.text(attr.start + " until " + attr.end);
+            $msg.prependTo('#js-post-category-messages');
+            $('#js-post-category-messages .category_meta_message').hide();
+        },
+        asset_not_found: function() {
+            $(".js-roadworks-message-" + this.id).remove();
+            $('#js-post-category-messages .category_meta_message').show();
+        }
+    }
+
+});
 
 })();
diff --git a/web/cobrands/tfl/warning-green.svg b/web/cobrands/tfl/warning-green.svg
new file mode 100644
index 000000000..dacf02609
--- /dev/null
+++ b/web/cobrands/tfl/warning-green.svg
@@ -0,0 +1,4 @@
+<svg width="39" height="35" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg">
+<g><polygon fill="#ffffff" points="4,32 36,32 20,4 4,32" stroke="#000000" stroke-width="5" stroke-linejoin="round"/></g>
+<g><polygon fill="#ffffff" points="4,32 36,32 20,4 4,32" stroke="#55BB00" stroke-width="3" stroke-linejoin="round"/></g>
+</svg>
\ No newline at end of file
diff --git a/web/cobrands/tfl/warning-green@2x.png b/web/cobrands/tfl/warning-green@2x.png
new file mode 100644
index 000000000..03df6dbce
--- /dev/null
+++ b/web/cobrands/tfl/warning-green@2x.png
diff --git a/web/cobrands/tfl/warning.svg b/web/cobrands/tfl/warning.svg
new file mode 100644
index 000000000..dc17aa6d5
--- /dev/null
+++ b/web/cobrands/tfl/warning.svg
@@ -0,0 +1,4 @@
+<svg width="39" height="35" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg">
+<g><polygon fill="#ffffff" points="4,32 36,32 20,4 4,32" stroke="#000000" stroke-width="5" stroke-linejoin="round"/></g>
+<g><polygon fill="#ffffff" points="4,32 36,32 20,4 4,32" stroke="#f00000" stroke-width="3" stroke-linejoin="round"/></g>
+</svg>
\ No newline at end of file
diff --git a/web/cobrands/tfl/warning@2x.png b/web/cobrands/tfl/warning@2x.png
new file mode 100644
index 000000000..e45d33556
--- /dev/null
+++ b/web/cobrands/tfl/warning@2x.png