Tidy up code for adding a map to the changeset list page

app/views/changeset/_changeset.html.erb

@@ -1,6 +1,6 @@
 <% cl = cycle('table0', 'table1') %>
-<tr class="<%= cl %>" id="tr-changeset-<%= changeset.id%>" onMouseOver="highlightChangesetMap('changeset-<%= changeset.id %>');this.style.backgroundColor='#ffff55';" onMouseOut="unHighlightChangesetMap('changeset-<%= changeset.id %>');this.style.backgroundColor='';">
 
+<tr class="<%= cl %>" id="tr-changeset-<%= changeset.id%>">
   <td>
     <%=
       id_link = link_to(changeset.id,
@@ -52,3 +52,13 @@
     <% end %>
   </td>
 </tr>
+
+<script type="text/javascript">
+$("tr-changeset-<%= changeset.id%>").observe("mouseover", function() {
+  highlightChangeset("<%= changeset.id %>");
+});
+
+$("tr-changeset-<%= changeset.id%>").observe("mouseout", function() {
+  unHighlightChangeset("<%= changeset.id %>");
+});
+</script>

app/views/changeset/_changeset_map_add.html.erb

@@ -1,8 +0,0 @@
-        var minlon = <%= changeset_map_add.min_lon / GeoRecord::SCALE.to_f %>;
-        var minlat = <%= changeset_map_add.min_lat / GeoRecord::SCALE.to_f %>;
-        var maxlon = <%= changeset_map_add.max_lon / GeoRecord::SCALE.to_f %>;
-        var maxlat = <%= changeset_map_add.max_lat / GeoRecord::SCALE.to_f %>;
-        var bbox = new OpenLayers.Bounds(minlon, minlat, maxlon, maxlat);
-
-        bounds.extend(bbox);
-        box = addBoxToMap(bbox, {name: "changeset-<%= changeset_map_add.id %>"}, true);

app/views/changeset/_map.html.erb

@@ -1,74 +1,80 @@
 <%= javascript_include_tag '/openlayers/OpenLayers.js' %>
 <%= javascript_include_tag '/openlayers/OpenStreetMap.js' %>
 <%= javascript_include_tag 'map.js' %>
+
 <div id="browse_map_changeset">
   <div id="small_map">
   </div>
   <span id="loading"><%= t 'browse.map.loading' %></span>
 </div>
+
 <script type="text/javascript">
   OpenLayers.Lang.setCode("<%= I18n.locale.to_s %>");
 
-  /*
+  function highlightChangeset(id) {
-    This function borrowed from the latest version of OpenLayers.Layer.Vector. OSM is using an older version.
+    var feature = vectors.getFeatureByFid(id);
-    http://trac.osgeo.org/openlayers/browser/trunk/openlayers/lib/OpenLayers/Layer/Vector.js
+    feature.style.strokeColor = "#ffff55";
-  */
+    feature.style.strokeWidth = 4;
-  function getFeaturesByAttribute(obj, attrName, attrValue) {
-        var i,
-            feature,    
-            len = obj.features.length,
-            foundFeatures = [];
-        for(i = 0; i < len; i++) {            
-            feature = obj.features[i];
-            if(feature && feature.attributes) {
-                if (feature.attributes[attrName] === attrValue) {
-                    foundFeatures.push(feature);
-                }
-            }
-        }
-        return foundFeatures;
-  }
-  function highlightChangesetMap(name) {
-    getFeaturesByAttribute(vectors,'name',name)[0].style.strokeColor='#ffff55';
     vectors.redraw(); 
+
+    $("tr-changeset-" + id).addClassName("selected");
   } 
-  function unHighlightChangesetMap(name) {
+
-    getFeaturesByAttribute(vectors,'name',name)[0].style.strokeColor='#ee9900';
+  function unHighlightChangeset(id) {
+    var feature = vectors.getFeatureByFid(id);
+    feature.style.strokeColor = "#ee9900";
+    feature.style.strokeWidth = 2;
     vectors.redraw(); 
+
+    $("tr-changeset-" + id).removeClassName("selected");
   }      
+
   function init() {
     var map = createMap("small_map", {
-      controls: [ new OpenLayers.Control.Navigation(), new OpenLayers.Control.PanZoom(), new OpenLayers.Control.PanZoomBar() ]
+      controls: [
+        new OpenLayers.Control.Navigation(),
+        new OpenLayers.Control.PanZoom(),
+        new OpenLayers.Control.PanZoomBar()
+      ]
     });
     
     var bounds = new OpenLayers.Bounds();
-    <%= render :partial => 'changeset_map_add', :collection => @edits unless @edits.nil? %>
+
+    <% @edits.each do |edit| %>
+    var minlon = <%= edit.min_lon / GeoRecord::SCALE.to_f %>;
+    var minlat = <%= edit.min_lat / GeoRecord::SCALE.to_f %>;
+    var maxlon = <%= edit.max_lon / GeoRecord::SCALE.to_f %>;
+    var maxlat = <%= edit.max_lat / GeoRecord::SCALE.to_f %>;
+    var bbox = new OpenLayers.Bounds(minlon, minlat, maxlon, maxlat);
+
+    bounds.extend(bbox);
+    box = addBoxToMap(bbox, "<%= edit.id %>", true);
+    <% end %>
      
     vectors.events.on({
-      'featureselected': function(feature) {
+      "featureselected": function(feature) {
-         document.getElementById('tr-' + feature.feature.attributes['name']).style.backgroundColor = '#ffff55';
+        highlightChangeset(feature.feature.fid);
-         feature.feature.style.strokeColor='#ffff00';
+      },
-         vectors.redraw();
+      "featureunselected": function(feature) {
-       },
+        unHighlightChangeset(feature.feature.fid);
-       'featureunselected': function(feature) {
+      }
-         document.getElementById('tr-' + feature.feature.attributes['name']).style.backgroundColor = '';
+    });
-         feature.feature.style.strokeColor='#ee9900';
+
-         vectors.redraw();
+    var selectControl = new OpenLayers.Control.SelectFeature(vectors, {
-       }
+      multiple: false, 
+      hover: true
     });
-    var selectControl = new OpenLayers.Control.SelectFeature(vectors,
-      {multiple: false, hover:true});
     map.addControl(selectControl);
     selectControl.activate();
 
-    <!-- if bounds were passed, just use those -->
     <% if ! @bbox.nil? %>
-      bounds = new OpenLayers.Bounds(<%= @bbox %>);
+      setMapExtent(new OpenLayers.Bounds(<%= @bbox %>));
+    <% else %>
+      setMapExtent(bounds);
     <% end %>
-    setMapExtent(bounds);
 
     $("loading").innerHTML = "";
   }
 
-  window.onload = init;
+  Event.observe(window, "load", init);
 </script>

public/javascripts/map.js

@@ -149,7 +149,7 @@ function addObjectToMap(url, zoom, callback) {
    layer.loadGML();
 }
 
-function addBoxToMap(boxbounds, attributes, line) {
+function addBoxToMap(boxbounds, id, outline) {
    if (!vectors) {
      // Be aware that IE requires Vector layers be initialised on page load, and not under deferred script conditions
      vectors = new OpenLayers.Layer.Vector("Boxes", {
@@ -157,20 +157,20 @@ function addBoxToMap(boxbounds, attributes, line) {
      });
      map.addLayer(vectors);
    }
-
    var geometry;
-   if (line) {
+   if (outline) {
      vertices = boxbounds.toGeometry().getVertices();
-     vertices.push( new OpenLayers.Geometry.Point( vertices[0].x, vertices[0].y ) );
+     vertices.push(new OpenLayers.Geometry.Point(vertices[0].x, vertices[0].y));
      geometry = new OpenLayers.Geometry.LineString(vertices).transform(epsg4326, map.getProjectionObject());
    } else {
      geometry = boxbounds.toGeometry().transform(epsg4326, map.getProjectionObject());
    }
-   var box = new OpenLayers.Feature.Vector(geometry, attributes, {
+   var box = new OpenLayers.Feature.Vector(geometry, {}, {
       strokeWidth: 2,
       strokeColor: '#ee9900',
       fillOpacity: 0
    });
+   box.fid = id;
 
    vectors.addFeatures(box);
 

public/stylesheets/common.css

@@ -611,6 +611,10 @@ hr {
   white-space: nowrap;
 }
 
+#changeset_list .selected {
+  background-color: #ffff55;
+}
+
 /* Rules for the data browser */
 
 #browse_navigation {