Add graphics to a map

993
13
Jump to solution
10-15-2019 11:35 AM
EvelynHernandez
Regular Contributor

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!

0 Kudos
1 Solution

Accepted Solutions
RobertScheitlin__GISP
MVP Esteemed Contributor

Evelyn,

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

qInterruptions.outSpatialReference = map.spatialReference;

View solution in original post

13 Replies
RobertScheitlin__GISP
MVP Esteemed Contributor

Evelyn,

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

EvelynHernandez
Regular Contributor

OK i fixed it but i still dont see the graphics

0 Kudos
EvelynHernandez
Regular Contributor

This is my new 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
});

//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")
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>
0 Kudos
RobertScheitlin__GISP
MVP Esteemed Contributor

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?

EvelynHernandez
Regular Contributor

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?

0 Kudos
BenElan
Esri Contributor

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;‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍
EvelynHernandez
Regular Contributor

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

0 Kudos
BenElan
Esri Contributor

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

0 Kudos
EvelynHernandez
Regular Contributor

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")
})
0 Kudos