I can see some have had similar problems, but still cant figure out whats wrong with my code.
Shapefiles are uploaded in GeoServer but the map is not getting displayed in webpage. I guess there`s something very basic wrong with code but I cant see what. The URL in the document is definitely correct.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>OpenLayers map preview</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 styles */
#toolbar {
position: relative;
padding-bottom: 0.5em;
display: none;
}
/* The map and the location bar */
#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/dev/OpenLayers.js"></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 init(){
format = 'image/png';
var bounds = new OpenLayers.Bounds(
// modify parameters
984018.1663741902,207673.09513056703,
991906.4970533887,219622.53973435296
);
var options = {
controls: [],
maxExtent: bounds,
//modify parameter
maxResolution: 46.67751798353879,
//modify parameter
projection: "EPSG:2908",
//setting zoom levels
numZoomLevels:6,
units: 'm'
};
map = new OpenLayers.Map('map', options);
tiled = new OpenLayers.Layer.WMS(
"wsNYCRoads:nyc_roads - Tiled", "http://localhost:8080/geoserver/wsNYCRoads/wms",
{
height: '358',
width: '512',
layers: 'wsNYCRoads:nyc_roads',
styles: '',
srs: 'EPSG:2908',
format: format,
tiled: 'true',
tilesOrigin : map.maxExtent.left + ',' + map.maxExtent.bottom
},
{
buffer: 0,
displayOutsideMaxExtent: true
}
);
map.addLayer(tiled);
map.zoomToExtent(bounds);
}
</script>
</head>
<body onload="init()">
Map viewer using Geoserver and MapLayers
<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" >
--> Click on the map to get feature info
</div>
</body>
</html>
Your script link no longer works. If you put it in your browser, you get a 404 error. Replace it with the following:
<script type="text/javascript" src="http://www.openlayers.org/api/OpenLayers.js"></script>
Sometimes it's better to just download a local copy and reference it so that directory changes on the web don't cause load issues.