Hey There,
I've run into a situation in which an animated .png image renders (partial) black blocks instead of the image.
See this video: https://streamable.com/cv1y0v
This behaviour popped up in version 4.29, and I have confirmed that this does NOT occur in v4.28.
Unfortunately, the situation isn't very consistent. Sometimes, it still works as expected. Also, I haven't been able to reproduce the issue in a bare-bones setting. However, there are a couple of things I know for certain:
- it started occurring after the upgrade to v4.29
- the PictureMarkerSymbol is related to it
- it happens with both .gif and .png files
I've included a script that has a basic implementation of this functionality. However, I couldn't reproduce the bug with it... So, it only occurs when adding other complexity on top of this implementation.
I'm sorry I couldn't reproduce the bug in an isolated situation, but maybe you can use this as a starting point. Please let me know what other kind of information you need.
The script:
<html lang="en">
<head>
<meta charset="utf-8" />
<meta
name="viewport"
content="initial-scale=1, maximum-scale=1,user-scalable=no"
/>
<title>PictureMarkerSymbol 4.29 bug reproduction attempt</title>
<style>
html,
body,
#viewDiv {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
</style>
<link
rel="stylesheet"
href="https://js.arcgis.com/4.29/esri/themes/light/main.css"
/>
<script src="https://js.arcgis.com/4.29/"></script>
<script>
require([
"esri/Map",
"esri/views/MapView",
"esri/layers/FeatureLayer",
"esri/Graphic",
"esri/geometry/Point",
"esri/geometry/Extent",
"esri/layers/GraphicsLayer",
], (
Map,
MapView,
FeatureLayer,
Graphic,
Point,
Extent,
GraphicsLayer,
) => {
function getRippleSymbol() {
return {
type: "picture-marker",
url: "https://i.ibb.co/FXQ65HH/ripple-light.png",
width: "64px",
height: "64px",
};
}
function getVesselSymbol() {
return {
type: "picture-marker",
url: "https://i.ibb.co/1zD1w4M/triangle.png",
width: "16px",
height: "16px",
};
}
let spatialReference = { wkid: 3857 };
let x = -39_000_000;
let y = 7_200_000;
const rippleLayer = new GraphicsLayer({
title: "rippleLayer",
graphics: [
new Graphic({
geometry: new Point({ x, y, spatialReference }),
symbol: getRippleSymbol(),
}),
],
});
const vesselLayer = new GraphicsLayer({
title: "vesselLayer",
graphics: [],
});
const map = new Map({
basemap: "satellite",
layers: [rippleLayer, vesselLayer],
});
const view = new MapView({
container: "viewDiv",
map,
extent: {
spatialReference,
xmin: -41525513,
xmax: -36687355,
ymin: 4969181,
ymax: 9024624,
},
constraints: {
rotationEnabled: false,
snapToZoom: false,
minZoom: 3,
},
spatialReference,
navigation: { momentumEnabled: false },
});
view.on("click", (e) => {
rippleLayer.removeAll();
rippleLayer.add(
new Graphic({
geometry: e.mapPoint,
symbol: getRippleSymbol(),
}),
);
});
// periodically render 1000-2000 new graphics
setInterval(() => {
try {
vesselLayer.removeAll();
const graphics = [];
const amnt = Math.floor(Math.random() * 1000 + 1000);
for (let i = 0; i < amnt; i++) {
x = Math.floor(Math.random() * view.extent.xmax + (view.extent.xmin - view.extent.xmax));
y = Math.floor(Math.random() * view.extent.ymax + view.extent.ymin);
graphics.push(
new Graphic({
geometry: new Point({ x, y, spatialReference }),
symbol: getVesselSymbol(),
}),
);
}
vesselLayer.addMany(graphics);
} catch (e) {
console.log(e);
}
}, 5000);
});
</script>
</head>
<body>
<div id="viewDiv"></div>
</body>
</html>
