Adding a WMS layer with a customized style

5060
7
01-22-2014 08:08 AM
BrettGreenfield__DNR_
Occasional Contributor II
I'm trying to add a WMS Service that's hosted elsewhere to one of my webmaps.  The default layer has a color scheme that doesn't really match what we're trying to do with our map, so the hosts of the service offered to set up a new style for us using colors that better fit our map.  They sent me a URL directly to the layer with the style, but I have no idea how to add that to my map.  Is this possible via JavaScript?

For reference, here's the URL I was sent: http://oyster.ncbo.cgsrvr.com/geoserver/ODT/wms?service=WMS&version=1.1.0&request=GetMap&layers=ODT:...
0 Kudos
7 Replies
Noah-Sager
Esri Regular Contributor
Hi Brett,

We have some JavaScript documentation about working with WMS layers, and a couple of samples that demonstrate the ability.

I'd say give these resources a shot and post back here if you run into any issues.

-Noah
0 Kudos
BrettGreenfield__DNR_
Occasional Contributor II
I worked with the samples and I'm still not able to make any progress.  I've already got the service added and it shows the specific layer, but there's a different styling of the layer that we're trying to use that I can't target specifically.  Here's my code to add the layer:

   dojo.connect(map, "onLoad", function(){
     wmsLayer = new esri.layers.WMSLayer("http://oyster.ncbo.cgsrvr.com/geoserver/ODT/wms");
     wmsLayer.setVisibleLayers([3]);
     wmsLayer.setImageFormat("format");
     wmsLayer.setOpacity(0.75);
     dojo.forEach(wmsLayer.layerInfos, function(layerInfo) {
       console.log(layerInfo.title);
        });
              map.addLayer(wmsLayer);
   });


That brings up the layer I'm trying to work with but not the specific style that was created for us.  If you look at the original URL I gave, there's a part of the URL that specifies the style ("&styles=ODT_Benthic_Mddnr").  I want to get that to show up, but I don't know how (I even tried adding it in ArcMap but I can't do that either!).  The documentation doesn't make any mention of styles anywhere, so I'm not even sure this is possible via the JavaScript API.
0 Kudos
BrettGreenfield__DNR_
Occasional Contributor II
Any answer for this?
0 Kudos
BrettGreenfield__DNR_
Occasional Contributor II
I'm still having a hard time figuring this out.  I can successfully add the WMS layer, but there doesn't appear to be any way to specify the style that will go in the request.  When I open up the map and look at the Net tab in Firebug, I can see it's sending a request out that says http://oyster.ncbo.cgsrvr.com/geoserver/ODT/ows?SERVICE=WMS&SERVICE=WMS&REQUEST=GetMap&FORMAT=image/...&STYLES=&VERSION=1.3.0&LAYERS=Chesapeake_Bay_Benthic_Habitat_CMECS_SGC_08_15_2012&WIDTH=1920&HEIGHT=631&CRS=EPSG:3857&BBOX=-15605601.115580603,2895690.3121166304,-6213019.079900644,5982523.262384368.

  I've bolded the section that says "&STYLES=", so I can see the parameter is included in the request, but I have no idea how to add a value to it.
0 Kudos
JasonGreenlaw
Occasional Contributor
It looks like custom styles are not supported in ESRI's WMSLayer implementation, so your only option is likely to create a custom WMS Layer type that you can use instead.  This will allow you to manually set the STYLES parameter. 

See this sample:  https://developers.arcgis.com/javascript/jssamples/layers_custom_wms.html
0 Kudos
BrettGreenfield__DNR_
Occasional Contributor II
It looks like custom styles are not supported in ESRI's WMSLayer implementation, so your only option is likely to create a custom WMS Layer type that you can use instead.  This will allow you to manually set the STYLES parameter. 

See this sample:  https://developers.arcgis.com/javascript/jssamples/layers_custom_wms.html


Thanks.  I tried messing with that and my result was strange.  I got the layer to show up on the map, but as a small, static image; when I would zoom in/out, the layer wouldn't reflect the zoom changes.  I copied all the parameters exactly as they were called from simply adding it as a regular WMS layer, but nothing seemed to help.
0 Kudos
AgostinoCirasa
New Contributor II

<Object> customLayerParameters

Use this to append different custom parameters to WMS layer requests. For example, if your WMS layer supports styles, styles can be used as a custom parameter for layer requests. 
The custom parameters are applied to GetMap and GetFeatureInfo. 

NOTE: customLayerParameters can be part of resourceInfo or outside of it in the WMSLayer's constructor. If both are set in resourceInfo and also directly as customLayerParameters in the constructor, the one in resourceInfo takes precedence. (Added at v3.18)
Sample:
"customLayerParameters" : {
  "styles": "pointsymbolizer", 
  "SLD": "https://.../point_pointSymbolizer.xml"
}
0 Kudos