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>
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>
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
4.11 will officially release in a few days. Yes they continue to improve performance in each release.