topic Re: Add graphics to a map in ArcGIS JavaScript Maps SDK Questions

Add graphics to a map

EvelynHernandez — Sat, 11 Dec 2021 12:32:50 GMT

Hello everyone,

I am wondering why this code is not showing any graphic in a map.

I have the following:

<script>
 require([
 "esri/layers/FeatureLayer",
 
 "esri/geometry/Extent",
 "esri/graphicsUtils",
 "esri/tasks/query",
 "esri/tasks/QueryTask",
 "esri/map",
 "dojo/dom",
 "dojo/parser",
 "dojo/ready",
 "dojo/on",
 "dijit/layout/ContentPane",
 "dijit/layout/BorderContainer",
 "esri/kernel",
 'esri/graphic',
 'esri/layers/GraphicsLayer',
 "esri/symbols/SimpleMarkerSymbol",
 "esri/symbols/SimpleLineSymbol",
 "esri/Color"
 ], function (
 FeatureLayer, Extent, graphicsUtils, Query, QueryTask, Map,
 dom, parser, ready, on, ContentPane, BorderContainer, kernel, Graphic, GraphicsLayer, SimpleMarkerSymbol, Color, SimpleLineSymbol
 ) {


 parser.parse();
 
 ready(function(){
 var map = new Map("map",{
 basemap: "topo", 
 center:[-71.7018, -33.0228], 
 zoom:8
 });


 //Load a FeatureTable to the application once map loads
 map.on("load", loadData);


 function loadData(){
 
 var l = login(kernel)
 .then(resolve=>{
 console.log(resolve)
 var gLayerMedidor2 = new GraphicsLayer();
 var r = Math.floor(Math.random() * 255);
 var g = Math.floor(Math.random() * 255);
 var b = Math.floor(Math.random() * 255);


 var mySymbol = new SimpleMarkerSymbol(
 SimpleMarkerSymbol.STYLE_CIRCLE, 
 20, new SimpleLineSymbol(
 SimpleLineSymbol.STYLE_SOLID, 
 new Color([r, g, b, 0.5]), 
 10
 ), 
 new Color([r, g, b, 0.9]));
 


 var p = loadPostes(Query,QueryTask, map, resolve[1], ["678742","678743"])
 .then(resolve=>{
 console.log(resolve,"pipes")
 gLayerMedidor2.add(new Graphic(resolve[0].geometry,mySymbol));
 console.log(resolve[0].geometry)
 // map.graphics.add(new Graphic(featureSet.features[0].geometry, mySymbol));
 map.addLayer(gLayerMedidor2)
 


 }).catch(error=>{
 console.log(error, "error postes")
 })


 }).catch(reject=>{
 console.log(reject)
 })


 
 }
 });
 });
 </script>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Also in the loadPostes i have a promise that works like:

function loadPostes(Query, QueryTask, map, layers, rotulos){



 var entregas = "";
 for (let index = 0; index < rotulos.length; index++) {
 
 (index == rotulos.length-1) ? entregas = entregas + `rotulo = '${rotulos[index]}'` : entregas = entregas + `rotulo = '${rotulos[index]}' or `;
 
 }


 var promise = new Promise((resolve,reject)=>{
 


 var qTaskInterruptions = new QueryTask(layers.pole_layer);
 var qInterruptions = new Query();
 qInterruptions.returnGeometry = true;
 qInterruptions.outFields=["*"];
 qInterruptions.where = entregas;
 
 


 qTaskInterruptions.execute(qInterruptions, (featureSet)=>{
 
 if(!featureSet.features.length){
 reject([]);
 }
 
 resolve(featureSet.features)
 
 }, (Errorq)=>{
 console.log(Errorq,"Error doing query for rotulos");
 reject([]);
 });
 
 
 });
 
 return promise;
 
}‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

The promise is actualyl working fine cuz i have the result in console but it just not adding the graphics into the map to see them.

What am i doing wrong?

Thanks in advice!

Re: Add graphics to a map

RobertScheitlin__GISP — Tue, 15 Oct 2019 18:41:35 GMT

Evelyn,

Your requires are out of order (color, linesymbol).

Re: Add graphics to a map

EvelynHernandez — Tue, 15 Oct 2019 18:46:35 GMT

