AnsweredAssumed Answered

Error in Query Task with MapView

Question asked by namoraj96 on Jul 12, 2018
Latest reply on Jul 12, 2018 by namoraj96
  • Comment • 20

Hello,

I am trying to use query task with MapView.. able to run query and get results but cant get visual markers on map..

Am using Simple marker symbol for that markers.. Can anyone help me to get this markers after query task.. 

Thank you in advance.

 

Error:

Accessor#set Invalid property value, value needs to be one of 'esri.symbols.SimpleFillSymbol', 'esri.symbols.PictureFillSymbol', 'esri.symbols.PictureMarkerSymbol', 'esri.symbols.SimpleLineSymbol', 'esri.symbols.SimpleMarkerSymbol', 'esri.symbols.TextSymbol', 'esri.symbols.LabelSymbol3D', 'esri.symbols.LineSymbol3D', 'esri.symbols.MeshSymbol3D', 'esri.symbols.PointSymbol3D', 'esri.symbols.PolygonSymbol3D', 'esri.symbols.WebStyleSymbol', or a plain object that can autocast (having .type = 'simple-fill', 'picture-fill', 'picture-marker', 'simple-line', 'simple-marker', 'text', 'label-3d', 'line-3d', 'mesh-3d', 'point-3d', 'polygon-3d', 'web-style')

rscheitlin
rscheitlin Champion Jul 12, 2018 1:45 PM
Correct Answer

Raj,

 

  Then something like this.

 

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

