[GIS] Blank map when working with OpenLayers and Geoserver

geoserveropenlayers-2

I'm trying to develop a map with 4 layers: two shapefiles (layers: "roads" and "hospitals") and two World Image Files (layers: "hypsometric","shadows"). I installed OpenLayers and tried to write correct code, but something is wrong, because I get only blank map when I enter address: http://localhost:8080/geoserver/www/wms.html.

screenshot

This is my code: 

<script src="http://localhost:8080/geoserver/openlayers/OpenLayers.js"></script>
<script type="text/javascript">
    var map;
var layer1,options;
     function setHTML(response) { 
        document.getElementById('nodelist').innerHTML = response.responseText;
    };

    OpenLayers.IMAGE_RELOAD_ATTEMPTS = 5;
    OpenLayers.DOTS_PER_INCH = 25.4 / 0.28;


    function init(){
        var bounds = new OpenLayers.Bounds(
            564840.1, 5075229.7,
            588160.6, 5093252.2
        );
        var options = {
            controls: [],
            maxExtent: bounds,
            maxResolution: 0.025439315679878505,
            projection: "EPSG:4326",
            units: 'degrees'
        };
        map = new OpenLayers.Map('map', options);

        layer1 = new OpenLayers.Layer.WMS(
            "Roads",
            "http://localhost:8080/geoserver/wms",
            {
                width: '800',
                srs: 'EPSG:4326',
                layers: 'roads',
                height: '450',
                styles: '',
                transparent: true,
                format: 'image/png'
            },
            {isBaseLayer: false,singleTile: true, ratio: 1} 
        );
        layer2 = new OpenLayers.Layer.WMS(
            "hospitals", 
            "http://localhost:8080/geoserver/wms",
            {
                width: '800',
                srs: 'EPSG:4326',
                layers: 'hospitals',
                height: '450',
                styles: '',
                transparent: true,
                format: 'image/png'
            },
            {isBaseLayer:false,singleTile: true, ratio: 1} 
        );
        layer3 = new OpenLayers.Layer.WMS(
            "hypsometric", "http://localhost:8080/geoserver/wms",
            {
                width: '800',
                srs: 'EPSG:4326',
                layers: 'hypsometric',
                height: '450',
                styles: '',
                format: 'image/png'
            },
            {singleTile: true, ratio: 1} 
        );
        layer4 = new OpenLayers.Layer.WMS(
            "shadows", "http://localhost:8080/geoserver/wms",
            {
                width: '800',
                srs: 'EPSG:4326',
                layers: 'shadows',
                height: '450',
                styles: '',
                transparent: true,
                format: 'image/png'
            },
            {isBaseLayer:false,singleTile: true, ratio: 1} 
        );


        map.addLayers([layer1,layer2,layer3,layer4]);

       // setup controls and initial zooms
        map.addControl(new OpenLayers.Control.PanZoomBar());
        map.addControl(new OpenLayers.Control.Navigation());
        map.addControl(new OpenLayers.Control.Scale($('scale')));
        map.addControl(new OpenLayers.Control.MousePosition({element: $('location')}));
        map.addControl(new OpenLayers.Control.LayerSwitcher());
        //map.addControl(new OpenLayers.Control.OverviewMap());
        map.zoomToExtent(bounds);

        // support GetFeatureInfo


    }
</script>`

I'm working with OpenLayers for the first time.

Best Answer

Your bounds are wrong (or your projection is wrong). Your map is in EPSG:4326 (lat/lng WGS83) so the maximum for a longitude is 180 and the maximum latitude is 90. Your bounds are 564840.1, 5075229.7,588160.6, 5093252.2 - which are clearly not going to work.

Related Question