1

Here is my code:

var map;

function init() {
 var options = {
  maxExtent: new  OpenLayers.Bounds(-135.326858520508,-30.5615100860596,179.357788085938,69.604377746582),
  units: 'm',
  projection: "EPSG:900913",
};
     map = new OpenLayers.Map('map_element', options);            
            // setup tiled layer
            var tiled = new OpenLayers.Layer.WMS(
                "ne_10m_railroads", "http://localhost:8080/geoserver/earth/wms",
                {
                    LAYERS: 'earth:ne_10m_railroads',
                    STYLES: '',
                    format: OpenLayers.Format.WMSGetFeatureInfo,
                    tiled: true,
                    tilesOrigin : map.maxExtent.left + ',' + map.maxExtent.bottom
                },
                {
                    buffer: 0,
                    displayOutsideMaxExtent: true,
                    isBaseLayer: true,

                } 
            );

            map.addLayer(tiled);

   if(!map.getCenter()){ map.zoomToMaxExtent(); }
}

Snapshot of the webpage I created - images are not loading!

This is the code for layer preview generated by GeoServer :

 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(){
            // if this is just a coverage or a group of them, disable a few items,
            // and default to jpeg format
            format = 'image/png';
            if(pureCoverage) {
                document.getElementById('filterType').disabled = true;
                document.getElementById('filter').disabled = true;
                document.getElementById('antialiasSelector').disabled = true;
                document.getElementById('updateFilterButton').disabled = true;
                document.getElementById('resetFilterButton').disabled = true;
                document.getElementById('jpeg').selected = true;
                format = "image/jpeg";
            }

            var bounds = new OpenLayers.Bounds(
                -135.326858520508, -30.5615100860596,
                179.357788085938, 69.604377746582
            );
            var options = {
                controls: [],
                maxExtent: bounds,
                maxResolution: 1.2292369008064297,
                projection: "EPSG:900913",
                units: 'm'
            };
            map = new OpenLayers.Map('map', options);

            // setup tiled layer
            tiled = new OpenLayers.Layer.WMS(
                "earth:ne_10m_railroads - Tiled", "http://localhost:8080/geoserver/earth/wms",
                {
                    LAYERS: 'earth:ne_10m_railroads',
                    STYLES: '',
                    format: format,
                    tiled: true,
                    tilesOrigin : map.maxExtent.left + ',' + map.maxExtent.bottom
                },
                {
                    buffer: 0,
                    displayOutsideMaxExtent: true,
                    isBaseLayer: true,
                    yx : {'EPSG:900913' : false}
                } 
            );

            // setup single tiled layer
            untiled = new OpenLayers.Layer.WMS(
                "earth:ne_10m_railroads - Untiled", "http://localhost:8080/geoserver/earth/wms",
                {
                    LAYERS: 'earth:ne_10m_railroads',
                    STYLES: '',
                    format: format
                },
                {
                   singleTile: true, 
                   ratio: 1, 
                   isBaseLayer: true,
                   yx : {'EPSG:900913' : false}
                } 
            );

            map.addLayers([untiled, tiled]);

            // build up all controls
            map.addControl(new OpenLayers.Control.PanZoomBar({
                position: new OpenLayers.Pixel(2, 15)
            }));
            map.addControl(new OpenLayers.Control.Navigation());
            map.addControl(new OpenLayers.Control.Scale($('scale')));
            map.addControl(new OpenLayers.Control.MousePosition({element: $('location')}));
            map.zoomToExtent(bounds);

            // wire up the option button
            var options = document.getElementById("options");
            options.onclick = toggleControlPanel;

            // support GetFeatureInfo
            map.events.register('click', map, function (e) {
                document.getElementById('nodelist').innerHTML = "Loading... please wait...";
                var params = {
                    REQUEST: "GetFeatureInfo",
                    EXCEPTIONS: "application/vnd.ogc.se_xml",
                    BBOX: map.getExtent().toBBOX(),
                    SERVICE: "WMS",
                    INFO_FORMAT: 'text/html',
                    QUERY_LAYERS: map.layers[0].params.LAYERS,
                    FEATURE_COUNT: 50,
                    Layers: 'earth:ne_10m_railroads',
                    WIDTH: map.size.w,
                    HEIGHT: map.size.h,
                    format: format,
                    styles: map.layers[0].params.STYLES,
                    srs: map.layers[0].params.SRS};

                // handle the wms 1.3 vs wms 1.1 madness
                if(map.layers[0].params.VERSION == "1.3.0") {
                    params.version = "1.3.0";
                    params.j = parseInt(e.xy.x);
                    params.i = parseInt(e.xy.y);
                } else {
                    params.version = "1.1.1";
                    params.x = parseInt(e.xy.x);
                    params.y = parseInt(e.xy.y);
                }

                // merge filters
                if(map.layers[0].params.CQL_FILTER != null) {
                    params.cql_filter = map.layers[0].params.CQL_FILTER;
                } 
                if(map.layers[0].params.FILTER != null) {
                    params.filter = map.layers[0].params.FILTER;
                }
                if(map.layers[0].params.FEATUREID) {
                    params.featureid = map.layers[0].params.FEATUREID;
                }
                OpenLayers.loadURL("http://localhost:8080/geoserver/earth/wms", params, this, setHTML, setHTML);
                OpenLayers.Event.stop(e);
            });
        }

and its preivew is below:enter image description here


Oh I got it!!! I shouldn't add those extra parameters: But I want to know what it actually means : I changed the Layer code to this and its working:

 map = new OpenLayers.Map('map_element', options);            
            // setup tiled layer
            var tiled = new OpenLayers.Layer.WMS(
                "ne_10m_railroads", "http://localhost:8080/geoserver/earth/wms",
                {
                    LAYERS: 'earth:ne_10m_railroads'},

                {} 
            );

What happens when I add these extra parameters..where it is wrong?

{
                LAYERS: 'earth:ne_10m_railroads',
                STYLES: '',
                format: OpenLayers.Format.WMSGetFeatureInfo,
                tiled: true,
                tilesOrigin : map.maxExtent.left + ',' + map.maxExtent.bottom
            },

2 Answers 2

3

The WMS object takes 4 parameters - name, baseURL, WMS options. OpenLayers options. As you have in your working code:

 map = new OpenLayers.Map('map_element', options);            
            // setup tiled layer
            var tiled = new OpenLayers.Layer.WMS(
                "ne_10m_railroads", "http://localhost:8080/geoserver/earth/wms",
                {
                    LAYERS: 'earth:ne_10m_railroads'},

                {} 
            );

When you tried to add extra parameters they were OpenLayers parameters and so should have gone in the second map not the first. So

       {
            LAYERS: 'earth:ne_10m_railroads',
            STYLES: '',
            format: OpenLayers.Format.WMSGetFeatureInfo,
            tiled: true,
            tilesOrigin : map.maxExtent.left + ',' + map.maxExtent.bottom
        },

Should be:

       {
            LAYERS: 'earth:ne_10m_railroads',
            STYLES: '',
            format: 'image/png'

        },
        {
            tiled: true,
            tilesOrigin : map.maxExtent.left + ',' + map.maxExtent.bottom
        } 

so that the tiled parts go to OpenLayers rather than the WMS (which doesn't understand them).

1

You have added

format: OpenLayers.Format.WMSGetFeatureInfo,

The format parameter controls which MIME Type map images should be (as JPEG, PNG.... or even RSS, GML, KML if it is an WFS).

OpenLayers.Format.WMSGetFeatureInfo is another type of request, not a format as it is meant to be for this parameter, so this association is not allowed.

You have to write

format: 'image/png',

like it is in the layer preview

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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