[GIS] Map with OpenLayers 3 from GeoServer not showing but no error

Question

References to localhost changed to mydomain.com otherwise Stack Exchange doesn't allow me to post.

I am using OpenLayers 3 to show a map. I can successfully show vectors on the map by using a GeoJSON or KML source from a URL. However, for larger maps with thousands of areas I'm trying to use GeoServer to serve an ImageWMS layer.

If I navigate to http://mydomain.com:8080/geoserver/wms?service=WMS&request=GetMap&layers=areas_for_type&viewparams=typecode:AdministrativeWard&width=660&height=330&format=application/openlayers&bbox=-180.0,-90.0,180.0,90.0&srs=EPSG:4326 then I can see the map in my browser. However, when I call it from code I can only see the underlying OSM tile. My snippet of JavaScript which renders the layer is:

var layers = [];
var tile = new ol.layer.Tile({ source: new ol.source.MapQuest({layer:'osm'}) });
layers[0] = tile;
var geoserverRoot = '@ConfigurationManager.AppSettings["GeoServerUrl"]';
var params = {
    LAYERS: 'areas_for_type',
    FORMAT: 'image/png',
    viewparams: 'typecode: ' + areaType
};
var wmsImage = new ol.layer.Image({
    opacity: 0.3,
    source: new ol.source.ImageWMS({
        url: geoserverRoot + 'wms',
        params: params
    })
});
layers[1] = wmsImage;
wmsImage.addEventListener("change", function() {
    map.getView().fitExtent(wmsImage.getExtent(), map.getSize());
});
var map = new ol.Map({
    target: 'map-container',
    layers: layers,
    view: new ol.View({
        center: [0, 0],
        zoom: 2
    })
});

there are no JavaScript errors and the GeoServer log shows:

2014-11-10 11:27:58,546 INFO [geoserver.wms] - 
Request: getMap
    Filters = null
    Tiled = false
    Palette = null
    FeatureVersion = null
    SRS = urn:x-ogc:def:crs:EPSG:3857
    Styles = [StyleImpl[ name=polygon]]
    Layers = [org.geoserver.wms.MapLayerInfo@72adad35]
    MaxFeatures = null
    Crs = PROJCS["WGS 84 / Pseudo-Mercator", 
  GEOGCS["WGS 84", 
    DATUM["World Geodetic System 1984", 
      SPHEROID["WGS 84", 6378137.0, 298.257223563, AUTHORITY["EPSG","7030"]], 
      AUTHORITY["EPSG","6326"]], 
    PRIMEM["Greenwich", 0.0, AUTHORITY["EPSG","8901"]], 
    UNIT["degree", 0.017453292519943295], 
    AXIS["Geodetic latitude", NORTH], 
    AXIS["Geodetic longitude", EAST], 
    AUTHORITY["EPSG","4326"]], 
  PROJECTION["Popular Visualisation Pseudo Mercator", AUTHORITY["EPSG","1024"]], 
  PARAMETER["semi_minor", 6378137.0], 
  PARAMETER["latitude_of_origin", 0.0], 
  PARAMETER["central_meridian", 0.0], 
  PARAMETER["scale_factor", 1.0], 
  PARAMETER["false_easting", 0.0], 
  PARAMETER["false_northing", 0.0], 
  UNIT["m", 1.0], 
  AXIS["Easting", EAST], 
  AXIS["Northing", NORTH], 
  AUTHORITY["EPSG","3857"]]
    Bbox = SRSEnvelope[-3.2580518936273526E7 : 3.2580518936273526E7, -1.1740727544603072E7 : 1.1740727544603072E7]
    Env = {}
    Angle = 0.0
    CQLFilter = null
    Elevation = []
    FeatureId = null
    StartIndex = null
    ViewParams = [{TYPECODE= AdministrativeWard}]
    RemoteOwsType = null
    RemoteOwsURL = null
    FormatOptions = {}
    BgColor = java.awt.Color[r=255,g=255,b=255]
    Transparent = true
    SldBody = null
    Sld = null
    StyleUrl = null
    StyleFormat = sld
    ValidateSchema = false
    TilesOrigin = null
    Exceptions = SE_XML
    StyleBody = null
    SldVersion = null
    StyleVersion = null
    Height = 600
    Width = 1665
    Filter = null
    Time = []
    Format = image/png
    Buffer = 0
    Request = GetMap
    RawKvp = {CRS=EPSG:3857, BBOX=-32580518.936273526,-11740727.544603072,32580518.936273526,11740727.544603072, TRANSPARENT=true, VERSION=1.3.0, FORMAT=image/png, SERVICE=WMS, VIEWPARAMS=typecode: AdministrativeWard, HEIGHT=600, REQUEST=GetMap, LAYERS=areas_for_type, STYLES=, WIDTH=1665}
    Get = true
    BaseUrl = http://mydomain.com:8080/geoserver/
    RequestCharset = UTF-8
    Version = 1.3.0

Why is this not showing on the map if there are no errors?

Answer 1

Answering my own question as I solved it. There was an erroneous space in the parameters. Changing the line viewparams: 'typecode: ' + areaType to viewparams: 'typecode:' + areaType fixed the problem.