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!
Solved! Go to Solution.
I think that code is ok, right?
So Idk what i am doing wrong...
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!
Evelyn,
You need to make the queries out spatial reference the same as the map like I said earlier.
qInterruptions.outSpatialReference = map.spatialReference;
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;