Performance issues on GraphicsLayer between versions 3.x > 4.x

877
3
03-22-2019 02:29 AM
LorenzoFedi
New Contributor

Hi All,

I'm experiencing strong performance issues between version 3.27 of ArcGis API for javascript and version 4.x.

I'm using same code on both platform (provided that map initialization is a bit changed in 4.x).

The issues is adding Graphic objects to GraphicsLayer. I'm using an instance of SimpleMarkerSymbol with an SVG path for its content.

The problem is: adding the same number of object to the map result in totally different timings.

15000 Graphic object with release 3.27 is immediate; with 4.10, it takes more than 30 seconds. What am i doing wrong? Furthermore, if i use older release, for example 4.5, performance seems to get better with older versions.

Really stuck on that, here's my sample project very minimal; please help on that..

thanks everybody,

<!DOCTYPE html>

<html>

  <head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no" />

    <title>Test Map</title>

    <link rel="stylesheet" href="https://js.arcgis.com/4.10/dijit/themes/claro/claro.css" />

    <link rel="stylesheet" href="https://js.arcgis.com/4.10/esri/css/main.css" />

    <style>

      html,

      body,

      #viewDiv {

        margin: 0;

        padding: 0;

        width: 100%;

        height: 100%;

      }

    </style>

    <script src="https://js.arcgis.com/4.10/dojo/dojo.js"></script>

    <script>

    

      var lon = 11.22727222;

      var lat = 43.79665556;

      var square_len = 0.005;

      var graphic;

      var iconPath = "M24.0,2.199C11.9595,2.199,2.199,11.9595,2.199,24.0c0.0,12.0405,9.7605,21.801,21.801,21.801c12.0405,0.0,21.801-9.7605,21.801-21.801C45.801,11.9595,36.0405,2.199,24.0,2.199zM31.0935,11.0625c1.401,0.0,2.532,2.2245,2.532,4.968S32.4915,21.0,31.0935,21.0c-1.398,0.0-2.532-2.2245-2.532-4.968S29.697,11.0625,31.0935,11.0625zM16.656,11.0625c1.398,0.0,2.532,2.2245,2.532,4.968S18.0555,21.0,16.656,21.0s-2.532-2.2245-2.532-4.968S15.258,11.0625,16.656,11.0625zM24.0315,39.0c-4.3095,0.0-8.3445-2.6355-11.8185-7.2165c3.5955,2.346,7.5315,3.654,11.661,3.654c4.3845,0.0,8.5515-1.47,12.3225-4.101C32.649,36.198,28.485,39.0,24.0315,39.0z";

      var initColor = "#ce641d";

      var myMap, view;

      require([

        "esri/Basemap",

        "esri/layers/TileLayer",

        "esri/Map",

        "esri/views/MapView",

        "esri/layers/GraphicsLayer",

        "esri/Graphic",

        "esri/geometry/Polygon",

        "esri/symbols/SimpleMarkerSymbol",

        "dojo/domReady!"

      ], function (Basemap,

      TileLayer,

      Map,

      MapView,

      GraphicsLayer,

      Graphic,

      Sketch,

      Polygon,

      SimpleMarkerSymbol,

      ){

        // --------------------------------------------------------------------

        // If you do not have public Internet access then use the Basemap class

        // and point this URL to your own locally accessible cached service.

        //

        // Otherwise you can just use one of the named hosted ArcGIS services.

        // https://services.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer

        // --------------------------------------------------------------------

        var layer = new TileLayer({

          url: "https://services.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer"

        });

        var customBasemap = new Basemap({

          baseLayers: [layer],

          title: "Custom Basemap",

          id: "myBasemap"

        });

        myMap = new Map({

          basemap: 'osm'

        });

        graphic = Graphic;

        

        view = new MapView({

          //center: [-111.87, 40.57], // long, lat

          center: [lon,lat], // long, lat

          container: "viewDiv",

          map: myMap,

          zoom: 6

        });

        view.when(function(){

            

        });

    });

      function getArrayOfPoints( numberOfPoints ) {

            let array = [];

            for(var i = 0; i < numberOfPoints; i++) {

                let lon = Math.random()*90 *( Math.floor(Math.random()*2) == 0 ? -1 : 1);

                let lat = Math.random()*180 * ( Math.floor(Math.random()*2) == 0 ? -1 : 1);;

                array.push({ type:"point", longitude: lon, latitude: lat });

            }

            return array;

        }

     

      function createSymbol(path, color, smb){

          var mb = new markerSymbol();

          mb.setPath(path);

          mb.setColor(new dojo.Color(color));

          mb.setOutline(null);

          return mb;

        }

        function createPoints() {

            pt = document.getElementById('nopoints').value;

            console.log(pt);

            var points = getArrayOfPoints(pt*1);

            for(p = 0; p < points.length; p++) {

                var pointGraphic = new graphic({

                geometry: points[p],

                symbol: {

                type: "simple-marker",

                path: iconPath,

                color: initColor

            }

            }); 

            view.graphics.add(pointGraphic);

            }

            console.log("PLACED "+pt+" points");

        }

      

      

     

    </script>

  </head>

  <body class="claro">

    <div id="viewDiv"></div>

    <div id="button" style="position:absolute; top:0px; left:0px;"><input type="button" value="Add Points" onclick="javascript:createPoints();"/></div>

    <div id="points" style="position:absolute; top:0px; left:200px;"><input id="nopoints" type="text" value=""/></div>

  </body>

