<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/NewFilel1.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" onClick="cbChanged(this)" > India cropland </li>
<li><input type="checkbox" id="2" onClick="cbChanged(this)" >Africa cropland</li>
<li><input type="checkbox" id="3" onClick="cbChanged(this)" >Malawi cropland</li>
<li><input type="checkbox" id="4" onClick="cbChanged(this)" >Mali cropland</li>
<input type="checkbox" id="5" value="Redirect" name="check me"/>
</div>
</div>
<div id="footer">Copyright © icrisat.com</div>
</body>
</html>
On the bases of check box value I have to display geoserver's wms layer on the google map. That layers selection has to follow check box checkedness if checked then display map or else remain same.
On the bases of check box value has to generate a list on text as legend . I has to follow croplands.org web site map tab. And dialog as to be on the right hand side of the page. Thanks in advance.
Aucun commentaire:
Enregistrer un commentaire