I'm trying to set the renderer property on a feature layer. I've tried a few different ways, all resulting in some type of rendering error: app . layers = { 'allOffsiteLocations' : new FeatureLayer ( { url : ' https://fmags.fm.utah.edu/arcgis/rest/services/mapservices/network_offsite_locations/MapServer/8 ' , 'id' : 'allOffsiteLocations' , 'outFields' : [ '*' ] , 'maxScale' : 18057 , 'renderer' : { 'type' : 'simple' , 'symbol' : { 'type' : 'simple-marker' , 'size' : 20 , 'color' : 'black' } } } ) , } ERROR I've also tried: 'allOffsiteLocations': new FeatureLayer({url: 'https://fmags.fm.utah.edu/arcgis/rest/services/mapservices/network_offsite_locations/MapServer/8', 'id': 'allOffsiteLocations', 'outFields': ['*'], 'maxScale': 18057, 'renderer': new SimpleRenderer ({ 'symbol':{ 'type': 'simple-marker', 'size': 20, 'color': 'black' } }), }), Which resulted in: I do have SimpleRenderer listed in my require statement and both the require/functions appear to be in the same order: require ( [ 'esri/widgets/Home' , 'ugis/widgets/Track' , 'esri/widgets/Compass' , 'esri/widgets/Search' , 'esri/layers/TileLayer' , 'esri/layers/FeatureLayer' , 'esri/layers/GraphicsLayer' , 'esri/Graphic' , 'esri/symbols/SimpleMarkerSymbol' , 'esri/symbols/SimpleFillSymbol' , 'esri/symbols/SimpleLineSymbol' , 'esri/symbols/PictureMarkerSymbol' , 'esri/tasks/QueryTask' , 'esri/tasks/support/RelationshipQuery' , 'esri/geometry/Point' , 'esri/geometry/Polygon' , 'esri/tasks/support/Query' , 'esri/geometry/SpatialReference' , 'esri/renderers/SimpleRenderer' , 'dojo/query' , 'dojo/dom-class' , 'dojo/touch' , 'dojo/dom-attr' ] , function ( Home , Track , Compass , Search , TileLayer , FeatureLayer , GraphicsLayer , Graphic , SimpleMarkerSymbol , SimpleFillSymbol , SimpleLineSymbol , PictureMarkerSymbol , QueryTask , RelationshipQuery , Point , Polygon , Query , SpatialReference , SimpleRenderer , query , domClass , touch , dojoDomAttr )

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; } } }

Problem with setting renderer JSAPI 4.5

RachelAlbritton

I'm trying to set the renderer property on a feature layer. I've tried a few different ways, all resulting in some type of rendering error:

