Take the 2-minute tour ×
Geographic Information Systems Stack Exchange is a question and answer site for cartographers, geographers and GIS professionals. It's 100% free, no registration required.

I am a Masters student from Sweden. I am doing my Masters thesis on Internet mapping. In my project I am trying to display research data from my department 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>

I appreciate your helpful suggestions. Thanks in advance Karteek

share|improve this question
    
Similar topic. This may help....or may not! [Selection from attributes][1] [1]: gis.stackexchange.com/questions/63966/… –  Haydlew Oct 22 '13 at 4:41

1 Answer 1

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!!!

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.