Changing feature styling based on outfields

745

04-17-2021 02:25 PM

I'm currently trying to use the ArcGIS JS API to display a simple web map of land-use over time. The aim is to colour orange any polygons where their land-use has changed from 1996 to 2018 (ie: if (NAME_1996 != NAME_2018) then...). If the name has stayed the same then the polygons will be coloured blue.

The data is a queried geoJSON file from the Esri hosted content service.

I know that in Leaflet geoJSON data can be processed and styled on each feature before rendering. However, all I can find that is similar with ArcGIS JS is the UniqueValueRenderer, which only allows the testing of one field. I realise that this problem could be solved by pre-processing the data to add a HAS_CHANGED (true/false) column to the dataset, but this seems so simple that is should be able to be achieved on-the-fly.

This page in the documentation explains the UnqiueValueRenderer.

Example code:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="initial-scale=1,maximum-scale=1,user-scalable=no"
    />
    <title>Load a basic WebMap - 4.12</title>

    <!-- jquery -->
    <script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>

    <style>      html,
      body,
      #viewDiv {
        padding: 0;
        margin: 0;
        height: 100%;
        width: 100%;
      }
    </style>
    <link
      rel="stylesheet"
      href="https://js.arcgis.com/4.12/esri/themes/light/main.css"
    />
    <script src="https://js.arcgis.com/4.12/"></script>
    <script>        require([
        "esri/Map",
        "esri/views/MapView",
        "esri/layers/TileLayer",
        "esri/layers/FeatureLayer",
        "esri/renderers/SimpleRenderer",
        "esri/symbols/SimpleFillSymbol",
        "esri/symbols/SimpleLineSymbol",
        "esri/config"
        ], function(Map, MapView, TileLayer, FeatureLayer, SimpleRenderer, SimpleFillSymbol, SimpleLineSymbol, Query, esriConfig) {

        esriConfig.apiKey = KEY_GOES_HERE

        const map = new Map({
            basemap: "satellite" // Basemap layer service
        });

        function returnRenderer(name_1996, name_2018) {
            if (name_1996 != name_2018) {
                renderer = {
                    type: "simple",
                    symbol: {
                        type: "simple-fill",
                        size: 6,
                        color: "orange",
                        outline: {
                        width: 0.5,
                        color: "white"
                        }
                    }
                };
            } else {
                renderer = {
                    type: "simple",
                    symbol: {
                        type: "simple-fill",
                        size: 6,
                        color: "blue",
                        outline: {
                        width: 0.5,
                        color: "white"
                        }
                    }
                };
            }
            return renderer
        }

        var view = new MapView({
            container: "viewDiv",
            map: map,
            center: [176.13567895574866, -37.71157953908512],
            zoom: 15
        });

        
        popup_landcover = {
            "title":"{NAME_2018} (2018)",
            "content":"Landcover type in 1996: {NAME_1996}<br>Landcover type in 2018: {NAME_2018}"
        }
        
        var layer_landcover = new FeatureLayer({
            url: "https://services.arcgis.com/PyaTLAnbSEVNXOpB/arcgis/rest/services/iris_Landcover_NZ_v5/FeatureServer",
            outFields: ["NAME_2018", "NAME_1996"],
            popupTemplate: popup_landcover,
            renderer: returnRenderer( ???? )
        })
        
        map.add(layer_landcover);
    </script>
  </head>
  <body>
    <div id="viewDiv"></div>
  </body>
</html>