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

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

JohnRichardson · ‎10-04-2018

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

Thanks again for the help from everybody!

_____ · ‎10-04-2018

//

JohnRichardson · ‎10-04-2018

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)

KenBuja · ‎10-04-2018

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

JohnRichardson · ‎10-04-2018

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

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

JohnRichardson · ‎10-04-2018

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?

KenBuja · ‎10-04-2018

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

JohnRichardson · ‎10-04-2018

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