Building a dynamic querytask 4.11

deleted-user-wcpelUUf_XXx · ‎05-15-2019

.Learning the js api i tried to make a querytask that will query a layer and update graphics on change

.I think the problem is in my success("succ") function

:I made this codepen

https://codepen.io/segev-salman/pen/joBwyW

in the 3.28 version of the api I saw a code example building an array and a for loop inserting features into a graphic from the querytask reault, but the 4.11 doc says that querytask returns a graphic so does that mean i can throw the result straight into a new graphic layers ?

RobertScheitlin__GISP · ‎05-16-2019

Segev,

You had many issues in your code. Mainly you were not referencing the 4.x module names (you were using some old 3.x names). Your Query where clause was incorrect. Your function parameters where out of line with your require array order. Your succ function had issue as you already knew.

<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
  <title>ArcGIS JavaScript Tutorials: Create a Starter App</title>
  <style>
    html,
    body,
    #viewDiv {
      padding: 0;
      margin: 0;
      height: 100%;
      width: 100%;
    }
  </style>

  <link rel="stylesheet" href="https://js.arcgis.com/4.11/esri/css/main.css">
  <script src="https://js.arcgis.com/4.11/"></script>

  <script>
    require([
      'dojo/dom',
      'dojo/on',
      'esri/Map',
      'esri/views/MapView',
      'esri/tasks/support/Query',
      'esri/layers/GraphicsLayer',
      'esri/Graphic',
      'esri/tasks/QueryTask',
    ], function (
      dom, on, Map, MapView, Query, GraphicsLayer, Graphic, QueryTask
    ) {
      var symbol = {
        type: "simple-marker", // autocasts as new SimpleMarkerSymbol()
        style: "cross",
        color: [50, 50, 255],
        size: "10px", // pixels
        outline: { // autocasts as new SimpleLineSymbol()
          color: [255, 255, 0],
          width: 3 // points
        }
      };

      url = 'https://services.arcgis.com/V6ZHFr6zdgNZuVG0/arcgis/rest/services/la_county_labor_centroid/FeatureServer/0';

      var layer = new GraphicsLayer();

      ///get resaults and add them to a G-layer
      function succ(featureSet) {
        layer.removeAll();
        var gras = featureSet.features.map(function(gra){
          gra.symbol = symbol;
          return gra;
        });
        layer.addMany(gras);
        map.add(layer);
      };

      function fail(error) {
        console.error('An error ocurred in the query: ', error);
      };

      on(dom.byId('population'), 'change', function (e) {
        var population = e.target.value;
        if (population.length > 0) {
          var querytask = new QueryTask({
            url: url
          });
          var query = new Query();
          query.returnGeometry = true;
          query.outFields = ["*"];
          query.where = "TOTAL_POP > " + population;
          querytask.execute(query).then(succ, fail);
        }
      });

      var map = new Map({
        basemap: "gray"
      });

      var view = new MapView({
        container: "viewDiv",
        map: map,
        center: [-118.80543, 34.02700],
        zoom: 13
      });

    });
  </script>
</head>

<body>
  <select id="population" name="population">
    <option value="" selected="selected">Select Population</option>
    <option value="2500">2,500</option>
    <option value="5000">5,000</option>
    <option value="7500">7,500</option>
  </select>
  <div id="viewDiv"></div>
</body>

</html>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

View solution in original post

RobertScheitlin__GISP · ‎05-16-2019

Segev,

You had many issues in your code. Mainly you were not referencing the 4.x module names (you were using some old 3.x names). Your Query where clause was incorrect. Your function parameters where out of line with your require array order. Your succ function had issue as you already knew.

<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
  <title>ArcGIS JavaScript Tutorials: Create a Starter App</title>
  <style>
    html,
    body,
    #viewDiv {
      padding: 0;
      margin: 0;
      height: 100%;
      width: 100%;
    }
  </style>

  <link rel="stylesheet" href="https://js.arcgis.com/4.11/esri/css/main.css">
  <script src="https://js.arcgis.com/4.11/"></script>

  <script>
    require([
      'dojo/dom',
      'dojo/on',
      'esri/Map',
      'esri/views/MapView',
      'esri/tasks/support/Query',
      'esri/layers/GraphicsLayer',
      'esri/Graphic',
      'esri/tasks/QueryTask',
    ], function (
      dom, on, Map, MapView, Query, GraphicsLayer, Graphic, QueryTask
    ) {
      var symbol = {
        type: "simple-marker", // autocasts as new SimpleMarkerSymbol()
        style: "cross",
        color: [50, 50, 255],
        size: "10px", // pixels
        outline: { // autocasts as new SimpleLineSymbol()
          color: [255, 255, 0],
          width: 3 // points
        }
      };

      url = 'https://services.arcgis.com/V6ZHFr6zdgNZuVG0/arcgis/rest/services/la_county_labor_centroid/FeatureServer/0';

      var layer = new GraphicsLayer();

      ///get resaults and add them to a G-layer
      function succ(featureSet) {
        layer.removeAll();
        var gras = featureSet.features.map(function(gra){
          gra.symbol = symbol;
          return gra;
        });
        layer.addMany(gras);
        map.add(layer);
      };

      function fail(error) {
        console.error('An error ocurred in the query: ', error);
      };

      on(dom.byId('population'), 'change', function (e) {
        var population = e.target.value;
        if (population.length > 0) {
          var querytask = new QueryTask({
            url: url
          });
          var query = new Query();
          query.returnGeometry = true;
          query.outFields = ["*"];
          query.where = "TOTAL_POP > " + population;
          querytask.execute(query).then(succ, fail);
        }
      });

      var map = new Map({
        basemap: "gray"
      });

      var view = new MapView({
        container: "viewDiv",
        map: map,
        center: [-118.80543, 34.02700],
        zoom: 13
      });

    });
  </script>
</head>

<body>
  <select id="population" name="population">
    <option value="" selected="selected">Select Population</option>
    <option value="2500">2,500</option>
    <option value="5000">5,000</option>
    <option value="7500">7,500</option>
  </select>
  <div id="viewDiv"></div>
</body>

</html>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

deleted-user-wcpelUUf_XXx · ‎05-16-2019

.thank you! ill use this code and go through my mistakes

deleted-user-wcpelUUf_XXx · ‎05-16-2019

hey Robert,

I was going through my code and it was a real mess and very lacking so thank you again that was really helpful and clear.

But there are a couple of things im missing about the graphic.

The docs says "featureSet.features" returns an array of graphics but what does the .map do?

the Graphic syntax to add a symbol in the samples looked like this "symbol:polylineSymbol", but the code dosent work when I try it, you changed it to gra.symbol = symbol, can you explain why did you do it like that and do you have any idea why i'ts failling?

RobertScheitlin__GISP · ‎05-17-2019

Segev,

but what does the .map do

Dot map on an array is a way to iterate over an array and perform some function on each object in the array and then return the modified array. I use this to set the symbol for each graphic that is returned from the query. You are querying a Point feature layer so a polylineSymbol would not be appropriate for that geometry type.

deleted-user-wcpelUUf_XXx · ‎05-17-2019

Robert,

Thank you for clarifying I was under the impression that the map was part of the api.

About the graphic, I gave an example Im just trying to get why the dot works but not the colon.

RobertScheitlin__GISP · ‎05-19-2019

Segev,

You did symbol:polylineSymbol when you were creating a New graphic. Since the featureSet.features is already an array of graphics there is no need to create a new Graphic and you only need to set that graphics symbol.