adding featureSet into a featureLayer (dynamic renderer)

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

Im trying to use a renderer and a legend on data from a featureSet, it displayes symbols and popups but the renderer failes.

the data comes from a featureLayer but I display it with view.graphics so I think that may be the problem. Still I cant find an add graphic(maybe addAttachment but I could not make it work) .

this is my code:

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

Do I need a new featureLayer or can I use the one with the url to the service to be displayed with the renderer with queryed data and if not do i really have to insert the data manually after the query does it just bring me back graphics or changes the layer?

RobertScheitlin__GISP · ‎05-17-2019

Segev,

Here is what I think you are really after. If you are going to use a FeatureLayer and just want that layer to show features based on a SQL statement, then you set the layers definitionExpression.

<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',
      'esri/layers/FeatureLayer',
      'esri/widgets/Legend',

    ], function (
      dom, on, Map, MapView, Query, GraphicsLayer, Graphic, QueryTask, FeatureLayer, Legend
    ) {

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

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


      var symbol = {
        type: "simple-marker",
        style: "diamond",
        size: 14,
        color: [230, 0, 169, 0.29], // pixels
        outline: { // autocasts as new SimpleLineSymbol()
          color: [255, 255, 255, 0.5],
          width: 1.5 // points
        }
      };

      var popupTemplate = {
        title: "la_county_labor_centrs",
        content: "Out of population of {TOTAL_POP} people, {POP_LABOR} are working." // All of the fields
      };

      ////////////////// renderer options//////////     
      const less35 = {
        type: "simple-marker", // autocasts as new simple-markerSymbol()
        color: "#fffcd4",
        style: "circle",
        size: 8,
        outline: {
          width: 1.5,
          color: [255, 255, 255, 0.5]
        }
      };

      const less50 = {
        type: "simple-marker", // autocasts as new simple-markerSymbol()
        color: "#b1cdc2",
        style: "circle",
        size: 10,
        outline: {
          width: 1.5,
          color: [255, 255, 255, 0.5]
        }
      };

      const more50 = {
        type: "simple-marker", // autocasts as new simple-markerSymbol()
        color: "#38627a",
        style: "circle",
        size: 12,
        outline: {
          width: 1.5,
          color: [255, 255, 255, 0.5]
        }
      };

      const more75 = {
        type: "simple-marker", // autocasts as new simple-markerSymbol()
        color: "#0d2644",
        style: "circle",
        size: 14,
        outline: {
          width: 1.5,
          color: [255, 255, 255, 0.5]
        }
      };
      ///////////////////////////////    
      var renderer = {
        type: "class-breaks", // autocasts as new ClassBreaksRenderer()
        field: "POP_LABOR",
        normalizationField: "TOTAL_POP",
        legendOptions: {
          title: "% of labor workers out of population"
        },
        defaultSymbol: symbol,
        defaultLabel: "no data",
        classBreakInfos: [{
            minValue: 0,
            maxValue: 0.3499,
            symbol: less35,
            label: "< 35%"
          },
          {
            minValue: 0.35,
            maxValue: 0.4999,
            symbol: less50,
            label: "35 - 50%"
          },
          {
            minValue: 0.5,
            maxValue: 0.7499,
            symbol: more50,
            label: "50 - 75%"
          },
          {
            minValue: 0.75,
            maxValue: 1.0,
            symbol: more75,
            label: "> 75%"
          }
        ]
      };

      var layer = new FeatureLayer({
        url: 'https://services.arcgis.com/V6ZHFr6zdgNZuVG0/arcgis/rest/services/la_county_labor_centroid/FeatureServer/0',
        renderer: renderer,
        popupTemplate: popupTemplate,
        title: "LA County Labor Points"
      });
      map.add(layer);

      view.ui.add(dom.byId('population'), "top-right");

      var legend = new Legend({
        view: view
      });
      view.ui.add(legend, "bottom-left");

      on(dom.byId('population'), 'change', function (e) {
        var population = e.target.value;
        if (population.length > 0) {
          layer.definitionExpression = "TOTAL_POP > " + population;
        }
      });

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

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

found applyedits.addFetures and im using the same featureLayer the renderer dosest work yet but this is the new code

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

RobertScheitlin__GISP · ‎05-17-2019

Segev,

Here is what I think you are really after. If you are going to use a FeatureLayer and just want that layer to show features based on a SQL statement, then you set the layers definitionExpression.

<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',
      'esri/layers/FeatureLayer',
      'esri/widgets/Legend',

    ], function (
      dom, on, Map, MapView, Query, GraphicsLayer, Graphic, QueryTask, FeatureLayer, Legend
    ) {

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

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


      var symbol = {
        type: "simple-marker",
        style: "diamond",
        size: 14,
        color: [230, 0, 169, 0.29], // pixels
        outline: { // autocasts as new SimpleLineSymbol()
          color: [255, 255, 255, 0.5],
          width: 1.5 // points
        }
      };

      var popupTemplate = {
        title: "la_county_labor_centrs",
        content: "Out of population of {TOTAL_POP} people, {POP_LABOR} are working." // All of the fields
      };

      ////////////////// renderer options//////////     
      const less35 = {
        type: "simple-marker", // autocasts as new simple-markerSymbol()
        color: "#fffcd4",
        style: "circle",
        size: 8,
        outline: {
          width: 1.5,
          color: [255, 255, 255, 0.5]
        }
      };

      const less50 = {
        type: "simple-marker", // autocasts as new simple-markerSymbol()
        color: "#b1cdc2",
        style: "circle",
        size: 10,
        outline: {
          width: 1.5,
          color: [255, 255, 255, 0.5]
        }
      };

      const more50 = {
        type: "simple-marker", // autocasts as new simple-markerSymbol()
        color: "#38627a",
        style: "circle",
        size: 12,
        outline: {
          width: 1.5,
          color: [255, 255, 255, 0.5]
        }
      };

      const more75 = {
        type: "simple-marker", // autocasts as new simple-markerSymbol()
        color: "#0d2644",
        style: "circle",
        size: 14,
        outline: {
          width: 1.5,
          color: [255, 255, 255, 0.5]
        }
      };
      ///////////////////////////////    
      var renderer = {
        type: "class-breaks", // autocasts as new ClassBreaksRenderer()
        field: "POP_LABOR",
        normalizationField: "TOTAL_POP",
        legendOptions: {
          title: "% of labor workers out of population"
        },
        defaultSymbol: symbol,
        defaultLabel: "no data",
        classBreakInfos: [{
            minValue: 0,
            maxValue: 0.3499,
            symbol: less35,
            label: "< 35%"
          },
          {
            minValue: 0.35,
            maxValue: 0.4999,
            symbol: less50,
            label: "35 - 50%"
          },
          {
            minValue: 0.5,
            maxValue: 0.7499,
            symbol: more50,
            label: "50 - 75%"
          },
          {
            minValue: 0.75,
            maxValue: 1.0,
            symbol: more75,
            label: "> 75%"
          }
        ]
      };

      var layer = new FeatureLayer({
        url: 'https://services.arcgis.com/V6ZHFr6zdgNZuVG0/arcgis/rest/services/la_county_labor_centroid/FeatureServer/0',
        renderer: renderer,
        popupTemplate: popupTemplate,
        title: "LA County Labor Points"
      });
      map.add(layer);

      view.ui.add(dom.byId('population'), "top-right");

      var legend = new Legend({
        view: view
      });
      view.ui.add(legend, "bottom-left");

      on(dom.byId('population'), 'change', function (e) {
        var population = e.target.value;
        if (population.length > 0) {
          layer.definitionExpression = "TOTAL_POP > " + population;
        }
      });

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

RobertScheitlin__GISP · ‎05-19-2019

Don't forget to mark this question as answered by clicking on the "Mark Correct" link on the reply that answered your question.

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

Hey Robert,

This works great!
TBH i wasnt sure what i was really after myself, im trying things to get a hang of it.

but if i can run an sql expression on a featureLayer with definitionExpression what can i do with the output of the queryTask ? I saw it used for displaying results as text, but you can also get geometry so how is it any different from a definition Expression?

RobertScheitlin__GISP · ‎05-20-2019

Segev,

There is many reasons to use a QueryTask. Say you want to apply a different symbol (for example highlight) certain features, or you want to use a features geometry to do another spatial query on a layer, etc, etc.