Select to view content in your preferred language

PictureMarkerSymbol in ArcGis js v4.29 renders black blocks

230
1
06-12-2024 07:47 AM
TomRaaffPoR
New Contributor

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>

 

 

 

0 Kudos
1 Reply
KristianEkenes
Esri Regular Contributor

I suggest contacting Esri support (support@esri.com ) with this issue. We're about to make another update, so it would be good to get this recorded in our our bug triage system to address it as soon as possible.

0 Kudos