Add graphics to a map

1962
13
Jump to solution
10-15-2019 11:35 AM
EvelynHernandez
Occasional Contributor III

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
13 Replies
EvelynHernandez
Occasional Contributor III

I think that code is ok, right? 

So Idk what i am doing wrong...

0 Kudos
EvelynHernandez
Occasional Contributor III

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!

0 Kudos
RobertScheitlin__GISP
MVP Emeritus

Evelyn,

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

qInterruptions.outSpatialReference = map.spatialReference;
EvelynHernandez
Occasional Contributor III

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;
0 Kudos