Community
Select to view content in your preferred language

PictureMarkerSymbol not showing

3546
4
Jump to solution
04-04-2019 10:34 AM
mingleidi
by
Emerging Contributor
‎04-04-2019 10:34 AM

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

Preview file
1120 KB
0 Kudos
1 Solution

Accepted Solutions
ReneRubalcava
by
Honored Contributor
‎04-04-2019 08:06 PM

Then you can use a Unique Value Renderer.

UniqueValueRenderer | ArcGIS API for JavaScript 4.11 

View solution in original post

4 Replies
ReneRubalcava
by
Honored Contributor
‎04-04-2019 11:28 AM

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
by
Emerging Contributor
‎04-04-2019 12:50 PM

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
by
Honored Contributor
‎04-04-2019 08:06 PM

Then you can use a Unique Value Renderer.

UniqueValueRenderer | ArcGIS API for JavaScript 4.11 

mingleidi
by
Emerging Contributor
‎04-05-2019 02:19 PM

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

0 Kudos