Select to view content in your preferred language

Add multiple graphic layers to map without for loop iteration

3579
9
Jump to solution
06-19-2017 02:15 AM
vanarajranjit
New Contributor

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

0 Kudos
1 Solution

Accepted Solutions
thejuskambi
Regular Contributor

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

9 Replies
thejuskambi
Regular Contributor

You can simply use

map.addLayers(labelArray);
vanarajranjit
New Contributor

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.

0 Kudos
PanagiotisPapadopoulos
Esri Regular Contributor

What kind of graphics you have? geometry type?

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

0 Kudos
vanarajranjit
New Contributor

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.

0 Kudos
PanagiotisPapadopoulos
Esri Regular Contributor

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>

<body>
<div id="map"></div>
</body>
</html>

thejuskambi
Regular Contributor

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
Esri Regular Contributor

also see this sample here

Edit fiddle - JSFiddle 

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

vanarajranjit
New Contributor

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

0 Kudos
PanagiotisPapadopoulos
Esri Regular Contributor

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.