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.
This is the error I am getting in the console :
You haven't define features in this line. Should it be burgFeatures?
burgResults.addMany(features);
You've created the GraphicsLayer burgResults, but where have you added it to the map?
Thank you for answering ... that is where I am confused ... I am not sure how to add the results to the map ...
I tried burgResults.addMany(burgFeatures) just now, and still getting the same error
Actually, now I see where you are adding burgResults to the map. It's up where the map is created.
var map = new Map({ //creates new empy map, with streets as basemap
basemap: "streets",
layers: [burgResults]
});
You're trying to use it before you have defined it.
Thank you again ...
Is there a way to add it to the map where it is?
In other instances I used map.add ... is there something similar for graphics layers?
I removed "layers: [burgResults] and included map.add(burgResults) at the bottom ... still the layer does not draw on the map ... no errors, just no display on the map
Thanks!
//
Still no go ...no errors, but still no display
Here is what the code looks like now ...
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",
/*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 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;
featurelayer.queryFeatures(burgQuery)
.then(function(results) {
console.log(results.features);
});
burgQuery.outSpatialReference = sr;
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(burgFeatures);
map.add(burgResults);
}
});
//