topic Re: Help with displaying results of query in ArcGIS JavaScript Maps SDK Questions

Help with displaying results of query

JohnRichardson — Sat, 11 Dec 2021 12:00:14 GMT

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

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

Re: Help with displaying results of query

JohnRichardson — Thu, 04 Oct 2018 13:34:26 GMT

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)

Re: Help with displaying results of query

KenBuja — Thu, 04 Oct 2018 13:45:29 GMT

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?

Re: Help with displaying results of query

JohnRichardson — Thu, 04 Oct 2018 13:49:35 GMT

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

Re: Help with displaying results of query

KenBuja — Sat, 11 Dec 2021 12:00:17 GMT

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.

Re: Help with displaying results of query

JohnRichardson — Thu, 04 Oct 2018 14:02:31 GMT

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?

Re: Help with displaying results of query

JohnRichardson — Thu, 04 Oct 2018 14:12:56 GMT

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!

Re: Help with displaying results of query

_____ — Wed, 26 May 2021 01:06:50 GMT

Re: Help with displaying results of query

JohnRichardson — Sat, 11 Dec 2021 12:00:20 GMT

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

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

Re: Help with displaying results of query

_____ — Wed, 26 May 2021 01:04:56 GMT

Re: Help with displaying results of query

KenBuja — Thu, 04 Oct 2018 14:39:29 GMT

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

Re: Help with displaying results of query

JohnRichardson — Thu, 04 Oct 2018 14:47:49 GMT

Replaced line 129 down with your code ... still no display ...no errors either however.

Thanks again for the help from everybody!

Re: Help with displaying results of query

_____ — Wed, 26 May 2021 01:03:58 GMT

Re: Help with displaying results of query

JohnRichardson — Thu, 04 Oct 2018 14:59:36 GMT

Got this error ...

dojo.js:19 Uncaught TypeError: Cannot read property 'wkid' of undefined at Map.js:130 at K (dojo.js:18) at dojo.js:19 at E (dojo.js:19) at da (dojo.js:19) at e (dojo.js:21) at HTMLScriptElement.<anonymous> (dojo.js:23)

Re: Help with displaying results of query

JohnRichardson — Sat, 11 Dec 2021 12:00:24 GMT

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

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

Re: Help with displaying results of query

JohnRichardson — Thu, 04 Oct 2018 15:18:02 GMT

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?

Re: Help with displaying results of query

KenBuja — Thu, 04 Oct 2018 16:15:02 GMT

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

Re: Help with displaying results of query

JohnRichardson — Thu, 04 Oct 2018 16:18:13 GMT

I just did and it still works fine ... thank you!