[GIS] Loading a raster using Openlayers and Mapserver

javascriptmapserveropenlayers-2rasterweb-mapping

I'm trying to load a raster into my browser using Openlayers. I can examine my WMS raster layer using OpenJump, but I'm not able to get it to load into my browser. My mapfile is as follows:

MAP      
    ###########
    NAME         "ny_pop"
    SHAPEPATH     "/v0.3/mapserver/"                                                                              
    UNITS         meters
    EXTENT        -8269337 4955373 -8190365 5005745 
    SIZE          1000 1000
    STATUS        ON
    DEBUG         ON
    IMAGETYPE     "png"

    ###########    
    PROJECTION
        "init=epsg:900913"
    END

    ###########
OUTPUTFORMAT
  NAME "png"
  DRIVER AGG/PNG
  MIMETYPE "image/png"
  IMAGEMODE RGB
  EXTENSION "png"
  FORMATOPTION "GAMMA=0.75"
END

    ###########    
    WEB             
        METADATA
            "wms_title"           "WMS Pop Tif"
            "wms_onlineresource"  "http://mysite.com/mapserv.cgi?map=raster_1.map&"            
            "wms_enable_request"  "GetMap GetFeatureInfo GetCapabilities"
        END
    END

    ###########
    LAYER
        NAME      "ny_pop"
        DATA      /home/mysite/webapps/htdocs/v0.3/mapserver/ny_pop.tif
        STATUS    ON
        TYPE      RASTER   
        METADATA
            "wms_title"  "WMS NY Raster"
            "wms_srs"    "EPSG:900913"
        END
    END

    ########### 
END

Everything (map, raster and mapfile) are using EPSG:900913, and I have an existing map (centered around New York) which I am adding the layer rasterLayer to. My javascript is as follows:

function generateRaster(){

    console.log('get map bounds');
    bounds = map.getExtent();

    rasterLayer = new OpenLayers.Layer.WMS( 
           "ny_pop",
           "http://mysite.com/mapserv.cgi?", 
           {map: 'raster_1.map'},
           {'maxExtent': bounds}
       );
    console.log(rasterLayer);
    map.addLayer(rasterLayer);

}

I'm trying to limit the raster to the bounds of the map using the {'maxExtent': bounds} command, but I also tried with just the map name and URL and it did not work either. I'm still trying to get my head around the .map format, so there could be some mistakes there also. However, as I could view the raster in OpenJump I assumed it was ok.

EDIT:
I updated my javascript to the following:

rasterLayer = new OpenLayers.Layer.WMS( 
   "NY Population layer..... ",
   "http://urbmet.webfactional.com/mapserv.cgi?", 
   {map: 'raster_1.map', layers: 'ny_pop'}
);

but still nothing shows up on the map. I've added a screencapture of my firebug output – this is the contents of console.log(rasterLayer).

enter image description here

Best Answer

You need to set the layers parameter in the WMS constructor in OpenLayers: 

rasterLayer = new OpenLayers.Layer.WMS( 
       "This Can Be Any Name",
       "http://mysite.com/mapserv.cgi?", 
       {map: 'raster_1.map', layers: 'ny_pop'},
       {'maxExtent': bounds}
   );

http://trac.osgeo.org/openlayers/wiki/Layer/WMS

You also may have to add in the EPSG:900913 definition to your proj\nad\epsg definitions in your MapServer installation.

I'm assuming your TIF file is georeferenced, and falls within the extents you set in your MAP file: -8269337 4955373 -8190365 5005745

I usually set the SIZE parameter to match the default OpenLayers tiles:

SIZE 256 256

I also set the STATUS to OFF for both Map and Layer - calling the WMS will then only bring back the layers you specify.

You can also set up an error log to see if any errors are recorded by MapServer: 

CONFIG "MS_ERRORFILE" "tmp/ms.log"

Finally what are you getting back - empty images, or error messages?

Related Question