How to use checkboxes in GeoServer to turn on/off layers from WMS request

Question

I am trying to use checkboxes for DEM, roads, streams in GeoServer. I want to turn off/on these layers using checkboxes in JavaScript. How can I do that?

<html>
<head>
<script>
var x1=589980.0;
var y1=4913700.0;
var x2=609000.0;
var y2=4928010.0;
var newx1=x1;
var newy1=y1;
var newx2=x2;
var newy2=y2;
var mapFirstPart = "http://localhost:8080/geoserver/wms?service=WMS&version=1.1.0&request=GetMap&layers=";
var mapLayers = "sf:sfdem," +  "sf:roads," + "sf:streams";
var mapBBOX = "&bbox=" + newx1 + "," + newy1 + "," + newx2 + "," + newy2;
var mapSecondPart = "&width=700&height=500&srs=EPSG:26713&format=image/jpeg";
var mapString = mapFirstPart + mapLayers + mapBBOX + mapSecondPart; 
var layers=[mapLayers];
function onLOAD()
{
imgMap.src = mapString;
}
function zoom_e(){
newx1=x1;
newy1=y1;
newx2=x2;
newy2=y2;
mapBBOX = "&bbox=" + newx1 + "," + newy1 + "," + newx2 + "," + newy2;
mapString = mapFirstPart + mapLayers + mapBBOX + mapSecondPart;
imgMap.src = mapString;
}
function zoom_in(){
newx1=newx1+((newx2-newx1)/4);
newy1=newy1+((newy2-newy1)/4);
newx2=newx2-((newx2-newx1)/4);
newy2=newy2-((newy2-newy1)/4);
mapBBOX = "&bbox=" + newx1 + "," + newy1 + "," + newx2 + "," + newy2;
mapString = mapFirstPart + mapLayers + mapBBOX + mapSecondPart;
imgMap.src = mapString;
}
function zoom_out(){
newx1=newx1-((newx2-newx1)/4);
newy1=newy1-((newy2-newy1)/4);
newx2=newx2+((newx2-newx1)/4);
newy2=newy2+((newy2-newy1)/4);
mapBBOX = "&bbox=" + newx1 + "," + newy1 + "," + newx2 + "," + newy2;
mapString = mapFirstPart + mapLayers + mapBBOX + mapSecondPart;
imgMap.src = mapString;
}
function pan_l(){
newx1=newx1+((newx2-newx1)/4);
newx2=newx2+((newx2-newx1)/4);
mapBBOX = "&bbox=" + newx1 + "," + newy1 + "," + newx2 + "," + newy2;
mapString = mapFirstPart + mapLayers + mapBBOX + mapSecondPart;
imgMap.src = mapString;
}
function pan_r(){
newx1=newx1-((newx2-newx1)/4);
newx2=newx2-((newx2-newx1)/4);
mapBBOX = "&bbox=" + newx1 + "," + newy1 + "," + newx2 + "," + newy2;
mapString = mapFirstPart + mapLayers + mapBBOX + mapSecondPart;
imgMap.src = mapString;
}
function pan_u(){
newy1=newy1-((newy2-newy1)/4);
newy2=newy2-((newy2-newy1)/4);
mapBBOX = "&bbox=" + newx1 + "," + newy1 + "," + newx2 + "," + newy2;
mapString = mapFirstPart + mapLayers + mapBBOX + mapSecondPart;
imgMap.src = mapString;
}
function pan_d(){
newy1=newy1+((newy2-newy1)/4);
newy2=newy2+((newy2-newy1)/4);
mapBBOX = "&bbox=" + newx1 + "," + newy1 + "," + newx2 + "," + newy2;
mapString = mapFirstPart + mapLayers + mapBBOX + mapSecondPart;
imgMap.src = mapString;
}
function is_checked(){
if (document.getElementById("dem").checked == true) {
mapLayers='sf:sfdem';
console.log("DEM Loaded!") }
else{
    mapLayers='sf:roads,'+'sf:streams,'
}
if (document.getElementById("roads").checked == true) { 
mapLayers='sf:roads,';
console.log("Roads Loaded!")

}
else{
    mapLayers='sf:sfdem,'+'sf:streams,';
}
if (document.getElementById("streams").checked == true) { 
mapLayers='sf:streams,';
console.log("Streams Loaded!")  }
else{
    mapLayers='sf:sfdem,'+'sf:roads,';
}
return mapLayers;
}
function refresh(){
location.reload();
}
function help(){
window.open(help.html);
}
</script>
</head>
<body onLoad="onLOAD();">
<table>
<tr align='center'>
<td width="130px"> </td>
<td> <img src="icons\zoom_extent.jpg" id="zoom_e" onclick="zoom_e()">
<img src="icons\zoom_in.jpg" id="zoom_in" onclick="zoom_in()">
<img src="icons\zoom_out.jpg" id="zoom_out" onclick="zoom_out()">
<img src="icons\pan_left.jpg" id="Pan_Left" onClick="pan_l();">
<img src="icons\pan_right.jpg" id="Pan_right" onClick="pan_r();">
<img src="icons\pan_up.jpg" id="Pan_up" onClick="pan_u();">
<img src="icons\pan_down.jpg" id="Pan_down" onClick="pan_d();">
<img src="icons\help.jpg" id="help" onclick="help();"> 
</td>
</tr>
<tr> 
<td width="130px">
<div class="col-sm-4">
            <div class="row">
                <div class="span2">
                    <div id="info_check" style="height:400px"><label>Layers</label></div>
                &lt;input type=&quot;checkbox&quot; id=&quot;dem&quot; value=&quot;dem&quot; onclick=&quot;is_checked()&quot;&gt;DEM
                &lt;input type=&quot;checkbox&quot; id=&quot;roads&quot; value=&quot;roads&quot; onclick=&quot;is_checked()&quot;&gt;Roads
                &lt;input type=&quot;checkbox&quot; id=&quot;streams&quot; value=&quot;streams&quot; onclick=&quot;is_checked()&quot;&gt;Streams

            &lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;



