Take the 2-minute tour ×
Geographic Information Systems Stack Exchange is a question and answer site for cartographers, geographers and GIS professionals. It's 100% free, no registration required.

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 adress: 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. Thank you.

share|improve this question
    
i'm facing here the same problem as you, did you find a solution for this? –  user6067 Feb 23 '12 at 14:22
    
are you sure, you have configured the geoserver layer properly. I experienced this problem when, in openlayers I was using one projection and in geoserver another.. –  Vineet Menon Sep 3 '12 at 11:27
add comment

4 Answers

up vote 3 down vote accepted

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.

share|improve this answer
    
It's WGS84. I changed them to -180.0000, -90.0000, 180.0000, 90.0000, but it's the same blank map.. –  againstflow May 21 '11 at 18:08
add comment

Could you try not to define styles. Just remove the all styles in the params. Let the geoserver use default styles...

share|improve this answer
add comment

I am unable to catch an obvious error by just reading the code. Anyway, there is something that I dislike and that perhaps is a source of errors: you do not explicit set at least one base layer. (I know that in OpenLayers this practice is not mandatory, but I find it very recommendable.) Is the layer 'hypsometric' the base layer? If so, is this layer transparent?

share|improve this answer
add comment

Well i see that layer2, layer 3 and so on are not declared like layer1. You should put the "var" before the names of the layers. See if that solves the problem.

Try using this if you like:

 OpenLayers.ProxyHost="/cgi-bin/proxy.cgi?url=";

Or this way:

 OpenLayers.ProxyHost="http://localhost:8080/geoserver/www/cgi-bin/proxy.cgi?url=";

Write this inside the init function. The proxy.cgi archive is inside you examples directory in your openlayers folder. Create a folder named cgi-bin inside your web root folder and put the proxy.cgi archive there.

share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.