Move to Vector layer rather than Markers, to be able to use the Strategy/Protocol features.

8 files changed, 99 insertions, 36 deletions

diff --git a/perllib/FixMyStreet/App/Controller/Around.pm b/perllib/FixMyStreet/App/Controller/Around.pm
index a49d796fc..ef85ba7ea 100644
--- a/perllib/FixMyStreet/App/Controller/Around.pm
+++ b/perllib/FixMyStreet/App/Controller/Around.pm
@@ -196,6 +196,7 @@ sub display_location : Private {
         } @$on_map_all, @$around_map;
     }
 
+    $c->stash->{page} = 'around'; # So the map knows to make clickable pins, update on pan
     FixMyStreet::Map::display_map(
         $c,
         latitude  => $latitude,
diff --git a/perllib/FixMyStreet/App/Controller/Report/New.pm b/perllib/FixMyStreet/App/Controller/Report/New.pm
index 4488ce8cd..3a7d18a1c 100644
--- a/perllib/FixMyStreet/App/Controller/Report/New.pm
+++ b/perllib/FixMyStreet/App/Controller/Report/New.pm
@@ -71,10 +71,6 @@ phone
 
 partial
 
-=head2 can be ignored
-
-all_pins: related to map display - not relevant to creation of a new report
-
 =cut
 
 sub report_new : Path : Args(0) {
diff --git a/perllib/FixMyStreet/Map.pm b/perllib/FixMyStreet/Map.pm
index 125aca9e6..97482a761 100644
--- a/perllib/FixMyStreet/Map.pm
+++ b/perllib/FixMyStreet/Map.pm
@@ -68,12 +68,29 @@ sub map_features {
    # use deltas that are roughly 500m in the UK - so we get a 1 sq km search box
     my $lat_delta = 0.00438;
     my $lon_delta = 0.00736;
+    return _map_features(
+        $c, $lat, $lon,
+        $lon - $lon_delta, $lat - $lat_delta,
+        $lon + $lon_delta, $lat + $lat_delta,
+        $interval
+    );
+}
+
+sub map_features_bounds {
+    my ( $c, $min_lon, $min_lat, $max_lon, $max_lat, $interval ) = @_;
 
-    my $min_lat = $lat - $lat_delta;
-    my $max_lat = $lat + $lat_delta;
+    my $lat = ( $max_lat + $min_lat ) / 2;
+    my $lon = ( $max_lon + $min_lon ) / 2;
+    return _map_features(
+        $c, $lat, $lon,
+        $min_lon, $min_lat.
+        $max_lon, $max_lat,
+        $interval
+    );
+}
 
-    my $min_lon = $lon - $lon_delta;
-    my $max_lon = $lon + $lon_delta;
+sub _map_features {
+    my ( $c, $lat, $lon, $min_lon, $min_lat, $max_lon, $max_lat, $interval ) = @_;
 
     # list of problems around map can be limited, but should show all pins
     my $around_limit = $c->cobrand->on_map_list_limit || undef;
diff --git a/templates/web/default/around/display_location.html b/templates/web/default/around/display_location.html
index aa1dc86d6..529c12eec 100755
--- a/templates/web/default/around/display_location.html
+++ b/templates/web/default/around/display_location.html
@@ -61,10 +61,6 @@
     [% END %]
 </p>
 
-[% IF c.cobrand.country == 'GB' %]
-<input type='hidden' id='all_pins' name='all_pins' value='[% all_pins | html %]'>
-[% END %]
-
 </div>
 <div id="side">
 
diff --git a/templates/web/default/maps/openlayers.html b/templates/web/default/maps/openlayers.html
index b7cf705b0..e5b1a6792 100644
--- a/templates/web/default/maps/openlayers.html
+++ b/templates/web/default/maps/openlayers.html
@@ -7,6 +7,8 @@
 <input type="hidden" name="zoom" value="[% map.zoom %]">
 <script type="text/javascript">
 var fixmystreet = {
+    'page': '[% page %]',
+    'all_pins': [% all_pins || "''" | html %],
     'latitude': [% map.latitude %],
     'longitude': [% map.longitude %],
 [% IF map.any_zoom -%]
diff --git a/templates/web/default/maps/tilma/original.html b/templates/web/default/maps/tilma/original.html
index e02a974f8..5a07683ac 100644
--- a/templates/web/default/maps/tilma/original.html
+++ b/templates/web/default/maps/tilma/original.html
@@ -22,6 +22,7 @@
 <script type="text/javascript">
 [% c.cobrand.root_path_js %]
 var fixmystreet = {
+    'all_pins': [% all_pins || "''" | html %],
     'x': [% map.x - 3 %],
     'y': [% map.y - 3 %],
     'start_x': [% map.px %],
diff --git a/web/js/map-OpenLayers.js b/web/js/map-OpenLayers.js
index e4de17764..fb11b89fa 100644
--- a/web/js/map-OpenLayers.js
+++ b/web/js/map-OpenLayers.js
@@ -41,30 +41,55 @@ YAHOO.util.Event.onContentReady('map', function() {
         return false;
     });
 
-    fixmystreet.markers = new OpenLayers.Layer.Markers("Markers");
+    var pin_layer_options = {
+        styleMap: new OpenLayers.StyleMap({
+            'default': new OpenLayers.Style({
+                externalGraphic: "/i/pin${type}.gif",
+                graphicWidth: 32,
+                graphicHeight: 59,
+                graphicOpacity: 1,
+                graphicXOffset: -1,
+                graphicYOffset: -59
+            })
+        })
+    };
+    if (fixmystreet.page == 'around') {
+        //pin_layer_options.strategies = [ new OpenLayers.Strategy.BBOX() ];
+        //pin_layer_options.protocol = new OpenLayers.Protocol.HTTP({
+        //    url: '/rss',
+        //    params: fixmystreet.all_pins ? { all_pins: 1 } : { },
+        //    format: OpenLayers.Format.GeoRSS
+        //});
+    }
+    fixmystreet.markers = new OpenLayers.Layer.Vector("Pins", pin_layer_options);
+
     var cols = { 'red':'R', 'green':'G', 'blue':'B', 'purple':'P' };
+    var markers = [];
     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]);
+        var loc = new OpenLayers.Geometry.Point(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);
+        var marker = new OpenLayers.Feature.Vector(loc, {
+            type: cols[pin[2]],
+            id: pin[3]
+        });
+        markers.push( marker );
+    }
+    fixmystreet.markers.addFeatures( markers );
+    if (fixmystreet.page == 'around') {
+        fixmystreet.markers.events.register( 'featureselected', fixmystreet.markers, function(evt) {
+            window.location = '/report/' + evt.feature.attributes.id;
+            OpenLayers.Event.stop(evt);
+        });
+        var select = new OpenLayers.Control.SelectFeature( fixmystreet.markers );
+        fixmystreet.map.addControl( select );
+        select.activate();
     }
     fixmystreet.map.addLayer(fixmystreet.markers);
+
     if ( fixmystreet.zoomToBounds ) {
         fixmystreet.map.zoomToExtent( fixmystreet.markers.getDataExtent() );
     }
@@ -89,6 +114,35 @@ YAHOO.util.Event.addListener('hide_pins_link', 'click', function(e) {
     }
 });
 
+YAHOO.util.Event.addListener('all_pins_link', 'click', function(e) {
+    YAHOO.util.Event.preventDefault(e);
+    fixmystreet.markers.setVisibility(true);
+    var welsh = 0;
+    var texts = [
+        'en', 'Include stale reports', 'Hide stale reports',
+        'cy', 'Cynnwys hen adroddiadau', 'Cuddio hen adroddiadau'
+    ];
+    for (var i=0; i<texts.length; i+=3) {
+        if (this.innerHTML == texts[i+1]) {
+            this.innerHTML = texts[i+2];
+            fixmystreet.markers.protocol.options.params = { all_pins: 1 };
+            fixmystreet.markers.refresh( { force: true } );
+            lang = texts[i];
+        } else if (this.innerHTML == texts[i+2]) {
+            this.innerHTML = texts[i+1];
+            fixmystreet.markers.protocol.options.params = { };
+            fixmystreet.markers.refresh( { force: true } );
+            lang = texts[i];
+        }
+    }
+    if (lang == 'cy') {
+        document.getElementById('hide_pins_link').innerHTML = 'Cuddio pinnau';
+    } else {
+        document.getElementById('hide_pins_link').innerHTML = 'Hide pins';
+    }
+});
+
+
 /* Overridding the buttonDown function of PanZoom so that it does
    zoomTo(0) rather than zoomToMaxExtent()
 */
diff --git a/web/js/map-tilma.js b/web/js/map-tilma.js
index 3c5f546e5..a6e4fa082 100644
--- a/web/js/map-tilma.js
+++ b/web/js/map-tilma.js
@@ -60,21 +60,21 @@ YAHOO.util.Event.addListener('all_pins_link', 'click', function(e) {
     var welsh = 0;
     if (this.innerHTML == 'Include stale reports') {
         this.innerHTML = 'Hide stale reports';
-        document.getElementById('all_pins').value = '1';
+        fixmystreet.all_pins = 1;
         load_pins(fixmystreet.x, fixmystreet.y);
     } else if (this.innerHTML == 'Cynnwys hen adroddiadau') {
         this.innerHTML = 'Cuddio hen adroddiadau';
-        document.getElementById('all_pins').value = '1';
+        fixmystreet.all_pins = 1;
         welsh = 1;
         load_pins(fixmystreet.x, fixmystreet.y);
     } else if (this.innerHTML == 'Cuddio hen adroddiadau') {
         this.innerHTML = 'Cynnwys hen adroddiadau';
         welsh = 1;
-        document.getElementById('all_pins').value = '';
+        fixmystreet.all_pins = '';
         load_pins(fixmystreet.x, fixmystreet.y);
     } else if (this.innerHTML == 'Hide stale reports') {
         this.innerHTML = 'Include stale reports';
-        document.getElementById('all_pins').value = '';
+        fixmystreet.all_pins = '';
         load_pins(fixmystreet.x, fixmystreet.y);
     }
     if (welsh) {
@@ -136,15 +136,11 @@ function update_tiles(dx, dy, force) {
 
 function load_pins(x, y) {
     if (document.getElementById('formX') && !document.getElementById('problem_submit')) {
-        all_pins = '';
-        if (document.getElementById('all_pins')) {
-            all_pins = document.getElementById('all_pins').value;
-        }
         var ajax_params = [ 'sx=' + document.getElementById('formX').value, 
                             'sy=' + document.getElementById('formY').value, 
                             'x='  + (x+3),
                             'y='  + (y+3), 
-                            'all_pins=' +  all_pins ];
+                            'all_pins=' +  fixmystreet.all_pins ];
 
         var url = [ root_path , '/ajax?', ajax_params.join(';')].join('');
         YAHOO.util.Connect.asyncRequest('GET', url, {