topic Re: Add multiple graphic layers to map without for loop iteration in ArcGIS JavaScript Maps SDK Questions

Add multiple graphic layers to map without for loop iteration

vanarajranjit — Mon, 19 Jun 2017 09:15:18 GMT

Labelarray is having graphic layer. This is taking very long time for execution when more than 100 records.

for ( var j = 0; j < labelArray.length; j++) {
map.addLayer(labelArray);
}

Re: Add multiple graphic layers to map without for loop iteration

thejuskambi — Mon, 19 Jun 2017 12:47:36 GMT

You can simply use

map.addLayers(labelArray);‍

Re: Add multiple graphic layers to map without for loop iteration

vanarajranjit — Tue, 20 Jun 2017 04:56:06 GMT

I am getting performance issue on this , in array morethan 1000 records means it takes 10 min for execution and displaying in map and while execution the browser also hangs. I need a better solution for this.

Re: Add multiple graphic layers to map without for loop iteration

PanagiotisPapadopoulos — Tue, 20 Jun 2017 07:01:54 GMT

What kind of graphics you have? geometry type?

from where those graphics are coming? example query on a service and draw the results.....?

Re: Add multiple graphic layers to map without for loop iteration

vanarajranjit — Tue, 20 Jun 2017 07:13:52 GMT

The below example explains first i am creating textsymbol property, setting text (number),using graphic setting the text label.Then add that graphic to graphic layer. graphic layer are pushing into array list

for(var i=0; i <= mappoint.length;i++)

{

var Textsymbol= new TextSymbol();
Textsymbol.setAlign(TextSymbol.ALIGN_MIDDLE);
Textsymbol.setOffset(0, 13);
Textsymbol.setText(number);

var graphic = new Graphic(new Point(parseFloat(lat),
parseFloat(lat), wgs), Textsymbol);
var cLayer = new GraphicsLayer();
cLayer .add(graphic);
cLayer .setMaxScale(0);
cLayer .setMinScale(288895.277144);

labelArray.push(cLayer );

}

then adding the label array to map using map.addlayers(labelArray) here i am getting performance issue.for adding into map it takes so long time for execution and displaying into map. If i used for loop iteration for map.addlayer(labelArray) also taking same time.

Re: Add multiple graphic layers to map without for loop iteration

PanagiotisPapadopoulos — Tue, 20 Jun 2017 08:58:43 GMT

try this code

.......

<!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>Simple Map</title>
<link rel="stylesheet" href="https://js.arcgis.com/3.20/esri/css/esri.css">
<style>
html, body, #map {
height: 100%;
margin: 0;
padding: 0;
}
</style>
<script src="https://js.arcgis.com/3.20/"></script>
<script>
var map;

require(["dojo/dom",
"dojo/dom-attr",
"dojo/_base/array",
"esri/Color",
"dojo/number",
"dojo/parser",
"dijit/registry",

"esri/config","esri/map", "esri/geometry/Point","esri/layers/GraphicsLayer","esri/symbols/TextSymbol","esri/graphic","esri/SpatialReference","esri/Color", "esri/symbols/Font", "dojo/parser","dojo/domReady!"],
function(dom, domAttr, array, Color, number, parser, registry, esriConfig,Map,Point,GraphicsLayer,TextSymbol,Graphic,SpatialReference,Color,Font) {
parser.parse();
map = new Map("map", {
basemap: "gray", //For full list of pre-defined basemaps, navigate to http://arcg.is/1JVo6Wd
center: [23, 39], // longitude, latitude
zoom: 6
});
map.on("load", initOperationalLayer);

function initOperationalLayer(){
var cLayer = new GraphicsLayer();
map.addLayer(cLayer);

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

var font = new Font("22px", Font.STYLE_NORMAL, Font.VARIANT_NORMAL, Font.WEIGHT_BOLDER);
var textSymbol = new TextSymbol("n"+i,font, new Color([0, 0, 0]));
var lon=23+(i/100);
var lat=39+(i/100);
var graphic = new Graphic(new Point(lon,lat, new SpatialReference({wkid: 4326})), textSymbol);

cLayer.add(graphic);
}
}

});
</script>
</head>

Re: Add multiple graphic layers to map without for loop iteration

PanagiotisPapadopoulos — Tue, 20 Jun 2017 09:00:25 GMT

also see this sample here

Edit fiddle - JSFiddle

you will see that there is no problem to draw 1000 text symbols.

Re: Add multiple graphic layers to map without for loop iteration

vanarajranjit — Tue, 20 Jun 2017 11:18:24 GMT

What is difference between initializing the below graphics layer if outside for loop & inside for loop?

var cLayer = new GraphicsLayer();

The below clayer to map how it is being reflected before for loop processing ?
map.addLayer(cLayer);

Re: Add multiple graphic layers to map without for loop iteration

thejuskambi — Sat, 11 Dec 2021 20:55:12 GMT

Why are you creating a GraphicLayer for each graphic/Text label? If you move the Layer part out side the loop you can have one GraphicLayer with multiple graphics. Then you will have only one Layer to add.

var cLayer = new GraphicsLayer();

for(var i=0; i <= mappoint.length;i++){
    var Textsymbol= new TextSymbol();
    Textsymbol.setAlign(TextSymbol.ALIGN_MIDDLE);
    Textsymbol.setOffset(0, 13);
    Textsymbol.setText(number);
    
    var graphic = new Graphic(new Point(parseFloat(lat),
    parseFloat(lat), wgs), Textsymbol);
    cLayer.add(graphic);
}

cLayer.setMaxScale(0);
cLayer.setMinScale(288895.277144);

labelArray.push(cLayer ); // Or add it directly  to map‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Re: Add multiple graphic layers to map without for loop iteration

PanagiotisPapadopoulos — Wed, 21 Jun 2017 07:50:03 GMT

working with Graphic Layer the common way you are working is to add an empty Graphic Layer on the map and latter add the graphics on it.

you are creating new Graphic Layer in case the graphics you want to store belong on different layer group.

for example you can have a Graphic Layer to store the results from a query, and an another to store the results from a geoprocessing tool.

in your case all textsymbol graphics belong on the same layer.

I hope this helps you.