</html>

0 Kudos
3 Replies
RobertScheitlin__GISP
MVP Emeritus

Lorenzo,

  Here is your code cleaned up and using 4.11 and it takes a few seconds to draw 15000. Performance was greatly improved in 4.11 for your workflow.

<!DOCTYPE html>
<html>

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no" />
  <title>Test Map</title>
  <link rel="stylesheet" href="https://js.arcgis.com/4.11/esri/css/main.css" />
  <script src="https://js.arcgis.com/4.11/"></script>

  <style>
    html,
      body,
      #viewDiv {
        margin: 0;
        padding: 0;
        width: 100%;
        height: 100%;
      }
    </style>

  <script>
      var lon = 11.22727222;
      var lat = 43.79665556;
      var iconPath = "M24.0,2.199C11.9595,2.199,2.199,11.9595,2.199,24.0c0.0,12.0405,9.7605,21.801,21.801,21.801c12.0405,0.0,21.801-9.7605,21.801-21.801C45.801,11.9595,36.0405,2.199,24.0,2.199zM31.0935,11.0625c1.401,0.0,2.532,2.2245,2.532,4.968S32.4915,21.0,31.0935,21.0c-1.398,0.0-2.532-2.2245-2.532-4.968S29.697,11.0625,31.0935,11.0625zM16.656,11.0625c1.398,0.0,2.532,2.2245,2.532,4.968S18.0555,21.0,16.656,21.0s-2.532-2.2245-2.532-4.968S15.258,11.0625,16.656,11.0625zM24.0315,39.0c-4.3095,0.0-8.3445-2.6355-11.8185-7.2165c3.5955,2.346,7.5315,3.654,11.661,3.654c4.3845,0.0,8.5515-1.47,12.3225-4.101C32.649,36.198,28.485,39.0,24.0315,39.0z";

      var initColor = "#ce641d";
      require([
        "esri/Map",
        "esri/views/MapView",
        "esri/Graphic",
        "esri/symbols/SimpleMarkerSymbol",
        "dojo/dom",
        "dojo/on",
        "dojo/domReady!"
      ], function (
        Map,
        MapView,
        Graphic,
        SimpleMarkerSymbol,
        dom,
        on
      ){

        var myMap = new Map({
          basemap: 'osm'
        });

        var view = new MapView({
          center: [lon,lat], // long, lat
          container: "viewDiv",
          map: myMap,
          zoom: 6
        });

        view.when(function(){
          on(dom.byId("addButton"), "click", createPoints);
        });

        function getArrayOfPoints( numberOfPoints ) {
          let array = [];
          for(var i = 0; i < numberOfPoints; i++) {
            let lon = Math.random()*90 *( Math.floor(Math.random()*2) == 0 ? -1 : 1);
            let lat = Math.random()*180 * ( Math.floor(Math.random()*2) == 0 ? -1 : 1);
            array.push({ type:"point", longitude: lon, latitude: lat });
          }
          return array;
        }

        function createPoints() {
          var pt = document.getElementById('nopoints').value;
          console.log(pt);

          var points = getArrayOfPoints(pt*1);
          var gras = points.map(function(pt){
            return new Graphic({
              geometry: pt,
              symbol: {
                type: "simple-marker",
                path: iconPath,
                color: initColor
              }
            });
          });
          view.graphics.addMany(gras);
          console.log("PLACED "+pt+" points");
        }
    });
  </script>
</head>

<body class="claro">
  <div id="viewDiv"></div>
  <div id="button" style="position:absolute; top:0px; left:0px;"><input type="button" value="Add Points" id="addButton"/></div>
  <div id="points" style="position:absolute; top:0px; left:200px;"><input id="nopoints" type="text" value="" /></div>
</body>

</html>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍
0 Kudos
LorenzoFedi
New Contributor

Hi Robert, 

Thanks for your kind help. There is a noticeable performance improvement for sure, anyway this 4.11 (by is it an official new release? i did not know it was out, still do not find anything about the dev site ... ) is still very far from the performance of 3.27.

I was quite sure it was something related to the framework not to the code i wrote, but as a matter of fact:

- 100000 SVG Symbol with 3.27 : painted in less than 1 sec

- 100000 SVG Symbol with 4.11 : painted in around 8 sec

4.10 would have gone idle to the point that chrome would signal a problem with js engine, but still i do not understand why the new releases has impacted so much on what was a great performing GraphicLayer.

Hope for further improvements,

Thanks

Lorenzo

0 Kudos
RobertScheitlin__GISP
MVP Emeritus

4.11 will officially release in a few days. Yes they continue to improve performance in each release.

0 Kudos