I am working with a function that should display one image of roads, and OpenStreetMaps as background, with some functionality. But I can't figure out why my code isn't working - the URL works fine but when opening the HTML file it does not display any of the maps. The function (sorry for the indentation that got messed up when pasting):

<script defer="defer" type="text/javascript">
function init(){
    //The bounding box of wsNYCRoads:nyc_roads
    var extent = [-74.00083695216,40.7366919238975,-73.97236135813849,40.769490143183006],
    ol.proj.transformExtent(-74.00083695216,40.7366919238975,-73.97236135813849,40.769490143183006, 'EPSG:4326', 'EPSG:3857');  

    //Initial view
    var view = new ol.View({
       center: ol.proj.transform([-73.99, 40.75], 'EPSG:4326', 'EPSG:3857'),
       zoom: 15

    //The source for wsNYCRoads:nyc_roads
    var wmsSource = new ol.source.ImageWMS({
         url: 'http://flygbilder.gis.lu.se/geoserver/wsNYCRoads/wms',
         params: {
         'LAYERS': 'wsNYCRoads:nyc_roads',
         'VERSION': '1.1.0'},
          serverType: 'geoserver'

    //OpenStreetMap background and wsNYCRoads:nyc_roads in layers
    var layers = [
       new ol.layer.Tile({
          source: new ol.source.OSM()
       new ol.layer.Image({
          source: wmsSource
    //Bind the map object to our "map" div and add some extra functionality
    var map = new ol.Map({
         layers: layers,
         controls: ol.control.defaults({
         attributionOptions: /** @type {olx.control.AttributionOptions} */ ({
         collapsible: false

     //Extra functionality of the map
     //Control for displaying coordinates

       new ol.control.MousePosition({
           coordinateFormat: ol.coordinate.createStringXY(4),
           projection: 'EPSG:4326',
           className: 'custom-mouse-position',
           target: document.getElementById('location'),
           undefinedHTML: '&nbsp;'

      //COntrol for displaying a scale line
       new ol.control.ScaleLine({
       target: document.getElementById('scale-line')

      //Control for zoming to a defined extent
      new ol.control.ZoomToExtent({
      extent: ol.proj.transform(extent, 'EPSG:4326', 'EPSG:3857')
       target: 'map',
       view: view

    //Add click event for getting attributes from WMS
    map.on('singleclick', function(evt) {
     document.getElementById('nodelist').innerHTML = '';
    var viewResolution = /** @type {number} */ (view.getResolution());
    var url = wmsSource.getGetFeatureInfoUrl(
     evt.coordinate, viewResolution, 'EPSG:3857',
     {'INFO_FORMAT': 'text/html'});
     if (url) {
        document.getElementById('nodelist').innerHTML = '<iframe
            style="width:950px;border:none;" src="' + url + '"></iframe>';

GetCapabilities for layer nyc_road:

 <Layer queryable="1" opaque="0">

    <!--WKT definition of this CRS:
    GEOGCS["WGS 84", 
    DATUM["World Geodetic System 1984", 
    SPHEROID["WGS 84", 6378137.0, 298.257223563, AUTHORITY["EPSG","7030"]], 
    PRIMEM["Greenwich", 0.0, AUTHORITY["EPSG","8901"]], 
    UNIT["degree", 0.017453292519943295], 
    AXIS["Geodetic longitude", EAST], 
    AXIS["Geodetic latitude", NORTH], 

    <LatLonBoundingBox minx="-74.00083695216647" miny="40.7366919238975" maxx="-73.97236135813849" maxy="40.769490143183006"/>
    <BoundingBox SRS="EPSG:4326" minx="-74.00083695216647" miny="40.7366919238975" maxx="-73.97236135813849" maxy="40.769490143183006"/>
  • Did you verify that the CRS transforms are fine? And that you're centered on the right coordinates (try zooming out)? Commented Sep 17, 2017 at 22:31
  • Thanks for the answer! There should not be a problem with the CRS transform or the coordinates, these were pre-written (not by me). The OpenStreeMap is in EPSG:3857, and the layer "wsNYCRoads:nyc_roads is in EPSG:4326 Commented Sep 18, 2017 at 8:43

1 Answer 1


As soon as you add OpenStreetMap to your map you set the projection to epsg:3857 (Web Mercator), but you are forcing the request to GeoServer to be in epsg:4326 because you have hardcoded that value into the SRS parameter. So GeoServer (being a trusting program) returns that image which will appear as a very small black spot near where the equator crosses the prime meridian (Null Island) when openlayers interprets the degrees as meters.

TLDR; remove the SRS line from your WMSSource.

  • Thanks for the input! But it did no difference, still not getting my layer or OpenStreetMap showing. Commented Sep 18, 2017 at 8:37
  • your extent is in 4326 too so you will need to zoom out (a lot) to see anything
    – Ian Turton
    Commented Sep 18, 2017 at 9:18
  • Do you mean "var extent = [-74.00083695216,40.7366919238975,-73.97236135813849,40.769490143183006];"?, shouldn't that be handled by "center: ol.proj.transform([-73.99, 40.75], 'EPSG:4326', 'EPSG:3857')"? Commented Sep 18, 2017 at 9:31
  • I don't think so, you need to transform the extent too
    – Ian Turton
    Commented Sep 18, 2017 at 10:03
  • I appreciate your fast answers! I tried to transform the extent without any luck (see edit). But since the layer works fine as a standalone in the browser (full url: flygbilder.gis.lu.se/geoserver/wsNYCRoads/…) I really think your on to the problem, something must be wrong with the SRS. It is getting really frustrating. Commented Sep 18, 2017 at 10:29

Your Answer

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

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