first stab at highlighting map behaviour

gazetteer/static/js/gazetteer.js

@@ -5,41 +5,31 @@ $(function() {
 //    map.addLayer(baseLayer);
     var geojson_format = new OpenLayers.Format.GeoJSON();
     var jsonLayer = new OpenLayers.Layer.Vector();
+
     map.addLayers([baseLayer, jsonLayer]);
     var center = new OpenLayers.LonLat(-95, 37.5).transform(
                     new OpenLayers.Projection("EPSG:4326"),
                     map.getProjectionObject()
                 ); 
     map.setCenter(center, 4);
+    var mapControl = new OpenLayers.Control.SelectFeature(jsonLayer, {hover: true});
+    map.addControl(mapControl);
+    mapControl.activate();
+    jsonLayer.events.on({
+      'featureselected': onFeatureSelect,
+      'featureunselected': onFeatureUnselect
+    }); 
 
 
-    $('.first').click(function() {
+    function getFeatureById(id) {
-        $('#page_no').val('1');
+      var features = jsonLayer.features;
-        $('#searchForm').submit();
+      for (var i=0; i < features.length; i++) {
-    });
+        if (features[i].attributes.id == id) {
-
+          return features[i];
-    $('.last').click(function() {
-        var lastPage = parseInt($('#totalPages').text());
-        $('#page_no').val(lastPage);
-        $('#searchForm').submit();
-    });
-
-    $('.next').click(function() {
-        var currPage = parseInt($('#page_no').val());
-        var lastPage = parseInt($('#totalPages').text());
-        if (currPage < lastPage) {
-            $('#page_no').val(currPage + 1);
-            $('#searchForm').submit();
         }
-    });
+      }  
-
+      return false;
-    $('.previous').click(function() {
+    }
-        var currPage = parseInt($('#page_no').val());
-        if (currPage > 1) {
-            $('#page_no').val(currPage - 1);
-            $('#searchForm').submit();            
-        }
-    });
 
     $('#searchForm').submit(function(e) {
         e.preventDefault();
@@ -83,19 +73,77 @@ $(function() {
             }             
         });
     });
+
+    /* pagination code */
+    $('.first').click(function() {
+        $('#page_no').val('1');
+        $('#searchForm').submit();
+    });
+
+    $('.last').click(function() {
+        var lastPage = parseInt($('#totalPages').text());
+        $('#page_no').val(lastPage);
+        $('#searchForm').submit();
+    });
+
+    $('.next').click(function() {
+        var currPage = parseInt($('#page_no').val());
+        var lastPage = parseInt($('#totalPages').text());
+        if (currPage < lastPage) {
+            $('#page_no').val(currPage + 1);
+            $('#searchForm').submit();
+        }
+    });
+
+    $('.previous').click(function() {
+        var currPage = parseInt($('#page_no').val());
+        if (currPage > 1) {
+            $('#page_no').val(currPage - 1);
+            $('#searchForm').submit();            
+        }
+    });
+    /* pagination code end */
+
+    function getRow(props) {
+        var $tr = $('<tr />').attr("id", "feature" + props.id).data("id", props.id).hover(function() {
+            var id = $(this).data("id");
+            var feature = getFeatureById(id);
+            mapControl.select(feature);
+        }, function() {
+            var id = $(this).data("id");
+            var feature = getFeatureById(id);
+            mapControl.unselect(feature);            
+        });
+        var $one = $('<td />').appendTo($tr);
+        var $a = $('<a />').attr("href", "/admin/places/feature/" + props.id).text(props.preferred_name).appendTo($one);
+    //    var $a2 = $('<a />').addClass("viewSimilar").attr("target", "_blank").attr("href", "/search_related?id=" + props.id).text("view similar").appendTo($one);
+        $('<td />').text(props.feature_type).appendTo($tr);
+        $('<td />').text(props.admin2).appendTo($tr);
+        $('<td />').text(props.admin1).appendTo($tr);
+        return $tr;     
+    }
+
+
+
+
 });
 
-function getRow(props) {
+
-    var $tr = $('<tr />');
+function onFeatureSelect(f) {
-    var $one = $('<td />').appendTo($tr);
+    var id = f.feature.attributes.id;
-    var $a = $('<a />').attr("href", "/admin/places/feature/" + props.id).text(props.preferred_name).appendTo($one);
+//    $('.highlightOverlay').hide().remove();
-//    var $a2 = $('<a />').addClass("viewSimilar").attr("target", "_blank").attr("href", "/search_related?id=" + props.id).text("view similar").appendTo($one);
+  //  $('img').removeClass('mapSelect');
-    $('<td />').text(props.feature_type).appendTo($tr);
+    var $tr = $('#feature' + id);
-    $('<td />').text(props.admin2).appendTo($tr);
+    $tr.css({"font-weight": "bold"});
-    $('<td />').text(props.admin1).appendTo($tr);
-    return $tr;     
 }
 
+function onFeatureUnselect(f) {
+    var id = f.feature.attributes.id;
+//    $('.highlightOverlay').hide().remove();
+  //  $('img').removeClass('mapSelect');
+    var $tr = $('#feature' + id);
+    $tr.css({"font-weight": "normal"});    
+}
 
 /*
 function getLi(props) {