displaying a query on a feature/graphic layer

deleted-user-wcpelUUf_XXx — Wed, 22 May 2019 18:20:56 GMT

Im having a problem displaying a query.

i tried it both on a graphic layer and a feature layer

the code is the same for both except the layer is different type and the apply is accordingly different

feature layer code:

https://codepen.io/segev-salman/pen/MdrBGq?editors=1000

graphic layer code:

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

on change a query happens and displayed with a different renderer.

Re: displaying a query on a feature/graphic layer

RobertScheitlin__GISP — Sat, 11 Dec 2021 18:58:26 GMT

Here is the featurelayer sample fixed:

<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
  <title>query-map</title>
  <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">

  <style>
    #selectPanel {
      padding: 30px;
      background-color: rgba(255, 255, 255, 0.8);
    }

    .esri-button {
      margin: 2px;
    }

    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"> -->
  <link
      rel="stylesheet"
      href="https://js.arcgis.com/4.11/esri/themes/light/main.css"
    />
  <script src="https://js.arcgis.com/4.11/"></script>

  <script>
    require([
      "esri/Map",
      "esri/views/MapView",
      "esri/layers/FeatureLayer",
      "esri/widgets/Expand",
      'dojo/dom',
      'dojo/on',
      "esri/tasks/support/Query",
      "esri/layers/GraphicsLayer",
    ], function (Map, MapView, FeatureLayer,Expand,dom, on,Query,GraphicsLayer) {
      
      var TF = new FeatureLayer({
        url: "https://services3.arcgis.com/1pxU2hJU9ZszJDcX/ArcGIS/rest/services/Young_Adult_Treatment_Facilities/FeatureServer/0",
      });
      
      var newRend, layer;
      var map = new Map({
        basemap: "gray",
        layers: [TF]
      });

      var view = new MapView({
        container: "viewDiv",
        map: map,
        center: [-102.370576, 40.172530],
        zoom: 5
      });
      
///renderers      
    var origRend = {
          type: "simple",
          symbol: {
            type: "simple-marker",
            style: "circle",
            color: [0, 197, 255, 255],
            size: 7,
            outline: {
              color: [255, 255, 255, 255],
              width: 0.75
             }}};
    var maleRend = {
          type: "simple",
          symbol: {
            type: "simple-marker",
            style: "circle",
            color: "#FF0800",
            size: 7,
            outline: {
              color: [255, 255, 255, 255],
              width: 0.75
             }}};
    var childRend = {
          type: "simple",
          symbol: {
            type: "simple-marker",
            style: "circle",
            color: "#ffcd00",
            size: 7,
            outline: {
              color: [255, 255, 255, 255],
              width: 0.75
             }}};
    var femRend = {
          type: "simple",
          symbol: {
            type: "simple-marker",
            style: "circle",
            color: "#AF1668",
            size: 7,
            outline: {
              color: [255, 255, 255, 255],
              width: 0.75
             }}};

      ///get resaults and add them to a G-layer
      function succ(featureSet) {
        if(layer){
          map.remove(layer);
        }
        layer = new FeatureLayer({
          objectIdField: "ObjectId",
          source: featureSet.features
        })
        map.remove(TF);
        layer.renderer = newRend;
        map.add(layer);
      };

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

      on(dom.byId('select'), 'change', function (e) {
        var select = e.target.value;         
        var tableC;                 
        if (select == "male") {
          tableC = "male",
          newRend = maleRend
          }
        else if (select == "fem") {
          tableC = "fem",
          newRend = femRend            
          }     
        else if (select == "chld") {
          tableC = "chld",
          newRend = childRend          
          }          
        else {
        tableC = "1",          
        newRend = origRend          
        }                       
          var query = TF.createQuery();     
          query.returnGeometry = true;
          query.outFields = ["*"];
          query.where = tableC + " =  1"; 
          TF.queryFeatures(query).then(succ, fail);                               
      });
      
      view.ui.add("selectPanel", "top-right");
    });
  </script>
</head>
  
  
  
<body>
  <div id="viewDiv"></div>
  <div id="selectPanel" class="esri-widget">
          <h2>Facilities for:</h2>
    <select id="select" class="esri-select" >
      <option value="All">All</option>      
      <option value="male">Male</option>
      <option value="fem">Female</option>
      <option value="chld">Child</option>      
    </select>
  </div>
</body>

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

Re: displaying a query on a feature/graphic layer

deleted-user-wcpelUUf_XXx — Wed, 22 May 2019 19:03:16 GMT

Robert,

this is great.

is it better to create a new FL than applyedits and change the renderer of an exsisting one?

why do you specify objectIdField: "ObjectId", is it needed when you add a featureSet to a layer like that?

can you show me a correct syntax to applyedits.updateFeatures on this code?

Re: displaying a query on a feature/graphic layer

RobertScheitlin__GISP — Wed, 22 May 2019 19:13:30 GMT

Is it better to create a new FL than applyedits and change the renderer of an exsisting one?

Yes.

Why do you specify objectIdField: "ObjectId", is it needed when you add a featureSet to a layer like that?

Its required.

Can you show me a correct syntax to applyedits.updateFeatures on this code?

That's a bit of work. You have to defines the fields and geometry type when you create a new FeatureLayer and want to add features using applyEdits. To complicated.

Re: displaying a query on a feature/graphic layer

deleted-user-wcpelUUf_XXx — Wed, 22 May 2019 19:15:58 GMT

this is super helpful thank you!

topic Re: displaying a query on a feature/graphic layer in ArcGIS JavaScript Maps SDK Questions

displaying a query on a feature/graphic layer

Re: displaying a query on a feature/graphic layer

Re: displaying a query on a feature/graphic layer

Re: displaying a query on a feature/graphic layer

Re: displaying a query on a feature/graphic layer