app<SPAN class="punctuation token">.</SPAN>layers <SPAN class="operator token">=</SPAN> <SPAN class="punctuation token">{</SPAN>

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp; <SPAN class="string token">'allOffsiteLocations'</SPAN><SPAN class="punctuation token">:</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">FeatureLayer</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">{</SPAN>url<SPAN class="punctuation token">:</SPAN> <SPAN class="string token"><SPAN>'</SPAN><A class="jive-link-external-small" href="https://community.esri.com/external-link.jspa?url=https%3A%2F%2Ffmags.fm.utah.edu%2Farcgis%2Frest%2Fservices%2Fmapservices%2Fnetwork_offsite_locations%2FMapServer%2F8" target="_blank">https://fmags.fm.utah.edu/arcgis/rest/services/mapservices/network_offsite_locations/MapServer/8</A><SPAN>'</SPAN></SPAN><SPAN class="punctuation token">,</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="string token">'id'</SPAN><SPAN class="punctuation token">:</SPAN> <SPAN class="string token">'allOffsiteLocations'</SPAN><SPAN class="punctuation token">,</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="string token">'outFields'</SPAN><SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">[</SPAN><SPAN class="string token">'*'</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">,</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="string token">'maxScale'</SPAN><SPAN class="punctuation token">:</SPAN> <SPAN class="number token">18057</SPAN><SPAN class="punctuation token">,</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="string token">'renderer'</SPAN><SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">{</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="string token">'type'</SPAN><SPAN class="punctuation token">:</SPAN> <SPAN class="string token">'simple'</SPAN><SPAN class="punctuation token">,</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="string token">'symbol'</SPAN><SPAN class="punctuation token">:</SPAN><SPAN class="punctuation token">{</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<SPAN class="string token">'type'</SPAN><SPAN class="punctuation token">:</SPAN> <SPAN class="string token">'simple-marker'</SPAN><SPAN class="punctuation token">,</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<SPAN class="string token">'size'</SPAN><SPAN class="punctuation token">:</SPAN> <SPAN class="number token">20</SPAN><SPAN class="punctuation token">,</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<SPAN class="string token">'color'</SPAN><SPAN class="punctuation token">:</SPAN> <SPAN class="string token">'black'</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<SPAN class="punctuation token">}</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<SPAN class="punctuation token">}</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">,</SPAN>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍
<SPAN class="punctuation token">}</SPAN>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍<SPAN class="line-numbers-rows"><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN></SPAN>

ERROR

I've also tried:

'allOffsiteLocations': new FeatureLayer({url: 'https://fmags.fm.utah.edu/arcgis/rest/services/mapservices/network_offsite_locations/MapServer/8',
   'id': 'allOffsiteLocations',
   'outFields': ['*'],
   'maxScale': 18057,
   'renderer': new SimpleRenderer ({
      'symbol':{
         'type': 'simple-marker',
         'size': 20,
         'color': 'black'
      }
   }),
}),

Which resulted in:

I do have SimpleRenderer listed in my require statement and both the require/functions appear to be in the same order:

<SPAN class="token function">require</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">[</SPAN><SPAN class="string token">'esri/widgets/Home'</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">'ugis/widgets/Track'</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">'esri/widgets/Compass'</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">'esri/widgets/Search'</SPAN><SPAN class="punctuation token">,</SPAN> 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<SPAN class="string token">'esri/layers/TileLayer'</SPAN><SPAN class="punctuation token">,</SPAN><SPAN class="string token">'esri/layers/FeatureLayer'</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">'esri/layers/GraphicsLayer'</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">'esri/Graphic'</SPAN><SPAN class="punctuation token">,</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<SPAN class="string token">'esri/symbols/SimpleMarkerSymbol'</SPAN><SPAN class="punctuation token">,</SPAN><SPAN class="string token">'esri/symbols/SimpleFillSymbol'</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">'esri/symbols/SimpleLineSymbol'</SPAN><SPAN class="punctuation token">,</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<SPAN class="string token">'esri/symbols/PictureMarkerSymbol'</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">'esri/tasks/QueryTask'</SPAN><SPAN class="punctuation token">,</SPAN><SPAN class="string token">'esri/tasks/support/RelationshipQuery'</SPAN><SPAN class="punctuation token">,</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<SPAN class="string token">'esri/geometry/Point'</SPAN><SPAN class="punctuation token">,</SPAN><SPAN class="string token">'esri/geometry/Polygon'</SPAN><SPAN class="punctuation token">,</SPAN><SPAN class="string token">'esri/tasks/support/Query'</SPAN><SPAN class="punctuation token">,</SPAN><SPAN class="string token">'esri/geometry/SpatialReference'</SPAN><SPAN class="punctuation token">,</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<SPAN class="string token">'esri/renderers/SimpleRenderer'</SPAN><SPAN class="punctuation token">,</SPAN><SPAN class="string token">'dojo/query'</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">'dojo/dom-class'</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">'dojo/touch'</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">'dojo/dom-attr'</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">,</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<SPAN class="keyword token">function</SPAN> <SPAN class="punctuation token">(</SPAN>Home<SPAN class="punctuation token">,</SPAN> Track<SPAN class="punctuation token">,</SPAN> Compass<SPAN class="punctuation token">,</SPAN> Search<SPAN class="punctuation token">,</SPAN> TileLayer<SPAN class="punctuation token">,</SPAN> FeatureLayer<SPAN class="punctuation token">,</SPAN> GraphicsLayer<SPAN class="punctuation token">,</SPAN> Graphic<SPAN class="punctuation token">,</SPAN> SimpleMarkerSymbol<SPAN class="punctuation token">,</SPAN> 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; SimpleFillSymbol<SPAN class="punctuation token">,</SPAN> SimpleLineSymbol<SPAN class="punctuation token">,</SPAN> PictureMarkerSymbol<SPAN class="punctuation token">,</SPAN> QueryTask<SPAN class="punctuation token">,</SPAN> RelationshipQuery<SPAN class="punctuation token">,</SPAN> Point<SPAN class="punctuation token">,</SPAN> 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Polygon<SPAN class="punctuation token">,</SPAN>&nbsp; Query<SPAN class="punctuation token">,</SPAN> SpatialReference<SPAN class="punctuation token">,</SPAN> SimpleRenderer<SPAN class="punctuation token">,</SPAN> query<SPAN class="punctuation token">,</SPAN> domClass<SPAN class="punctuation token">,</SPAN> touch<SPAN class="punctuation token">,</SPAN> dojoDomAttr<SPAN class="punctuation token">)</SPAN><SPAN class="line-numbers-rows"><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN></SPAN>

Najděte více příspěvků označených jako

Accepted answers

ThomasSolow

Does it work if you use the symbol constructor along with the renderer constructor?

All comments

RachelAlbritton

Thanks Thomas -

I'm setting the opacity to clear on purpose (I did have it in color at forst so that I could verify that the points were present and the code was working). This layer is going to sit on top of a few graphics layers that are essentially subsets of this feature layer. Its representing various statuses of a location and a location can have more then one status. Rather then creating popups for each graphic which may result in redundant popups, I just created this feature layer to sit on top and make it the only clickable layer.

As far a spatial reference - not sure if its relevant for you but my though was the basemap is 102100 and the FL is in UTM so I was thinking that maybe the error was resulting from having two different coordinate systems but that didn't seem to matter in this case. Even with spatial reference set to match the basemap the error still occurs.

ThomasSolow

You shouldn't need to set the spatialReference here.

One issue is that in your example, the opacity of the symbol is 0, so you won't be able to see it. The 4th element in the arrays you're passing in as colors decide opacity, try setting them to something else, like this: https://codepen.io/solowt/pen/qPPeye?editors=1000

In that example I'm still seeing an error. I'll see if I can figure out what's going on.

RachelAlbritton

Thanks Thomas - that does result in the symbols drawing but I'm still getting an error in the console:

I've read a few posts on stakoverflow but they don't seem to apply here. I added the spatialReference property and set it to Web Mercator and the points are being drawn from the services geometery type (some posts states that this error can occur when lat/long points are strings).

This is what I currently have:

'allOffsiteLocations': new FeatureLayer({url: 'https://fmags.fm.utah.edu/arcgis/rest/services/mapservices/network_offsite_locations/MapServer/8',
   'id': 'allOffsiteLocations',
   'spatialReference': 102100,
   'outFields': ['*'],
   'maxScale': 18057,
   'popupTemplate': app.popupTemplates.offsiteLocations,
   'renderer': new SimpleRenderer ({
      'symbol': new SimpleMarkerSymbol({
         'size': 20,
         'color': [255,255,255,0],
         'outline':{
            'color': [255,255,255,0]
         }
      })
   })
}),

ThomasSolow

Does it work if you use the symbol constructor along with the renderer constructor?

Připojte se k diskusi

Přihlášení členové mohou přispívat, sledovat aktualizace a další. Jste tu noví? Zaregistrujte si bezplatný účet.

Rychlé odkazy

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