[GIS] Displaying more than one layer from GeoServer using OpenLayers

geoserverjavascript

How can I add additional data layers to this code? I tried using "map = new OpenLayers.Map('map', options);" again and set up a tiled layer for buildings exactly as it has been done for roads but not working when I add this one more time after the code for roads. 

map = new OpenLayers.Map('map', options); 
tiled = new OpenLayers.Layer.WMS(
"Town:buildings - Tiled", "http://localhost:8080/geoserver/Town/wms",
{

Also I have tried to refer to Google Maps but those are not appearing, would be great to have those too.

Here the code for roads only that works: 

<html>
<head>
<title>Map</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<style type="text/css">
body {
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: small;
}

#toolbar {
position: relative;
padding-bottom: 0.5em;
display: none;
}

#map {
clear: both;
position: relative;
width: 337px;
height: 512px;
border: 2px solid black;
}            
#wrapper {
width: 337px;
height: 50px;                           
}            
#location {
float: right;
font-family: Arial, Verdana, sans-serif; 
font-size: 12px; 
color: #483D8B;
background-color: white;
}            
#scale {
float:left;
font-family: Arial, Verdana, sans-serif; 
font-size: 12px; 
color: #483D8B;
background-color: white;
}
#nodelist{
font-family: Arial, Verdana, sans-serif; 
font-size: 14px; 
color: #000000;
font-style: normal;
background-color: white;
}
</style>

<script type="text/javascript" src="http://www.openlayers.org/api/OpenLayers.js"></script>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="http://www.openstreetmap.org/openlayers/OpenStreetMap.js"></script> 
  <link rel="stylesheet" href="ol.css" type="text/css">         
  <script src="ZoomToMaxExtent.js"></script>
  <script src="ScaleBar.js"></script>
  <script src="deprecated.js" type="text/javascript"></script>

 <script defer="defer" type="text/javascript">
 var map;
 var untiled;
 var tiled;
 var pureCoverage = false;
 // pink tile avoidance
 OpenLayers.IMAGE_RELOAD_ATTEMPTS = 5;
 // make OL compute scale according to WMS spec
 OpenLayers.DOTS_PER_INCH = 25.4 / 0.28;

 function setStyle(style){
 // change styles
 if(tiled == null)
 return;
 tiled.mergeNewParams({
 styles: style
 });
 //untiled.mergeNewParams({
//styles: style
//});
}

function init(){
var webMercator=new OpenLayers.Projection("EPSG:3857");
var wgs84=new OpenLayers.Projection("EPSG:4326");

function setHTML(response){
document.getElementById('nodelist').innerHTML = response.responseText;
//alert(response.responseText);
}; 

format = 'image/png';
var bounds = new OpenLayers.Bounds(
//parameters
1459539.4919039696,7494309.59376287,
1476431.8743550738,7510333.642999968 

);

var options = {
controls: [],
maxExtent: bounds,
//parameters
maxResolution: 156543.0399,
projection: "EPSG:3857",
numZoomLevels:16,
units: 'm'
};

map = new OpenLayers.Map('map', options);
// setup tiled layer
tiled = new OpenLayers.Layer.WMS(
"Town:roads - Tiled", "http://localhost:8080/geoserver/Town/wms",
{
height: '485',
width: '512',
layers: 'Town:roads',
styles: '',
srs: 'EPSG:3857',
format: format,
tiled: 'true',
tilesOrigin : map.maxExtent.left + ',' + map.maxExtent.bottom
},
{
buffer: 0,
displayOutsideMaxExtent: true
} 
);  


//controls 
map.addControl(new OpenLayers.Control.LayerSwitcher());
map.addControl(new OpenLayers.Control.PanZoomBar());
zf= new OpenLayers.Control.ZoomToMaxExtent({title:"Zoom to max extent"});

var panel= new OpenLayers.Control.Panel({defaultControl:zf});
panel.addControls([zf]);
map.addControl(panel);
map.addControl(new OpenLayers.Control.OverviewMap());
map.addControl(new OpenLayers.Control.Navigation());
map.addControl(new OpenLayers.Control.MousePosition({element: $('location')}));
map.addControl(new OpenLayers.Control.Scale($('scale')));
map.addControl(new OpenLayers.Control.ScaleLine({bottomOutUnits: ''}));

map.addLayer(tiled);                
map.zoomToExtent(bounds);
}
</script>
</head>     
<body onload="init()">
Map
<br><br>

<div id="map">
</div>
<br>
<div id="wrapper">
<div id="location">location</div>
<br>
<div id="scale">
</div>
</div>
<br>
<div id="nodelist" >
</div>
</body>
</html>

Best Answer

Note where you create the tiled varaible:

tiled = new OpenLayers.Layer.WMS(
    "Town:roads - Tiled", "http://localhost:8080/geoserver/Town/wms",
    {
        height: '485',
        width: '512',
        layers: 'Town:roads',
        styles: '',
        srs: 'EPSG:3857',
        format: format,
        tiled: 'true',
        tilesOrigin : map.maxExtent.left + ',' + map.maxExtent.bottom
    },
    {
        buffer: 0,
        displayOutsideMaxExtent: true
    } 
);

Then you add the tiled layer to the map:

map.addLayer(tiled);

Simply create a new variable, say buildings, and edit the settings accordingly:

buildings = new OpenLayers.Layer.WMS(
    "Town:roads - Tiled", "http://localhost:8080/geoserver/Town/wms",
    {
        height: '485',
        width: '512',
        layers: 'Town:buildings',
        styles: '',
        srs: 'EPSG:3857',
        format: format,
        tiled: 'true',
        tilesOrigin : map.maxExtent.left + ',' + map.maxExtent.bottom
    },
    {
        buffer: 0,
        displayOutsideMaxExtent: true
    } 
);  
map.addLayer(buildings);

Be Aware the above is just an example. You may need to make additional changes.

Related Question