PictureMarkerSymbol not showing

1585
4
Jump to solution
04-04-2019 10:34 AM
mingleidi
New Contributor II

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

0 Kudos
1 Solution

Accepted Solutions
ReneRubalcava
Frequent Contributor II
4 Replies
ReneRubalcava
Frequent Contributor II

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}"
});‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍
mingleidi
New Contributor II

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 

0 Kudos
ReneRubalcava
Frequent Contributor II

Then you can use a Unique Value Renderer.

UniqueValueRenderer | ArcGIS API for JavaScript 4.11 

mingleidi
New Contributor II

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

0 Kudos