Strategy/Format for updating pins as map is panned.

5 files changed, 94 insertions, 40 deletions

diff --git a/perllib/FixMyStreet/App/Controller/Around.pm b/perllib/FixMyStreet/App/Controller/Around.pm
index ef85ba7ea..0f5450d5f 100644
--- a/perllib/FixMyStreet/App/Controller/Around.pm
+++ b/perllib/FixMyStreet/App/Controller/Around.pm
@@ -235,31 +235,19 @@ the map.
 sub ajax : Path('/ajax') {
     my ( $self, $c ) = @_;
 
-    # Our current X/Y middle of visible map
-    my $x = ( $c->req->param('x') || 0 ) + 0;
-    my $y = ( $c->req->param('y') || 0 ) + 0;
-
-    # Where we started as that's the (0,0) we have to work to
-    my $sx = ( $c->req->param('sx') || 0 ) + 0;
-    my $sy = ( $c->req->param('sy') || 0 ) + 0;
-
     # how far back should we go?
     my $all_pins = $c->req->param('all_pins') ? 1 : undef;
     my $interval = $all_pins ? undef : $c->cobrand->on_map_default_max_pin_age;
 
     # extract the data from the map
     my ( $pins, $on_map, $around_map, $dist ) =
-      FixMyStreet::Map::map_pins( $c, $x, $y, $sx, $sy, $interval );
+      FixMyStreet::Map::map_pins( $c, $interval );
 
     # render templates to get the html
-    # my $on_map_list_html = $c->forward(
-    #     "View::Web", "render",
     my $on_map_list_html =
       $c->view('Web')
       ->render( $c, 'around/on_map_list_items.html', { on_map => $on_map } );
 
-    # my $around_map_list_html = $c->forward(
-    #     "View::Web", "render",
     my $around_map_list_html = $c->view('Web')->render(
         $c,
         'around/around_map_list_items.html',
@@ -279,8 +267,12 @@ sub ajax : Path('/ajax') {
     $c->res->content_type('text/javascript; charset=utf-8');
     $c->res->header( 'Cache_Control' => 'max-age=0' );
 
-    # Set the body - note that the js needs the surrounding brackets.
-    $c->res->body("($body)");
+    if ( $c->req->param('bbox') ) {
+        $c->res->body($body);
+    } else {
+        # The JS needs the surrounding brackets for Tilma
+        $c->res->body("($body)");
+    }
 }
 
 __PACKAGE__->meta->make_immutable;
diff --git a/perllib/FixMyStreet/Map.pm b/perllib/FixMyStreet/Map.pm
index 97482a761..6b5a811a6 100644
--- a/perllib/FixMyStreet/Map.pm
+++ b/perllib/FixMyStreet/Map.pm
@@ -83,7 +83,7 @@ sub map_features_bounds {
     my $lon = ( $max_lon + $min_lon ) / 2;
     return _map_features(
         $c, $lat, $lon,
-        $min_lon, $min_lat.
+        $min_lon, $min_lat,
         $max_lon, $max_lat,
         $interval
     );
diff --git a/perllib/FixMyStreet/Map/OSM.pm b/perllib/FixMyStreet/Map/OSM.pm
index 9b968b4f6..05dc6ad39 100644
--- a/perllib/FixMyStreet/Map/OSM.pm
+++ b/perllib/FixMyStreet/Map/OSM.pm
@@ -95,6 +95,32 @@ sub display_map {
     };
 }
 
+sub map_pins {
+    my ($self, $c, $interval) = @_;
+
+    my $bbox = $c->req->param('bbox');
+    my ( $min_lon, $min_lat, $max_lon, $max_lat ) = split /,/, $bbox;
+
+    my ( $around_map, $around_map_list, $nearby, $dist ) =
+      FixMyStreet::Map::map_features_bounds( $c, $min_lon, $min_lat, $max_lon, $max_lat, $interval );
+
+    # create a list of all the pins
+    my @pins = map {
+        # Here we might have a DB::Problem or a DB::Nearby, we always want the problem.
+        my $p = (ref $_ eq 'FixMyStreet::App::Model::DB::Nearby') ? $_->problem : $_;
+        #{
+        #    latitude  => $p->latitude,
+        #    longitude => $p->longitude,
+        #    colour    => $p->state eq 'fixed' ? 'green' : 'red',
+        #    id        => $p->id,
+        #    title     => $p->title,
+        #}
+        [ $p->latitude, $p->longitude, $p->state eq 'fixed' ? 'green' : 'red', $p->id, $p->title ]
+    } @$around_map, @$nearby;
+
+    return (\@pins, $around_map_list, $nearby, $dist);
+}
+
 sub compass {
     my ( $x, $y, $z ) = @_;
     return {
diff --git a/perllib/FixMyStreet/Map/Tilma/Original.pm b/perllib/FixMyStreet/Map/Tilma/Original.pm
index 6fa854cb2..0baa82011 100644
--- a/perllib/FixMyStreet/Map/Tilma/Original.pm
+++ b/perllib/FixMyStreet/Map/Tilma/Original.pm
@@ -96,7 +96,15 @@ sub display_pin {
 }
 
 sub map_pins {
-    my ($self, $c, $x, $y, $sx, $sy, $interval) = @_;
+    my ($self, $c, $interval) = @_;
+
+    # Our current X/Y middle of visible map
+    my $x = ( $c->req->param('x') || 0 ) + 0;
+    my $y = ( $c->req->param('y') || 0 ) + 0;
+
+    # Where we started as that's the (0,0) we have to work to
+    my $sx = ( $c->req->param('sx') || 0 ) + 0;
+    my $sy = ( $c->req->param('sy') || 0 ) + 0;
 
     my $e = tile_to_os($x);
     my $n = tile_to_os($y);
diff --git a/web/js/map-OpenLayers.js b/web/js/map-OpenLayers.js
index fb11b89fa..4a7d3b97e 100644
--- a/web/js/map-OpenLayers.js
+++ b/web/js/map-OpenLayers.js
@@ -45,6 +45,7 @@ YAHOO.util.Event.onContentReady('map', function() {
         styleMap: new OpenLayers.StyleMap({
             'default': new OpenLayers.Style({
                 externalGraphic: "/i/pin${type}.gif",
+                graphicTitle: "${title}",
                 graphicWidth: 32,
                 graphicHeight: 59,
                 graphicOpacity: 1,
@@ -54,30 +55,16 @@ YAHOO.util.Event.onContentReady('map', function() {
         })
     };
     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
-        //});
+        pin_layer_options.strategies = [ new OpenLayers.Strategy.BBOX() ];
+        pin_layer_options.protocol = new OpenLayers.Protocol.HTTP({
+            url: '/ajax',
+            params: fixmystreet.all_pins ? { all_pins: 1, map: 'FMS' } : { map: 'FMS' },
+            format: new OpenLayers.Format.FixMyStreet()
+        });
     }
     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 loc = new OpenLayers.Geometry.Point(pin[1], pin[0]);
-        loc.transform(
-            new OpenLayers.Projection("EPSG:4326"),
-            fixmystreet.map.getProjectionObject()
-        );
-        var marker = new OpenLayers.Feature.Vector(loc, {
-            type: cols[pin[2]],
-            id: pin[3]
-        });
-        markers.push( marker );
-    }
+    var markers = fms_markers_list( fixmystreet.pins, true );
     fixmystreet.markers.addFeatures( markers );
     if (fixmystreet.page == 'around') {
         fixmystreet.markers.events.register( 'featureselected', fixmystreet.markers, function(evt) {
@@ -96,6 +83,29 @@ YAHOO.util.Event.onContentReady('map', function() {
 
 });
 
+function fms_markers_list(pins, transform) {
+    var cols = { 'red':'R', 'green':'G', 'blue':'B', 'purple':'P' };
+    var markers = [];
+    for (var i=0; i<pins.length; i++) {
+        var pin = pins[i];
+        var loc = new OpenLayers.Geometry.Point(pin[1], pin[0]);
+        if (transform) {
+            // The Strategy does this for us, so don't do it in that case.
+            loc.transform(
+                new OpenLayers.Projection("EPSG:4326"),
+                fixmystreet.map.getProjectionObject()
+            );
+        }
+        var marker = new OpenLayers.Feature.Vector(loc, {
+            type: cols[pin[2]],
+            id: pin[3],
+            title: pin[4]
+        });
+        markers.push( marker );
+    }
+    return markers;
+}
+
 YAHOO.util.Event.addListener('hide_pins_link', 'click', function(e) {
     YAHOO.util.Event.preventDefault(e);
     var showhide = [
@@ -125,12 +135,12 @@ YAHOO.util.Event.addListener('all_pins_link', 'click', function(e) {
     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.protocol.options.params = { all_pins: 1, map: 'FMS' };
             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.protocol.options.params = { map: 'FMS' };
             fixmystreet.markers.refresh( { force: true } );
             lang = texts[i];
         }
@@ -199,6 +209,24 @@ OpenLayers.Control.PermalinkFMS = OpenLayers.Class(OpenLayers.Control.Permalink,
     }
 });
 
+/* Pan data handler */
+OpenLayers.Format.FixMyStreet = OpenLayers.Class(OpenLayers.Format.JSON, {
+    read: function(json, filter) {
+        if (typeof json == 'string') {
+            obj = OpenLayers.Format.JSON.prototype.read.apply(this, [json, filter]);
+        } else {
+            obj = json;
+        }
+        if (typeof(obj.current) != 'undefined')
+            document.getElementById('current').innerHTML = obj.current;
+        if (typeof(obj.current_near) != 'undefined')
+            document.getElementById('current_near').innerHTML = obj.current_near;
+        var markers = fms_markers_list( obj.pins, false );
+        return markers;
+    },
+    CLASS_NAME: "OpenLayers.Format.FixMyStreet"
+});
+
 /* Click handler */
 OpenLayers.Control.Click = OpenLayers.Class(OpenLayers.Control, {                
     defaultHandlerOptions: {