Feature Layer has a dark background color but not in arcgis.com

102
1
08-10-2022 12:54 PM
AIHobart
New Contributor II

Hi, I'm having a problem with displaying map layers to a map. Currently, my layer has a darker background and doesn't parse some of the information correctly to the layer on the map, as such:

AIHobart_0-1660160945187.png

However, on arcgis.com (ie. https://www.arcgis.com/apps/mapviewer/index.html?url=https://hydro.nationalmap.gov/arcgis/rest/servi...), it doesn't actually darken the background. Both applications are on Arcgis JS 4.24 and there is nothing wrong when adding a layer. 

AIHobart_1-1660161285520.png

My implementation is simply just creating a new FeatureLayer and adding it to the map, ie:

new FeatureLayer({url: https://hydro.nationalmap.gov/arcgis/rest/services/wbd/MapServer/6});

Is there something that needs to be done to the Layer before adding it to the map such that the darkening parts of the layer aren't and that the parsing is correct? Or is there some sort of open source code to see mapviewer?

This is the map layer I am trying to add to my map: https://hydro.nationalmap.gov/arcgis/rest/services/wbd/MapServer/6.

0 Kudos
1 Reply
UndralBatsukh
Esri Regular Contributor

Hi there, 

I think the map and feature services are working as expected in this case. Seems like the map service has some advanced cartographic settings that could not be translated into a feature service. So the feature service renderers have different symbols than the map service itself. 

The map service legend shows transparent fills here: https://hydro.nationalmap.gov/arcgis/rest/services/wbd/MapServer/legend

However, if you check the service layer rest end point you can see that the simple renderer has a black fill: https://hydro.nationalmap.gov/arcgis/rest/services/wbd/MapServer/6 but the layer itself has 55% opacity. 

So you can set the fill color of the layer's renderer to null when the layers load in the app. You can do the following: 

view.whenLayerView(layer).then(()=> {
  const renderer = layer.renderer;
  renderer.symbol.color = null;
});

 

This codepen shows how it works: https://codepen.io/U_B_U/pen/OJvwYJg?editors=1000

If you have questions about why this is happening you can direct your question in this community: https://community.esri.com/t5/arcgis-enterprise/ct-p/arcgis-enterprise