Add WMS to OpenLayers after click

Question

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:

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

This is triggered by the button:

 onAddWMSToMyMaps = () => {
// ADD MYMAPS
window.emitter.emit("addWMS");};

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'
window.map.addLayer(newlayer)};

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

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

• Leo: thanks for that push in the right direction! worked!