'Find min and max values of a field (column) in a feature layer on ArcGIS in a Nuxt/Vuejs application

I am using ArcGIS API for Javascript in a Nuxt application and I would like to find the max and min values of a field in a feature layer hosted on ArcGIS. How to do that ?? Here is the code. The values for the stops for the visualVariables are hard coded and I would like them to be dynamic and take the min and max values of the field.

 buildRenderer(fieldName) {
      this.renderer = {
        type: 'simple', // autocasts as new SimpleRenderer()
        symbol: {
          type: 'simple-line', // autocasts as new SimpleFillSymbol()
          width: '1px',
        },
        label: 'GIMM',
        visualVariables: [
          {
            type: 'color',
            valueExpression: `$feature.${fieldName}`,
            legendOptions: {
              title: '% KBA stuff',
            },
            stops: [
              {
                value: 10,
                color: '#bef264',
                label: 'minimum',
              },
              {
                value: 600000,
                color: '#881337',
                label: 'maximum',
              },
            ],
          },
        ],
      }
arcgis-js-api


Solution 1:[1]

You can make an statistic query requesting min and max of the field you need.

Look at this example I put for you,

<html>

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
    <title>
        Intro to FeatureLayer | Sample | ArcGIS API for JavaScript 4.23
    </title>

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

    <style>
        html,
        body,
        #viewDiv {
            padding: 0;
            margin: 0;
            height: 100%;
            width: 100%;
        }
    </style>

    <script>
        require([
            "esri/Map",
            "esri/views/MapView",
            "esri/layers/FeatureLayer",
            "esri/rest/support/Query"
        ], (
            Map,
            MapView,
            FeatureLayer,
            Query
        ) => {
            const featureLayer = new FeatureLayer({
                url: "https://services.arcgis.com/V6ZHFr6zdgNZuVG0/ArcGIS/rest/services/subway_tcl_stations_center_wgs84/FeatureServer/0"
            });

            const minXCoord = {
                onStatisticField: "XCoord",
                outStatisticFieldName: "minXCoord",
                statisticType: "min"
            };
            const maxXCoord = {
                onStatisticField: "XCoord",
                outStatisticFieldName: "maxXCoord",
                statisticType: "max"
            };
            let query = featureLayer.createQuery();
            query.outStatistics = [ minXCoord, maxXCoord ];
            featureLayer.queryFeatures(query)
                .then(function (response) {
                    const stats = response.features[0].attributes;
                    console.log(stats);
                    document.getElementById("response").innerText =
                    `X Coord (min, max): ${stats.minXCoord}, ${stats.maxXCoord}`;
                });
        });
    </script>
</head>

<body>
    <div id="response"></div>
</body>

</html>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 cabesuon

Related Questions