Error in Query Task with MapView

520
20
Jump to solution
07-12-2018 08:26 AM
Rocky_
by
Occasional Contributor

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

0 Kudos
1 Solution

Accepted Solutions
RobertScheitlin__GISP
MVP Esteemed Contributor

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_contig...";

        // 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>

View solution in original post

20 Replies
RobertScheitlin__GISP
MVP Esteemed Contributor

Raj,

   Try something simple like this:

markerSymbol = {
  type: "simple-marker", // autocasts as new SimpleMarkerSymbol()
  color: [226, 119, 40],
  outline: { // autocasts as new SimpleLineSymbol()
    color: [255, 255, 255],
    width: 2
  }
};
Rocky_
by
Occasional Contributor

BINGO.....

Thanks for you precious reply Robert. I really appreciate that.. 

But I found one more thing to ask you if its ok..

I can able to get only 1000 records from this query.. I think there is limit for only 1000 records..could you please tell me, how can I get all of records from my service..

Thanks

0 Kudos
MichaelVolz
Esteemed Contributor

How many records do you have in the datasource of your service?

ESRI puts the default value of 1000 records for performance purposes.

Rocky_
by
Occasional Contributor

Hello Michael,

Thanks for joining us..So am having +10,000 records in services.. I don't know is it any possible way to increase this limit.. Please let me know If you know way to do that..

Thanks

0 Kudos
RobertScheitlin__GISP
MVP Esteemed Contributor

Is the service coming from your server or AGOL? As Michael mentioned the default max return value on ArcGIS Server is 1000 but this can be changed at the map service level.

Rocky_
by
Occasional Contributor

@ Robert 

This service am using from server. I know if we increase limit of max return we are compromising performance but its ok..

0 Kudos
RobertScheitlin__GISP
MVP Esteemed Contributor

Then you just need to open Server Manager and change the "Maximum Number of Features Returned by Server"

Rocky_
by
Occasional Contributor

Thank Robert.. I'll try to do this.. lets see how it works..

But thanks for your suggestions..

0 Kudos
MichaelVolz
Esteemed Contributor

Go to the Parameters page of the mapservice in Server Manager and Under Properties change Maximum Number of Records Returned by Server to 10,000 or whatever you need.  I believe the mapservice will need to be restarted with this change.

Not sure if you are an ArcPro shop yet, but you should be able to directly publish services to AGS from Pro in mid 2019.