topic Re: FeatureLayer use symbol for render in ArcGIS JavaScript Maps SDK Questions

FeatureLayer use symbol for render

Slyke — Wed, 07 Aug 2024 14:32:46 GMT

Hello,

I'm running the map in SvelteKit.

I have an array of items like this:

const myArray = [ { x: someThing.coordinates.longitude, y: someThing.coordinates.latitude, icon: { url: `URL_OF_ICON.svg`, w: '24px', h: '32px' }, highlightedIcon: { url: `URL_OF_HIGHLIGHTED_ICON.svg`, w: '32px', h: '48px', backgroundColor: 'rgba(0, 255, 0, 0.3)', borderColor: 'rgba(0, 255, 0, 0.9)', circleR: '64px', circleBorderW: 2 }, someDetails: someThing }, ... ];

That I'm rendering to the map. I'm looping through this array and creating graphics onto the map:

Object.keys(points).forEach((point) => { try { const attributes = { someId: points[point].someDetails?.someId, someDetails: points[point].someDetails, isHighlighted: points[point].isHighlighted }; if (points[point].isHighlighted) { const circleSymbol = new SimpleMarkerSymbol({ style: "circle", color: points[point].highlightedIcon?.backgroundColor, size: points[point].highlightedIcon?.circleR, ...(points[point].highlightedIcon?.borderColor ? { outline: { color: points[point].highlightedIcon?.borderColor, width: points[point].highlightedIcon?.circleBorderW || 2 } } : {} ) }); const pictureSymbol = new PictureMarkerSymbol({ url: points[point].highlightedIcon?.url, width: points[point].highlightedIcon?.w, height: points[point].highlightedIcon?.h }); const pointGeometry = new Point({ longitude: points[point].x, latitude: points[point].y }); const circleGraphic = new Graphic({ geometry: pointGeometry, symbol: circleSymbol, attributes }); const pictureGraphic = new Graphic({ geometry: pointGeometry, symbol: pictureSymbol, attributes }); graphicsToAdd.push(circleGraphic); graphicsToAdd.push(pictureGraphic); } else { const graphic = new Graphic({ geometry: new Point({ longitude: points[point].x, latitude: points[point].y }), symbol: new PictureMarkerSymbol({ url: points[point].icon.url, width: points[point].icon.w, height: points[point].icon.h }), attributes }); graphicsToAdd.push(graphic); } } catch (err) { console.log(`Error: `, err); } });

graphicsToAdd is essentially being added to a GraphicsLayer that is a layer on the map.

I have another section of code that essentially detects if the mouse is hovering over one of the graphics, and changes the array so that isHighlighted is true for that item, and it'll render the highlighted icon, with the background graphic, and also show a popup.

The problem comes when I want to cluster these points so that when the user zooms out they clump together. I'm not sure what to do for the FeatureLayer:

const iconLayer = new FeatureLayer({ source: [], fields: [ { name: 'objectId', alias: 'objectId', type: 'oid' }, { name: 'someId', alias: 'someId', type: 'string' } ], objectIdField: 'objectId', geometryType: 'point', renderer: { type: "simple", symbol: { type: "picture-marker", // What goes here? } } });

It seems there's no way to get the FeatureLayer to render the graphics being attached to it via applyEdits(). I can make them show up as dots on the map, and can get them to cluster. But I can't get them to use their own icons. I haven't tried getting the mouse hover to work yet. I know that I can set a URL under renderer.symbol.type, but I want each graphic to render its own symbol.

Off topic:

Also, is there a way to switch to markdown mode when posting here? I can't edit my code snippets once they are inserted.

Re: FeatureLayer use symbol for render

JoelBennett — Wed, 07 Aug 2024 16:37:47 GMT

If I'm understanding this correctly, I think the problem is that FeatureLayer ignores the symbol property of its graphics. If you want each graphic to be rendered uniquely, I think your best bet is to create and populate a UniqueValueRenderer object, and set it to the layer's renderer property. You could add the url to the graphic's attributes, and use that as the field for your renderer.

Also, if you've created a code block in one of your posts, you can double-click it to re-open and edit.

Re: FeatureLayer use symbol for render

Slyke — Thu, 08 Aug 2024 10:09:33 GMT

Hey Joel,

Thanks for the reply.

I'm unsure what you mean by `populate a UniqueValueRenderer object, and set it to the layer's renderer property`.

Are there any examples of using a Layer that has a custom graphic for each icon, and updating the icon dynamically (either by mouseover or otherwise)? I essentially want to be able to cluster a set of Graphics.

Re: FeatureLayer use symbol for render

Slyke — Thu, 08 Aug 2024 12:00:04 GMT

I dig into it a little more and had ChatGPT help out. I modified this code it gave as an example. Seems to work wonders. Thanks for pointing me in the right direction!

Re: FeatureLayer use symbol for render

mrgreen8 — Wed, 01 Jan 2025 17:14:49 GMT

When using typescript in Angular, the new FeatureLayer({renderer}) is pointing to

RendererProperties and that is pointing to -> authoringInfo?: AuthoringInfoProperties,

so none of the working examples seem to be working with

import FeatureLayer from '@arcgis/core/layers/FeatureLayer' and being able to render.