nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

Adding a WMS layer with a customized style

BrettGreenfield__DNR_

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:Chesapeake_Bay_Benthic_Habitat_CMECS_SGC_08_15_2012&styles=ODT_Benthic_Mddnr&bbox=321122.25769999996,4082994.0966,443060.8214000003,4366307.511000001&width=220&height=512&srs=EPSG:26918&format=application/openlayers

Vind meer berichten getagd met

Accepted answers

All comments

AgostinoCirasa_sitr

<`<SPAN class=""><A href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" style="color: #00629b; text-decoration: none;" rel="nofollow noopener noreferrer" target="_blank">Object</A></SPAN>`> 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"
}

BrettGreenfield__DNR_

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.

JasonGreenlaw

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

BrettGreenfield__DNR_

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/png&TRANSPARENT=TRUE&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.

BrettGreenfield__DNR_

Any answer for this?

BrettGreenfield__DNR_

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.

Noah Sager

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

Doe mee aan het gesprek

Aangemelde leden kunnen berichten plaatsen, updates volgen en meer. Nieuw hier? Registreer een gratis account.

Snelle Links

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.