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>
