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>
    <title>ol3 pgRouting client</title>
    <meta charset="utf-8">
    <link href="ol3/ol.css" rel="stylesheet">
      #ol-map {
        width: 100%;
        height: 760px;
    <script src="ol3/ol.js"></script>
    <div id="ol-map">
     <div id="start-point">start</div>
     <div id="final-point">final</div>
      <button id="clear">clear</button>
    <!--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({
     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
  } else if (finalPoint.getPosition() == undefined) {
    // second click

    // 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
document.getElementById('clear').addEventListener('click', function(event) {
  // hide the overlays

  // hide the result layer


1 Answer 1


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.

  • Got rid of Open Layers 3 and started working with 2.13.1, I have found more documentation. Jul 24, 2014 at 9:17

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.