<br><input type="button" name="Refresh" value="Refresh" onclick="refresh()">
</td>
<td width = "800px"><img name='imgMap' src ='' /> </td>
</tr>
</TABLE>
</body>
</html>

It looks like you are trying to do this with open layers? Is that correct — jgm_GIS, Dec 09 '20 at 14:10
The checkboxes are not working, the layer switching; the map loads just fine. — Kaleab Woldemariam, Dec 09 '20 at 14:13
Please [Edit] the question in response to requests for clarification. — Vince, Dec 09 '20 at 14:29
removed GeoServer tag as it has no relevance to this Javascript question — Ian Turton, Dec 09 '20 at 14:41
@IanTurton I have a feeling that the question is about editing the openlayers previewer provided as part of geoserver — nmtoken, Dec 09 '20 at 15:04
@nmtoken there aren't any checkboxes in the preview (and you shouldn't be editing that anyway) — Ian Turton, Dec 09 '20 at 15:22
@IanTurton I agree it shouldn't be edited, it's just a feeling for what the OP is attempting, There was another related question by the OP but I think it's now deleted — nmtoken, Dec 09 '20 at 15:27
May be you recommend that I ask it on stackoverflow then? As this is a javascript question? — Kaleab Woldemariam, Dec 09 '20 at 16:06

score 3 · Answer 1 · answered Dec 09 '20 at 15:32

GeoServer (and any other WMS server) sends back an image of the map you request, if you request several layers (as you seem to do) then it will combine all of them into one image (and if you are using tiles the browser will cache these tiles). To turn a layer on or off is a simple case of modifying the request you send to the WMS server - with more or fewer layers listed in the LAYERS parameter.

Alternatively, your client can compose the map from several images, one for each layer, by making several requests with only one layer listed in each request. Then turning the layers on or off is a simple case of toggling the visibility flag of the layer in your prefered JavaScript client.

In either case how you make the check boxes change the request or visibility is a pure javascript question which has no real relevance to this site.

How to use checkboxes in GeoServer to turn on/off layers from WMS request

1 Answers1