Rework notes interface using OpenLayers and rails

app/controllers/note_controller.rb

@@ -48,9 +48,7 @@ class NoteController < ApplicationController
 
     # Render the result
     respond_to do |format|
-      format.html { render :format => :rjs, :content_type => "text/javascript" }
       format.rss
-      format.js
       format.xml
       format.json
       format.gpx

app/views/note/list.rjs

@@ -1,6 +0,0 @@
-@notes.each do |note|
-  page.call "putAJAXMarker",
-            note.id, note.lon, note.lat,
-            note.flatten_comment("<hr />"),
-            note.status == "open" ? 0 : 1
-end

app/views/site/index.html.erb

@@ -123,7 +123,6 @@ end
 
 <%= javascript_include_tag '/openlayers/OpenLayers.js' %>
 <%= javascript_include_tag '/openlayers/OpenStreetMap.js' %>
-<%= javascript_include_tag 'notes.js' %>
 <%= javascript_include_tag 'map.js' %>
 
 <%= render :partial => 'resize' %>
@@ -146,13 +145,61 @@ end
       map.dataLayer.events.register("visibilitychanged", map.dataLayer, toggleData);
       map.addLayer(map.dataLayer);
 
-      map.noteLayer = new OpenLayers.Layer.Notes("Notes", {
+      map.noteLayer = new OpenLayers.Layer.Vector("Notes", {
-          setCookie: false,
+          visibility: false,
-          permalinkURL: "http://www.openstreetmap.org/",
+          projection: new OpenLayers.Projection("EPSG:4326"),
-          visibility: <%= params[:notes] == "yes" %>
+          styleMap: new OpenLayers.StyleMap(new OpenLayers.Style({
+              graphicWidth: 22,
+              graphicHeight: 22,
+              graphicOpacity: 0.7,
+              graphicXOffset: -11,
+              graphicYOffset: -11
+          }, {
+              rules: [
+                  new OpenLayers.Rule({
+                      filter: new OpenLayers.Filter.Comparison({
+                          type: OpenLayers.Filter.Comparison.EQUAL_TO,
+                          property: "status",
+                          value: "open"
+                      }),
+                      symbolizer: {
+                          externalGraphic: "<%= image_path 'open_note_marker.png' %>"
+                      }
+                  }),
+                  new OpenLayers.Rule({
+                      filter: new OpenLayers.Filter.Comparison({
+                          type: OpenLayers.Filter.Comparison.EQUAL_TO,
+                          property: "status",
+                          value: "closed"
+                      }),
+                      symbolizer: {
+                          externalGraphic: "<%= image_path 'closed_note_marker.png' %>"
+                      }
+                 })
+              ]
+          })),
+          strategies: [
+              new OpenLayers.Strategy.BBOX()
+          ],
+          protocol: new OpenLayers.Protocol.HTTP({
+              url: "<%= url_for :controller => :note, :action => :list, :format => :json %>",
+              format: new OpenLayers.Format.GeoJSON(),
+              callback: noteCallback
+          })
       });
+      map.noteLayer.events.register("featureselected", map, noteSelected);
+      map.noteLayer.events.register("featureunselected", map, noteUnselected);
       map.addLayer(map.noteLayer);
 
+      var noteControl = new OpenLayers.Control.SelectFeature(map.noteLayer, {
+          autoActivate: true
+      });
+      map.addControl(noteControl);
+
+      <% if params[:notes] == "yes" -%>
+      map.noteLayer.setVisibility(true);
+      <% end -%>
+
       $("createnoteanchor").observe("click", addNote);
 
       map.events.register("zoomend", map, allowNoteReports);
@@ -284,6 +331,32 @@ end
     <% end %>
   }
 
+  function noteCallback(scope, response) {
+    for (var f = 0; f < response.features.length; f++) {
+      var feature = response.features[f];
+    }
+  }
+
+  function noteSelected(o) {
+    var feature = o.feature;
+    var location = feature.geometry.getBounds().getCenterLonLat();
+
+    feature.popup = new OpenLayers.Popup.FramedCloud(feature.attributes.id,
+                                                     location, null,
+                                                     "<p>" + feature.attributes.id + "</p>",
+                                                     null, true);
+
+    map.addPopup(feature.popup);
+//    feature.popup.show();
+  }
+
+  function noteUnselected(o) {
+    var feature = o.feature;
+
+    map.removePopup(feature.popup);
+    delete feature.popup;
+  }
+
   function addNote() {
     map.noteLayer.setVisibility(true);
     map.noteLayer.addNote(map.getCenter());

config/openlayers.cfg

@@ -28,12 +28,15 @@ OpenLayers/Layer/Vector.js
 OpenLayers/Tile.js
 OpenLayers/Tile/Image.js
 OpenLayers/Feature/Vector.js
+OpenLayers/Format/GeoJSON.js
 OpenLayers/Format/GML.js
 OpenLayers/Format/OSM.js
 OpenLayers/Geometry/Point.js
 OpenLayers/Geometry/LinearRing.js
 OpenLayers/Handler/Point.js
 OpenLayers/Handler/RegularPolygon.js
+OpenLayers/Strategy/BBOX.js
+OpenLayers/Protocol/HTTP.js
 OpenLayers/Renderer.js
 OpenLayers/Renderer/Canvas.js
 OpenLayers/Renderer/SVG.js