Help with displaying results of query

JohnRichardson · ‎10-04-2018

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);
      }

      });
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

_____ · ‎10-04-2018

//

View solution in original post

JohnRichardson · ‎10-04-2018

This is the error I am getting in the console :

dojo.js:956 Uncaught TypeError: Cannot read property 'parent' of undefined at Object.<anonymous> (dojo.js:956) at Object.r [as onafter-add] (dojo.js:60) at Function.h.emit (dojo.js:55) at Function.h.emit (dojo.js:56) at Object.b.emit (dojo.js:369) at Object.e._splice (dojo.js:220) at Object.e.addMany (dojo.js:208) at Object.g.referenceSetter (dojo.js:380) at Object.set (dojo.js:957) at c.set (dojo.js:247)

KenBuja · ‎10-04-2018

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?

JohnRichardson · ‎10-04-2018

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

KenBuja · ‎10-04-2018

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.

JohnRichardson · ‎10-04-2018

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?

JohnRichardson · ‎10-04-2018

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!

_____ · ‎10-04-2018

//

JohnRichardson · ‎10-04-2018

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);
      }

      });
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

_____ · ‎10-04-2018

//