<!DOCTYPE html>
<html>

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

    #paneDiv {
      position: absolute;
      top: 10px;
      left: 62px;
      padding: 0 12px 0 12px;
      background-color: rgba(0, 0, 0, 0.5);
      color: white;
    }
  </style>

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

  <script>
    require([
        "esri/Map",
        "esri/views/MapView",
        "esri/widgets/Home",
        "esri/widgets/Legend",
        "esri/widgets/Search",
        "esri/layers/GraphicsLayer",
        "esri/tasks/QueryTask",
        "esri/tasks/support/Query",
        "dojo/_base/array",
        "dojo/dom",
        "dojo/on",
        "dojo/domReady!"
      ],

      function(
        Map, MapView, Home, Legend, Search, GraphicsLayer, QueryTask, Query, arrayUtils, dom, on
      ) {

        var RUrl = "https://services.arcgis.com/V6ZHFr6zdgNZuVG0/arcgis/rest/services/Prominent_Peaks_US/FeatureServer/0";
        var FUrl = "https://services.arcgis.com/V6ZHFr6zdgNZuVG0/ArcGIS/rest/services/2015_06_26_active_fires_USA_contiguous_and_Hawaii_24h/FeatureServer/0";

        // Define the popup content for each result
        var popupTemplate = { // autocasts as new PopupTemplate()
          title: "{MTN_PEAK}, {STATE}",
          fieldInfos: [{
            fieldName: "ELEV_ft",
            label: "Elevation (feet)",
            format: {
              places: 0,
              digitSeperator: true
            }
          }, {
            fieldName: "ELEV_m",
            label: "Elevation (meters)",
            format: {
              places: 0,
              digitSeperator: true
            }
          }, {
            fieldName: "PROMINENCE_ft",
            label: "Prominence (feet)",
            format: {
              places: 0,
              digitSeperator: true
            }
          }, {
            fieldName: "PROMINENCE_m",
            label: "Prominence (meters)",
            format: {
              places: 0,
              digitSeperator: true
            }
          }, {
            fieldName: "ISOLATION_mi",
            label: "Isolation (miles)",
            format: {
              places: 0,
              digitSeperator: true
            }
          }, {
            fieldName: "ISOLATION_km",
            label: "Isolation (km)",
            format: {
              places: 0,
              digitSeperator: true
            }
          }],
          content: "<b><a href='https://en.wikipedia.org/wiki/Topographic_prominence'>Prominence:</a>" +
            "</b> {PROMINENCE_ft} ft ({PROMINENCE_m} m)" +
            "<br><b>Prominence Rank:</b> {RANK}" +
            "<br><b>Elevation:</b> {ELEV_ft} ft ({ELEV_m} m)" +
            "<br><b><a href='https://en.wikipedia.org/wiki/Topographic_isolation'>Isolation:</a>" +
            "</b> {ISOLATION_mi} mi ({ISOLATION_km} km)"
        };

        // Define the popup content for each result
        var popupTemplate2 = { // autocasts as new PopupTemplate()
          title: "{TRACK}",
          fieldInfos: [{
            fieldName: "TRACK",
            label: "Track"
          }, {
            fieldName: "BRIGHT_T31",
            label: "Brightness",
            format: {
              places: 0,
              digitSeperator: true
            }
          }, {
            fieldName: "CONFIDENCE",
            label: "Confidence"
          }, {
            fieldName: "SCAN",
            label: "Scan",
            format: {
              places: 0,
              digitSeperator: true
            }
          }],
          content: "Brightness: {BRIGHT_T31}" +
            "<br><b>Prominence Rank:</b> {RANK}" +
            "<br><b>Confidence:</b> {CONFIDENCE}" +
            "<br><b>Scan: {SCAN}"
        };

        var resultsLayer = new GraphicsLayer();
        var resultsLayer2 = new GraphicsLayer();

        var qTask = new QueryTask({
          url: RUrl
        });
        var qTask2 = new QueryTask({
          url: FUrl
        });

        var params = new Query({
          returnGeometry: true,
          outFields: ["*"]
        });

        var map = new Map({
          basemap: "streets",
          layers: [resultsLayer, resultsLayer2]
        });

        var view = new MapView({
          map: map,
          container: "viewDiv",
          zoom: 11,
          popup: {
            dockEnabled: true,
            dockOptions: {
              position: "top-right",
              breakpoint: false
            }
          }
        });

        view.when(function() {
          view.ui.add("optionsDiv", "bottom-right");
          on(dom.byId("doBtn"), "click", doQuery);
        });

        var attributeName = dom.byId("attSelect");
        var expressionSign = dom.byId("signSelect");
        var value = dom.byId("valSelect");
        var wlayer = dom.byId("lyrSelect");

        function doQuery() {
          // Clear the results from a previous query
          resultsLayer.removeAll();
          params.where = attributeName.value + expressionSign.value + value.value;
          if(wlayer.value === 'peaks'){
            qTask.execute(params)
              .then(getResults)
              .catch(promiseRejected);
          }else if(wlayer.value === 'fires'){
            params.where = 'BRIGHTNESS > 320';
            qTask2.execute(params)
              .then(getResults)
              .catch(promiseRejected);
          }

        }

        function getResults(response) {
          var RResults = arrayUtils.map(response.features, function(
            feature) {
            feature.symbol = {
              type: "simple-marker",
              color: "red",
              size: 5,
              outline: {
                color: "black"
              }
            };
            if(wlayer.value === 'peaks'){
              feature.popupTemplate = popupTemplate;
            }else if(wlayer.value === 'fires'){
              feature.popupTemplate = popupTemplate2;
            }
            return feature;
          });
          if(wlayer.value === 'peaks'){
            resultsLayer.addMany(RResults);
          }else if(wlayer.value === 'fires'){
            resultsLayer2.addMany(RResults);
          }

          view.goTo(RResults).then(function() {
            view.popup.open({
              features: RResults,
              featureMenuOpen: true,
              updateLocationEnabled: true
            });
          });
          dom.byId("printResults").innerHTML = RResults.length +
            " results found!";
        }

        function promiseRejected(error) {
          console.error("Promise rejected: ", error.message);
        }

        var homeBtn = new Home({
          view: view
        }, "homeDiv");

        var legend = new Legend({
          view: view,
          layerInfos: [{
            url: RUrl
          }]
        });
        legend.startup();
        view.ui.add(legend, "bottom-left");

        var searchWidget = new Search({
          view: view
        });
        view.ui.add(searchWidget, {
          position: "top-right"
        });

      });
  </script>
</head>

<body>
  <div id="viewDiv"></div>
  <div class="esri-widget" id="optionsDiv">
    <h2>Prominent Peaks in the U.S.</h2>
    <select class="esri-widget" id="lyrSelect">
      <option value="fires">US Fires</option>
      <option value="peaks" selected>US Peaks</option>
    </select>
    <select class="esri-widget" id="attSelect">
      <option value="ELEV_ft">Elevation</option>
      <option value="PROMINENCE_ft" selected>Prominence</option>
    </select>
    <select class="esri-widget" id="signSelect">
      <option value=">">is greater than</option>
      <option value="<">is less than</option>
      <option value="=">is equal to</option>
    </select>
    <select class="esri-widget" id="valSelect">
      <option value="1000">1,000 ft</option>
      <option value="5000">5,000 ft</option>
      <option value="10000">10,000 ft</option>
      <option value="15000">15,000 ft</option>
      <option value="20000">20,000 ft</option>
    </select>
    <br>
    <br>
    <button class="esri-widget" id="doBtn">Do Query</button>
    <br>
    <p><span id="printResults"></span></p>
  </div>
</body>

</html>
See the reply in context
No one else had this question

Outcomes