OK i fixed it but i still dont see the graphics

Re: Add graphics to a map

EvelynHernandez — Tue, 15 Oct 2019 18:51:13 GMT

This is my new code

require([

"esri/layers/FeatureLayer",

"esri/geometry/Extent",

"esri/graphicsUtils",

"esri/tasks/query",

"esri/tasks/QueryTask",

"esri/map",

"dojo/dom",

"dojo/parser",

"dojo/ready",

"dojo/on",

"dijit/layout/ContentPane",

"dijit/layout/BorderContainer",

"esri/kernel",

'esri/graphic',

'esri/layers/GraphicsLayer',

"esri/symbols/SimpleMarkerSymbol",

"esri/symbols/SimpleLineSymbol",

"esri/Color"

], function (

FeatureLayer, Extent, graphicsUtils, Query, QueryTask, Map,

dom, parser, ready, on, ContentPane, BorderContainer, kernel, Graphic, GraphicsLayer, SimpleMarkerSymbol, SimpleLineSymbol, Color

) {

parser.parse();

ready(function(){

var map = new Map("map",{

basemap: "topo",

center:[-71.7018, -33.0228],

zoom:8

});

//Load a FeatureTable to the application once map loads

map.on("load", loadData);

function loadData(){

var l = login(kernel)

.then(resolve=>{

console.log(resolve)

var gLayerMedidor2 = new GraphicsLayer();

var r = Math.floor(Math.random() * 255);

var g = Math.floor(Math.random() * 255);

var b = Math.floor(Math.random() * 255);

var mySymbol = new SimpleMarkerSymbol(

SimpleMarkerSymbol.STYLE_CIRCLE,

20, new SimpleLineSymbol(

SimpleLineSymbol.STYLE_SOLID,

new Color([r, g, b, 0.5]),

new Color([r, g, b, 0.9]));

var p = loadPostes(Query,QueryTask, map, resolve[1], ["678742","678743"])

.then(resolve=>{

console.log(resolve,"pipes")

resolve.map(r=>{

gLayerMedidor2.add(new Graphic(r.geometry,mySymbol));

});

// map.graphics.add(new Graphic(featureSet.features[0].geometry, mySymbol));

map.addLayer(gLayerMedidor2)

}).catch(error=>{

console.log(error, "error postes")

})

}).catch(reject=>{

console.log(reject)

})

}

});

</script>

Re: Add graphics to a map

RobertScheitlin__GISP — Tue, 15 Oct 2019 19:57:48 GMT

Evelyn,

I do not see in your code where you are specifying the out spatial reference of the query class. Is the data you are querying the same as the maps spatial reference?

Re: Add graphics to a map

EvelynHernandez — Sat, 11 Dec 2021 12:32:53 GMT

My query is the following:

var promise = new Promise((resolve,reject)=>{
 


 var qTaskInterruptions = new QueryTask(layers.pole_layer);
 var qInterruptions = new Query();
 qInterruptions.returnGeometry = true;
 qInterruptions.outFields=["*"];
 qInterruptions.where = entregas;
 
 


 qTaskInterruptions.execute(qInterruptions, (featureSet)=>{
 
 if(!featureSet.features.length){
 reject([]);
 }
 
 resolve(featureSet.features)
 
 }, (Errorq)=>{
 console.log(Errorq,"Error doing query for rotulos");
 reject([]);
 });
 
 
 });
 
 return promise;
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

And in the rest service i have the

Spatial Reference: 32719 (32719)

So...where should i put that in the query?

Re: Add graphics to a map

BenElan — Sat, 11 Dec 2021 12:32:55 GMT

You can put it where you are defining the query parameters

 var qTaskInterruptions = new QueryTask(layers.pole_layer);
 var qInterruptions = new Query();
 qInterruptions.returnGeometry = true;
 qInterruptions.outSpatialReference = {wkid:32719};  // add this line
 qInterruptions.outFields=["*"];
 qInterruptions.where = entregas;‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Re: Add graphics to a map

EvelynHernandez — Tue, 15 Oct 2019 20:24:45 GMT

OK , I did but i still dont see the graphics on the map

Re: Add graphics to a map

BenElan — Tue, 15 Oct 2019 20:42:48 GMT

When you resolve the promise are you adding the graphics to the map somewhere?

Re: Add graphics to a map

EvelynHernandez — Tue, 15 Oct 2019 20:46:30 GMT

Here :

var p = loadPostes(Query,QueryTask, map, resolve[1], ["678742","678743"])

.then(resolve=>{

console.log(resolve,"pipes")

resolve.map(r=>{

console.log(r,"erre")

gLayerMedidor2.add(new Graphic(r.geometry,mySymbol));

});

// map.graphics.add(new Graphic(featureSet.features[0].geometry, mySymbol));

map.addLayer(gLayerMedidor2)

}).catch(error=>{

console.log(error, "error postes")

})

Re: Add graphics to a map

EvelynHernandez — Wed, 16 Oct 2019 12:30:53 GMT

I think that code is ok, right?

So Idk what i am doing wrong...

Re: Add graphics to a map

EvelynHernandez — Sat, 11 Dec 2021 12:32:58 GMT

I changed my code to this one:

<script>
 require([
 "esri/layers/FeatureLayer",
 "esri/geometry/Extent",
 "esri/graphicsUtils",
 "esri/tasks/query",
 "esri/tasks/QueryTask",
 "esri/map",
 "dojo/dom",
 "dojo/parser",
 "dojo/ready",
 "dojo/on",
 "dijit/layout/ContentPane",
 "dijit/layout/BorderContainer",
 "esri/kernel",
 'esri/graphic',
 'esri/layers/GraphicsLayer',
 "esri/symbols/SimpleMarkerSymbol",
 "esri/symbols/SimpleLineSymbol",
 "esri/Color"
 ], function (
 FeatureLayer, Extent, graphicsUtils, Query, QueryTask, Map,
 dom, parser, ready, on, ContentPane, BorderContainer, kernel, Graphic, GraphicsLayer, SimpleMarkerSymbol, SimpleLineSymbol, Color
 ) {


 parser.parse();
 
 ready(function(){
 var map = new Map("map",{
 basemap: "topo", 
 center:[-71.7018, -33.0228], 
 zoom:8,
 spatialReference: 32719


 });


 //Load a FeatureTable to the application once map loads
 map.on("load", loadData);
 var gLayerFind = new GraphicsLayer();
 function loadData(){
 
 var l = login(kernel)
 .then(resolve=>{
 console.log(resolve)
 var gLayerMedidor2 = new GraphicsLayer();
 var r = Math.floor(Math.random() * 255);
 var g = Math.floor(Math.random() * 255);
 var b = Math.floor(Math.random() * 255);


 var mySymbol = new esri.symbol.SimpleMarkerSymbol(
 esri.symbol.SimpleMarkerSymbol.STYLE_CIRCLE, 30,
 new esri.symbol.SimpleLineSymbol(
 esri.symbol.SimpleLineSymbol.STYLE_SOLID,
 new esri.Color([0, 40, 255, 0.9]),
 1
 ),
 new esri.Color([255, 51, 255, 0.7])
 );
 
 


 var p = loadPostes(Query,QueryTask, map, resolve[1], ["678742","678743"])
 .then(resolve=>{
 console.log(resolve,"pipes")
 resolve.map(r=>{
 gLayerFind.add(new Graphic(resolve[0].geometry,mySymbol));
 map.centerAndZoom(resolve[0].geometry,17);
 
 });
 map.addLayer(gLayerFind,1);
 //
 
 // map.graphics.add(new Graphic(featureSet.features[0].geometry, mySymbol));
 
 


 }).catch(error=>{
 console.log(error, "error postes")
 })


 }).catch(reject=>{
 console.log(reject)
 })


 
 }
 });
 });
 </script>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

And the loadPostes fx is:

function loadPostes(Query, QueryTask, map, layers, rotulos){



 var entregas = "";
 for (let index = 0; index < rotulos.length; index++) {
 
 (index == rotulos.length-1) ? entregas = entregas + `rotulo = '${rotulos[index]}'` : entregas = entregas + `rotulo = '${rotulos[index]}' or `;
 
 }


 var promise = new Promise((resolve,reject)=>{
 console.log(entregas)


 var qTaskInterruptions = new QueryTask(layers.pole_layer);
 var qInterruptions = new Query();
 qInterruptions.returnGeometry = true;
 qInterruptions.outFields=["*"];
 qInterruptions.where = entregas;
 qInterruptions.outSpatialReference = {wkid:32719};
 


 qTaskInterruptions.execute(qInterruptions, (featureSet)=>{
 
 if(!featureSet.features.length){
 reject([]);
 }
 
 resolve(featureSet.features)
 
 }, (Errorq)=>{
 console.log(Errorq,"Error doing query for rotulos");
 reject([]);
 });
 
 
 });
 
 return promise;
 
}‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Right now i am having a problem with this

If for example i delete this line

map.centerAndZoom(resolve[0].geometry,17);‍

and i start the app i am not having errors, but i still dont see the graphics on the map.

If i put that line again, i got the error about wkid.

What am i doing wrong?

Thanks in advice!

Re: Add graphics to a map

RobertScheitlin__GISP — Wed, 16 Oct 2019 14:18:51 GMT

Evelyn,

You need to make the queries out spatial reference the same as the map like I said earlier.

qInterruptions.outSpatialReference = map.spatialReference;

Re: Add graphics to a map

EvelynHernandez — Sat, 11 Dec 2021 12:33:01 GMT

Oh yeah, it was that. Thanks Robert!

The final code:

<script>
 require([
 "esri/layers/FeatureLayer",
 "esri/geometry/Extent",
 "esri/graphicsUtils",
 "esri/tasks/query",
 "esri/tasks/QueryTask",
 "esri/map",
 "dojo/dom",
 "dojo/parser",
 "dojo/ready",
 "dojo/on",
 "dijit/layout/ContentPane",
 "dijit/layout/BorderContainer",
 "esri/kernel",
 'esri/graphic',
 'esri/layers/GraphicsLayer',
 "esri/symbols/SimpleMarkerSymbol",
 "esri/symbols/SimpleLineSymbol",
 "esri/Color"
 ], function (
 FeatureLayer, Extent, graphicsUtils, Query, QueryTask, Map,
 dom, parser, ready, on, ContentPane, BorderContainer, kernel, Graphic, GraphicsLayer, SimpleMarkerSymbol, SimpleLineSymbol, Color
 ) {


 parser.parse();
 
 ready(function(){
 var map = new Map("map",{
 basemap: "topo", 
 center:[-71.7018, -33.0228], 
 zoom:8,
 spatialReference: 32719


 });


 //Load a FeatureTable to the application once map loads
 map.on("load", loadData);
 var gLayerFind = new GraphicsLayer();
 function loadData(){
 
 var l = login(kernel)
 .then(resolve=>{
 console.log(resolve)
 var gLayerMedidor2 = new GraphicsLayer();
 var r = Math.floor(Math.random() * 255);
 var g = Math.floor(Math.random() * 255);
 var b = Math.floor(Math.random() * 255);


 var mySymbol = new esri.symbol.SimpleMarkerSymbol(
 esri.symbol.SimpleMarkerSymbol.STYLE_CIRCLE, 30,
 new esri.symbol.SimpleLineSymbol(
 esri.symbol.SimpleLineSymbol.STYLE_SOLID,
 new esri.Color([0, 40, 255, 0.9]),
 1
 ),
 new esri.Color([255, 51, 255, 0.7])
 );
 
 


 var p = loadPostes(Query,QueryTask, map, resolve[1], ["678742","678743"])
 .then(resolve=>{
 console.log(resolve,"pipes")
 resolve.map((r , index ) =>{
 gLayerFind.add(new Graphic(resolve[index].geometry,mySymbol));
 
 
 });
 map.addLayer(gLayerFind,1);
 //
 
 // map.graphics.add(new Graphic(featureSet.features[0].geometry, mySymbol));
 
 


 }).catch(error=>{
 console.log(error, "error postes")
 })


 }).catch(reject=>{
 console.log(reject)
 })


 
 }
 });
 });
 </script>
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

 var qTaskInterruptions = new QueryTask(layers.pole_layer);
 var qInterruptions = new Query();
 qInterruptions.returnGeometry = true;
 qInterruptions.outFields=["*"];
 qInterruptions.where = entregas;
 qInterruptions.outSpatialReference = map.spatialReference;
‍‍‍‍‍‍