topic PictureMarkerSymbol not showing in ArcGIS JavaScript Maps SDK Questions

PictureMarkerSymbol not showing

mingleidi — Thu, 04 Apr 2019 17:34:50 GMT

Hi,

I upgraded from 4.5 to 4.11, now PictureMarkerSymbol is not showing on the map, it's a client-side feature map, I confirmed my IIS is CORS enabled, and I even tried with esri image like this:

symbol =

{

type: "picture-marker",

// url: this._getAQHIIcon(attributes.AQHI),

url:

"https://static.arcgis.com/images/Symbols/Shapes/BlackStarLargeB.png",

contentType: "image/png",

width: 24,

height:36

};

still not working, I didn't set render for this feature layer, the image is selected from a list of icons based on an attribute value. Now it just shows dots. Could anyone please help out? This issue already took me days. Below is my code for feature layer:

featureLayer = new FeatureLayer({

fields: this.config.layerDefinition.fields,

objectIdField: this.config.layerDefinition.objectIdField,

geometryType: "point",

id: this.config.layerId,

source: this._generateGraphics(this.config.view.zoom),

popupTemplate: ({

title: "{CommunityName}" + " - Air Quality Health Index",

content: "{AQHI:getCommunityAqhiPopupContent}"

} as any) as PopupTemplate

});

_generateGraphics(zoomLevel: number): Array<Graphic> {

let graphics = this.allCommunityAqhis.map((data: any, i: number) => {

if (data.Longitude && data.Latitude) {

return this._createCommunityAqhiGraphic(data, i, zoomLevel);

}

}) as Array<Graphic>;

return graphics;

}

_createCommunityAqhiGraphic(data: any, objectId: any, zoomLevel: number) {

let point, attributes, symbol;

point = WebMercatorUtils.geographicToWebMercator(

new Point({

x: data.Longitude,

y: data.Latitude

})

);

symbol = {

type: "picture-marker",

// url: this._getAQHIIcon(attributes.AQHI),

url:

"https://static.arcgis.com/images/Symbols/Shapes/BlackStarLargeB.png",

contentType: "image/png",

width: this.config.iconWidth,

height: this.config.iconHeight

};

return new Graphic({

geometry: point,

symbol: symbol,

attributes: attributes

});

}

Attached screenshot. right side is working in 4.5, left side is not working in 4.11.

Thanks,

Benjamin

Re: PictureMarkerSymbol not showing

ReneRubalcava — Sat, 11 Dec 2021 22:39:42 GMT

It looks like you are trying to add the symbol to the graphic. When using a FeatureLayer, the symbol needs to be defined on the renderer of the layer. https://developers.arcgis.com/javascript/latest/api-reference/esri-renderers-SimpleRenderer.html

It would look something like this.

const renderer = {
  type: "simple",
  symbol: {
    type: "picture-marker",
    url: "https://static.arcgis.com/images/Symbols/Shapes/BlackStarLargeB.png",
    contentType: "image/png",
    width: this.config.iconWidth,
    height: this.config.iconHeight
  }
};

featureLayer = new FeatureLayer({
  fields: this.config.layerDefinition.fields,
  objectIdField: this.config.layerDefinition.objectIdField,
  geometryType: "point",
  id: this.config.layerId,
  source: this._generateGraphics(this.config.view.zoom),
  renderer: renderer, // Your renderer
  popupTemplate: ({
  title: "{CommunityName}" + " - Air Quality Health Index",
  content: "{AQHI:getCommunityAqhiPopupContent}"
});‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Re: PictureMarkerSymbol not showing

mingleidi — Thu, 04 Apr 2019 19:50:45 GMT

Hi Rene, thanks for your prompt reply. I cannot use Simple render because each graphic needs to use a different icon based on its attribute data, previous pasted code just for an example, below is actual code, it assigned a different icon to each graphics based their value dynamically:

_createCommunityAqhiGraphic(data: any, objectId: any, zoomLevel: number) {

symbol = this.config.is3D

? this._getPointSymbol3DObject(attributes.AQHI)

: {

type: "picture-marker",

url: this._getAQHIIcon(attributes.AQHI),

width: this.config.iconWidth,

height: this.config.iconHeight

};

return new Graphic({

geometry: point,

symbol: symbol,

attributes: attributes

});

}

_getAQHIIcon(aqhiValue: any) {

// default icon for community

let icon = this.config.iconPath + "aqhi_blank.png";

// icon changes depending on the AQHI status

if (aqhiValue !== null && aqhiValue > 0 && aqhiValue <= 10) {

icon = this.config.iconPath + "aqhi" + aqhiValue + ".png";

} else if (aqhiValue > 10 || aqhiValue === "10+") {

icon = this.config.iconPath + "aqhi10plus.png";

}

return icon;

}

for exmaple. if graphic aqhi value is 1, it's assigned aqhi1.png. It'w working fine is 4.5. Is in 4.11 feature layer must have a render?

Thanks,

Benjamin

Re: PictureMarkerSymbol not showing

ReneRubalcava — Fri, 05 Apr 2019 03:06:33 GMT

Then you can use a Unique Value Renderer.

UniqueValueRenderer | ArcGIS API for JavaScript 4.11

Re: PictureMarkerSymbol not showing

mingleidi — Fri, 05 Apr 2019 21:19:40 GMT

Thanks Rene, I will try it, should be the solution.