topic Re: Performance issues on GraphicsLayer between versions 3.x > 4.x in ArcGIS JavaScript Maps SDK Questions

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

LorenzoFedi — Fri, 22 Mar 2019 09:29:29 GMT

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>

<style>

html,

body,

#viewDiv {

margin: 0;

padding: 0;

width: 100%;

height: 100%;

}

</style>

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>

</html>

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

RobertScheitlin__GISP — Fri, 10 Dec 2021 22:39:41 GMT

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>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

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

LorenzoFedi — Fri, 22 Mar 2019 14:15:01 GMT

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

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

RobertScheitlin__GISP — Fri, 22 Mar 2019 14:51:17 GMT

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