I have a working WMS service under http://localhost:8080/geoserver/nis/wms?service=WMS&version=1.1.0&request=GetMap&layers=nis%3Atest

Also I have a Node JS application with OpenLayers. In this application I have a button. It gets visible after a certain condition is met. With this button I want the user to be able to load the WMS.

This is my button:

        className={this.state.addMessageVisible ? "sc-fakeLink" : "sc-hidden"}
        style={{ gridColumnStart: "1", gridColumnEnd: "3", gridRowStart: "4", textAlign: "-webkit-center", alignSelf: "center" }}
        Show WMS

This is triggered by the button:

  onAddWMSToMyMaps = () => {

which in turn triggers this on the map canvas:

    window.emitter.addListener("addWMS",() => this.addLayerviaWMS(true));}

and after all shall trigger this one:

  addLayerviaWMS = () => {
var newlayer = 'http://localhost:8080/geoserver/nis/wms?service=WMS&version=1.1.0&request=GetMap&layers=nis%3Atest4733'

The error is the following:

TypeError: can't assign to property "ol_uid" on "http://localhost:8080/geoserver/nis/wms?service=WMS&version=1.1.0&request=GetMap&layers=nis%3Atest4733": not an object

1 Answer 1


newlayer is assigned to a string, the OpenLayers addLayer() method expects an OpenLayers layer object

  var newlayer = new ImageLayer({
    source: new ImageWMS({
      url: 'http://localhost:8080/geoserver/nis/wms',
      params: {'LAYERS': 'nis:test4733'},
      ratio: 1,
      serverType: 'geoserver'

see this example https://openlayers.org/en/latest/examples/wms-image.html

  • thanks for that push in the right direction! worked!
    – Leo
    Jan 17, 2020 at 8:07

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.