[GIS] Cannot add layer in OpenLayers 3

geoserveropenlayers-2pgrouting

I have been trying for a couple of days to perform three very simple tasks combining GeoServer, OpenCycleMap base map and OpenLayers 3. I am following the pg_routing workshop as I am using a function that let the user click on the map and retrieve the shortest path with an ol.overlay command. I can plot an OpenCycleMap with my data in a different web page but when I try to add the layer in the model of the pg_routing workshop I get the error 'undefined is not a function' immediately after the declaration of the new WMS layer source: new ol.source.ImageWMS().

I paste the entire web page code here, I have searched extensively everywhere, adding a layer is a very simple operation and I can make in another web pages without the click function. I think it is related to this if I can't easily add a new layer but I can't find where the problem is, can someone help me?

<!DOCTYPE html>
<html>
  <head>
    <title>ol3 pgRouting client</title>
    <meta charset="utf-8">
    <link href="ol3/ol.css" rel="stylesheet">
    <style>
      #ol-map {
        width: 100%;
        height: 760px;
      }
    </style>
    <script src="ol3/ol.js"></script>
  </head>
  <body>
    <div id="ol-map">
     <div id="start-point">start</div>
     <div id="final-point">final</div>
      <button id="clear">clear</button>
    </div>
    <!--button id="clear">clear</button-->

    <script type="text/javascript">

var map = new ol.Map({
        target: 'ol-map',
        renderer: ol.RendererHint.CANVAS,
        layers: [
          new ol.layer.TileLayer({
            source: new ol.source.OSM()
          }),
          new ol.layer.Image({
     source: new ol.source.ImageWMS({
     url:'http://localhost:8080/geoserver/wms',
     params: {'LAYERS': 'cite:cycling_accidents_1915_wgs'},
     serverType: 'geoserver'
     })
       })            
        ],
        view: new ol.View2D({
          center: [-356344,7547495],
          zoom: 12
        })
      });

      var params = {
  LAYERS: 'pg_routing:pg_routing',
  FORMAT: 'image/png'
};
var startPoint = new ol.Overlay({
  map: map,
  element: document.getElementById('start-point')
});
var finalPoint = new ol.Overlay({
  map: map,
  element: document.getElementById('final-point')
});

var transform = ol.proj.getTransform('EPSG:3857', 'EPSG:4326');

map.on('click', function(event) {
  var coordinate = event.getCoordinate();
  if (startPoint.getPosition() == undefined) {
    // first click
    startPoint.setPosition(coordinate);
  } else if (finalPoint.getPosition() == undefined) {
    // second click
    finalPoint.setPosition(coordinate);

    // transform the coordinates from the map projection (EPSG:3857)
    // into the server projection (EPSG:4326)
    var startCoord = transform(startPoint.getPosition());
    var finalCoord = transform(finalPoint.getPosition());
    var viewparams = [
      'x1:' + startCoord[0], 'x2:' + startCoord[1],
      'y1:' + finalCoord[0], 'y2:' + finalCoord[1]
    ];
    params.viewparams = viewparams.join(';');

    // we now have the two points, create the result layer and add it to the map
    result = new ol.layer.ImageLayer({
      source: new ol.source.SingleImageWMS({
        url: 'http://localhost:8080/geoserver/pg_routing/wms',
        params: params
      })
    });
    map.addLayer(result);
  }
});
document.getElementById('clear').addEventListener('click', function(event) {
  // hide the overlays
  startPoint.setPosition(undefined);
  finalPoint.setPosition(undefined);

  // hide the result layer
  result.setVisible(false);
});


    </script>
  </body>
</html>

Best Answer

it depends which Beta Version of OL3 you are using. On the latest Version v.3.0.0 – gamma.2. there is no: new ol.source.SingleImageWMS The source name is: new ol.source.ImageWMS http://ol3js.org/en/master/apidoc/ol.source.ImageWMS.html Try to change that, maybe it solve the problem. Thank you for feedback.

Related Question