mercredi 17 février 2016

Auto populate geoserver wms layer when Check box is checked - Jquery using switch has to follow checkbox id

 <script>
   $(function() {
    $( "#dialog" ).dialog();
  });
  </script>
     <script>
      function initMap() {
        var mapDiv = document.getElementById('map');
        var map = new google.maps.Map(mapDiv, {
          center: {lat: 16.5112, lng: 14.2626},
          zoom: 4
        });
      }
    </script>
    <script src="http://ift.tt/1KvsVRi"
        async defer></script>
        
    <script>
var val='';


$(function () {
    $(':checkbox').click(function () {
        if ($(this).prop('checked', true)) {
                                        switch($(this).attr('id')) {
                        case $("#1"):
                                                
                                        var url1 = 'http://localhost:8080/Trail/NewFile.html';
                                        $(location).attr('href', url1);

                                 break;

            case $("#2");
           
                                var url2 = 'http://localhost:8080/Trail/NewFilel2.html';
                                $(location).attr('href', url2);

                         break;

            case $("#3");
            
                        var url3 = 'http://localhost:8080/Trail/NewFilel3.html';
                        $(location).attr('href', url3);

                         break;
                         
            case $("#4");
            
                        var url4 = 'http://localhost:8080/Trail/NewFilel4.html';
                        $(location).attr('href', url4);

                         break;
                         
                        case $("#5");
            
                        var url5 = 'http://localhost:8080/Trail/NewFilel5.html';
                        $(location).attr('href', url5);

                         break;
                         
          
            default;
       
                                        }
        }
        else 
        {
           alert(" remain same");
        }
        
    });
});

</script>
<style>
     #header {
    background-color:green;
    color:white;
    text-align:left;
    padding:5px;
}
#nav {
    line-height:30px;
    background-color:#eeeeee;
    height:300px;
    width:100px;
    float:left;
    padding:5px;              
}
#section {
    width:350px;
    float:left;
    padding:10px;                
}
#footer {
    background-color:black;
    color:white;
    clear:both;
    text-align:center;
   padding:5px;          
}
#map {
        width: 1200px;
        height: 600px;
      }
      

</style>
<!DOCTYPE html>
<html>
  <head>
  <meta charset="utf-8">
   <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
  <link rel="stylesheet" href="/resources/demos/style.css">
  
 
<link rel="stylesheet" href="http://ift.tt/1FHelXo">
<script src="http://ift.tt/19wK3Lg"></script>
<link rel="stylesheet" href="http://ift.tt/1S9Ab8S" type="text/css">
<script src="http://ift.tt/1goRNBW"></script>
    </head>
  <body>
    <div id="map"></div>
     <div id="header"><h3></h3></div>
   
<div id="dialog" title="Map Layers">
  <p>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
  <div id="checkboxes">
   <li><input type="checkbox"  id="1" > India cropland   </li>
   <li><input type="checkbox"  id="2" > Africa cropland  </li>
   <li><input type="checkbox"  id="3" > Malawi cropland  </li>
   <li><input type="checkbox"  id="4" > Mali cropland    </li>
   <li><input type="checkbox"  id="5" > karnataka        </li>
</div>
</div>

<div id="footer">Copyright © icrisat.com</div>

 
</body>
</html>

While running its not entered into switch statements.

The adove code as to dispaly dialog box onto the right handside of the page and  onclick on  checkbox it has to overlay wms's geoserver file on google map.If check box was unclicked remain in same page like toggle 



Aucun commentaire:

Enregistrer un commentaire