Add multiple graphic layers to map without for loop iteration

vanarajranjit · ‎06-19-2017

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);
}

thejuskambi · ‎06-20-2017

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

View solution in original post

thejuskambi · ‎06-19-2017

You can simply use

map.addLayers(labelArray);‍

vanarajranjit · ‎06-19-2017

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.

PanagiotisPapadopoulos · ‎06-20-2017

What kind of graphics you have? geometry type?

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

vanarajranjit · ‎06-20-2017

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.

PanagiotisPapadopoulos · ‎06-20-2017

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>

thejuskambi · ‎06-20-2017

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

PanagiotisPapadopoulos · ‎06-20-2017

also see this sample here

Edit fiddle - JSFiddle

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

vanarajranjit · ‎06-20-2017

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);

PanagiotisPapadopoulos · ‎06-21-2017

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.