FeatureLayer use symbol for render

Slyke

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.

JoelBennett

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.