The query runs successfully, but I need help showing it on my map ... I want the user to select a menu option which runs the query and then displays the results on the map .... ideally adding the results to a layer list to be turned on and off if the user desires. Help?
require([
"esri/Map",
"esri/views/MapView",
//"esri/views/SceneView",
"esri/widgets/Home",
"esri/widgets/Search",
"esri/widgets/BasemapGallery", //loading the necessary libraries and classes and objects from the ESRI API
"esri/widgets/Expand",
"esri/layers/FeatureLayer",
"esri/layers/ImageryLayer",
"esri/widgets/LayerList",
"esri/tasks/QueryTask",
"esri/tasks/support/Query",
"esri/layers/GraphicsLayer",
"esri/Graphic",
"dojo/dom",
"dojo/on",
"dojo/domReady!"
],function(Map, MapView, Home, Search, BasemapGallery, Expand, FeatureLayer, ImageryLayer, LayerList, QueryTask, Query, GraphicsLayer, Graphic, dom, on) {
var map = new Map({ //creates new empy map, with streets as basemap
basemap: "streets",
layers: [burgResults]
});
var view = new MapView({ //creates the map view and shows the map in the mapBox container
container: "mapBox",
map: map,
zoom: 13,
center: [-85.675, 40.09], //centers map on Anderson, Indiana
});
var homewidget = new Home({ //adds the home widget to the map view
view: view
});
view.ui.add(homewidget, "top-left");
searchWidget = new Search({ //add the search widget to the map view
view:view,
showInfoWindowOnSelect: false,
popupEnabled: false,
popupOpenOnSelect: false
});
view.ui.add(searchWidget, "bottom-right");
var basemapGallery = new BasemapGallery({ //add the basemap gallery widget to map view
view: view
});
var bgExpand = new Expand({ //puts the basemap gallery widget into an expand widget
view: view,
content: basemapGallery,
collapseTooltip: "Close Basemap Gallery",
expandTooltip: "Open Basemap Gallery"
});
view.ui.add(bgExpand, "bottom-left");
var burgSym = { //creates the symbol for burglaries
type: "simple-marker",
color: "blue",
style: "diamond",
size: 7
};
var theftSym = { //creates the symbol for thefts
type: "simple-marker",
color: "red",
style: "square",
size: 7
};
var otherSym = { //creates a default symbol
type: "simple-marker",
color: "black",
size: 5,
style: "circle"
};
var crimeRenderer = { //creates the renderer for the crimes layer
type: "unique-value",
defaultSymbol : otherSym,
field: "Offense",
uniqueValueInfos: [{
value: "Burglary",
symbol: burgSym
}, {
value: "Theft",
symbol: theftSym
}]
};
var featurelayer = new FeatureLayer({ //adds a feature layer of 2018 Crime
url: "http://172.20.25.165:6080/arcgis/rest/services/Crime2018/FeatureServer",
title: "2018 Crime",
renderer: crimeRenderer,
visible: false
});
map.add(featurelayer, 2);
var orthLayer = new ImageryLayer({ //adds an image layer of Orthos SCE
url: "http://172.20.25.165:6080/arcgis/rest/services/Ortho_SCE/ImageServer",
title: "Ortho - East",
visible: false
});
map.add(orthLayer, 0);
var orthLayer2 = new ImageryLayer({ //adds an image layer of Orthos SCW
url: "http://172.20.25.165:6080/arcgis/rest/services/Ortho_SCW/ImageServer",
title: "Ortho - West",
visible: false
});
map.add(orthLayer2, 1);
var layerList = new LayerList({ // add a layer list to the map view
view: view
});
var llExpand = new Expand({ //puts the layer list widget into an expand widget
view: view,
content: layerList,
collapseTooltip: "Close Layer List",
expandTooltip: "Open Layer List"
});
view.ui.add(llExpand, "top-right");
var burgResults = new GraphicsLayer();
var burgQuery = featurelayer.createQuery(); //this section runs a query on the crimes layer, selecting burglaries
burgQuery.where = "Offense = 'Burglary' OR Offense = 'Burg'";
burgQuery.outFields = ["Offense" , "Location"];
burgQuery.returnGeometry = true;
featurelayer.queryFeatures(burgQuery)
.then(function(results) {
console.log(results.features);
});
function displayResults(results) {
burgResults.removeAll();
var burgFeatures = results.features.map(function(graphic) {
graphic.symbol = {
type: "simple-marker",
style: "triangle",
size: 8,
color: "purple"
};
return graphic;
});
burgResults.addMany(features);
}
});
Solved! Go to Solution.
Replaced line 129 down with your code ... still no display ...no errors either however.
Thanks again for the help from everybody!
//
Got this error ...
You don't want to add burgResults to the map where you have it now. What will happen is that each time you run a query, you're adding the layer again to the map. Instead, add it after you define it on line 130
GOT IT!
Sucess!!
The working code is :
require([
"esri/Map",
"esri/views/MapView",
//"esri/views/SceneView",
"esri/widgets/Home",
"esri/widgets/Search",
"esri/widgets/BasemapGallery", //loading the necessary libraries and classes and objects from the ESRI API
"esri/widgets/Expand",
"esri/layers/FeatureLayer",
"esri/layers/ImageryLayer",
"esri/widgets/LayerList",
"esri/tasks/QueryTask",
"esri/tasks/support/Query",
"esri/layers/GraphicsLayer",
"esri/Graphic",
"esri/geometry/SpatialReference",
"dojo/dom",
"dojo/on",
"dojo/domReady!"
],function(Map, MapView, Home, Search, BasemapGallery, Expand, FeatureLayer, ImageryLayer, LayerList, QueryTask, Query, GraphicsLayer, Graphic, SpatialReference, dom, on) {
var map = new Map({ //creates new empy map, with streets as basemap
basemap: "streets",
});
var view = new MapView({ //creates the map view and shows the map in the mapBox container
container: "mapBox",
map: map,
zoom: 13,
center: [-85.675, 40.09], //centers map on Anderson, Indiana
});
var homewidget = new Home({ //adds the home widget to the map view
view: view
});
view.ui.add(homewidget, "top-left");
searchWidget = new Search({ //add the search widget to the map view
view:view,
showInfoWindowOnSelect: false,
popupEnabled: false,
popupOpenOnSelect: false
});
view.ui.add(searchWidget, "bottom-right");
var basemapGallery = new BasemapGallery({ //add the basemap gallery widget to map view
view: view
});
var bgExpand = new Expand({ //puts the basemap gallery widget into an expand widget
view: view,
content: basemapGallery,
collapseTooltip: "Close Basemap Gallery",
expandTooltip: "Open Basemap Gallery"
});
view.ui.add(bgExpand, "bottom-left");
var burgSym = { //creates the symbol for burglaries
type: "simple-marker",
color: "blue",
style: "diamond",
size: 7
};
var theftSym = { //creates the symbol for thefts
type: "simple-marker",
color: "red",
style: "square",
size: 7
};
var otherSym = { //creates a default symbol
type: "simple-marker",
color: "black",
size: 5,
style: "circle"
};
var crimeRenderer = { //creates the renderer for the crimes layer
type: "unique-value",
defaultSymbol : otherSym,
field: "Offense",
uniqueValueInfos: [{
value: "Burglary",
symbol: burgSym
}, {
value: "Theft",
symbol: theftSym
}]
};
var featurelayer = new FeatureLayer({ //adds a feature layer of 2018 Crime
url: "http://172.20.25.165:6080/arcgis/rest/services/Crime2018/FeatureServer",
title: "2018 Crime",
renderer: crimeRenderer,
visible: false
});
map.add(featurelayer, 2);
var orthLayer = new ImageryLayer({ //adds an image layer of Orthos SCE
url: "http://172.20.25.165:6080/arcgis/rest/services/Ortho_SCE/ImageServer",
title: "Ortho - East",
visible: false
});
map.add(orthLayer, 0);
var orthLayer2 = new ImageryLayer({ //adds an image layer of Orthos SCW
url: "http://172.20.25.165:6080/arcgis/rest/services/Ortho_SCW/ImageServer",
title: "Ortho - West",
visible: false
});
map.add(orthLayer2, 1);
var layerList = new LayerList({ // add a layer list to the map view
view: view
});
var llExpand = new Expand({ //puts the layer list widget into an expand widget
view: view,
content: layerList,
collapseTooltip: "Close Layer List",
expandTooltip: "Open Layer List"
});
view.ui.add(llExpand, "top-right");
var sr = new SpatialReference(102100);
var burgResults = new GraphicsLayer();
var burgQuery = featurelayer.createQuery();
//this section runs a query on the crimes layer, selecting burglaries
burgQuery.where = "Offense = 'Burglary' OR Offense = 'Burg'";
burgQuery.outFields = ["Offense" , "Location"];
burgQuery.returnGeometry = true;
burgQuery.outSpatialReference = sr;
featurelayer.queryFeatures(burgQuery).then(displayGraphics);
function displayGraphics(results) {
burgResults.removeAll();
for (feature of results.features) {
var graphic = new Graphic ({
geometry: feature.geometry,
symbol: {
type: "simple-marker",
color: [255,255,255,0.9],
size: "20px",
outline: {
color:[0,0,0],
width: 2,
},
},
});
burgResults.add(graphic);
}
}
map.add(burgResults);
});
Guys ... I am not sure what the protocol is for marking correct answer ... all of you helped me out, and you all deserve credit.
What do i do?
That's the bad thing about only marking one answer as the correct one...there could be several responses leading to the final answer. Just mark the one that helped the most.
You still should to move
map.add(burgResults);
to line 131
I just did and it still works fine ... thank you!