[GIS] Highlighting feature clicked as row in table using OpenLayers 2 + jQuery

jqueryopenlayers-2

In my project I am trying to display research data on Google Maps. I am using OpenLayers java library in my project.

I would like to connect a table to the map in a way that the user can click on the table and display the corresponding layer on the map. I have tried with jQuery to assign an ID value which works in a way so that when the user clicks on the map it will highlights a row on the table. However, I am not able to do it the other way as I mentioned above.

Can any one help me with my problem?

The jqery script I have used is:

<script>
$(document).ready(function()
  {
  $("#map").click(function(){
    $("#td").css("color","red").slideUp(3000).slideDown(2000);
  });
});
</script>

// I have created table like below

    <div id="table" style="height:100px;width:200px;float:left;margin-right:50px;">
    <table border="1">
    <tr><th>Layer</th><th>Layer Description</th></tr>
    <tr><td id=td>5000_fKr</td><td>Layer details</td></tr>
    <tr><td>4000_fKr</td><td>3500_fKr</td></tr>
    </table></div>
// I have created map object like below
<div id="map" style="height:700px;width:700px;float:left;">
<script defer="defer" type="text/javascript">
          var map = new OpenLayers.Map('map', {allOverlays: true, controls: []});
            var wms_layer_Test_5000_fKr = new OpenLayers.Layer.WMS(
            'Test_5000_fKr',
            'http://130.237.175.39:8080/geoserver/wms/test_test',
            {layers: 'Test_5000_fKr', transparent: "true", format: "image/png"},

            {maxExtent: new OpenLayers.Bounds(585000, 6600000, 740000, 6722500), maxResolution: 'auto', projection:"EPSG:3006", units: "m"},
            {isBaseLayer: false}, 
            {visibility: true},
            {transparent: true}
            );

      map.addLayers([wms_layer_Test_5000_fKr]);

      var scalebar = new OpenLayers.Control.ScaleLine();
            map.addControl(scalebar);

            map.addControl(
                new OpenLayers.Control.MousePosition({
                    prefix: '<a target="_blank" ' +
                        'href="http://spatialreference.org/ref/epsg/3006/">' +
                        'SWEREF99 TM</a>',
                    separator: ' | ',
                    numDigits: 0,
                    emptyString: 'Mouse is not over map.'
                })
            );            

      var panel = new OpenLayers.Control.NavToolbar();
            map.addControl(panel);

      var panzoom = new OpenLayers.Control.PanZoomBar();
            map.addControl(panzoom);                                              

      var layer = new OpenLayers.Control.LayerSwitcher({'ascending':false});
            map.addControl(layer);

        map.zoomToMaxExtent();
      </script></div>

Best Answer

O hell of jQuery. I do not know why you choosed jQUery. There is alternatives.

Second forget about "id" attribute of HTML. You can achieve same results using the class attribute and you also benefit from CSS rules.

I could not understand well that you asked about. BUt if you have a table that will act like a LayerSwitcher, where each row is a layer name. You can do something like this to turn layer on off with a click on table:

<style>
.css-table, .css-table td, .css-table th {
    border: 1px solid grey;
    border-collapse: collapse;
}

.css-table td, .css-table th { padding: 4px; }

.name { color: brown; }

.logger { border: 1px solid grey; padding: 5px; margin-top: 10px; max-height: 300px; overflow: auto; }
</style>

<table class="css-table">
    <tr><th>Layer Name</th><th>Layer Description</th></tr>
    <tr><td class="name">5000_fKr</td><td>Layer details</td></tr>
    <tr><td class="name">4000_fKr</td><td>3500_fKr</td></tr>
</table>

<div class="logger"></div>

 <script>
jQuery( '.css-table' ).click(
  function( evt )
  {
      var log = jQuery( '.logger' );
      var target = jQuery( evt.target );
      if ( !target.hasClass( 'name' ) )
          return log.html( log.html() + 'Table element ' + evt.target.nodeName + ' is useless.<br>' );
      log.html( log.html() + 'Table element: ' + evt.target.nodeName + ' is util and has a layer named ' + target.text() + '<br>' );
      log.html( log.html() + 'Now you can get a layer (OpenLayers.Map).getLayersByName(' + target.text() + ')[0].setVisible( true );<br>' );
  }
);

jQuery( '.logger' ).html( 'Logger ready.<br>' );
</script>

See, absolutely no IDs!!!

Related Question