I am trying to make a unique value renderer on a map using the JavaScript API. I am using a layer that represents continents. I have used the samples and modified the code for my own layer, but I can not get the feature layer to populate or the renderer to work. I have changed 'Continent' to 'CONTINENT' and 'continent' in the script but it does not matter. The layer does not populate and therefor it does not generate the unique value renderer. The developer tools and inspect tool in Chrome does not throw me any errors. I am using these resources:
http://services.arcgis.com/BG6nSlhZSAWtExvp/arcgis/rest/services/Continents_simple/FeatureServer https://developers.arcgis.com/javascript/3/jssamples/renderer_unique_value.html
Here is my code:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-
scalable=no">
<title>Unique Value Renderer</title>
<link rel="stylesheet" href="https://js.arcgis.com/3.22/esri/css/esri.css">
<style>
html, body, #map{
height: 100%;
margin: 0;
padding: 0;
}
</style>
<script src="https://js.arcgis.com/3.22/"></script>
<script>
var map;
require([
"esri/map", "esri/layers/FeatureLayer", "esri/InfoTemplate",
"esri/symbols/SimpleLineSymbol", "esri/symbols/SimpleFillSymbol",
"esri/renderers/UniqueValueRenderer", "esri/Color",
"dojo/domReady!"
], function(
Map, FeatureLayer, InfoTemplate,
SimpleLineSymbol, SimpleFillSymbol,
UniqueValueRenderer, Color
) {
map = new Map("map", {
basemap: "streets",
center: [-95.625, 39.243],
zoom: 1,
slider: false
});
map.on("load", addFeatureLayer);
function addFeatureLayer() {
var defaultSymbol = new
SimpleFillSymbol().setStyle(SimpleFillSymbol.STYLE_NULL);
defaultSymbol.outline.setStyle(SimpleLineSymbol.STYLE_NULL);
//create renderer
var renderer = new UniqueValueRenderer(defaultSymbol, "Continent");
//add symbol for each possible value
renderer.addValue("North America", new SimpleFillSymbol().setColor(new Color([255, 0, 0, 0.5])));
renderer.addValue("Africa", new SimpleFillSymbol().setColor(new Color([0, 255, 0, 0.5])));
renderer.addValue("Asia", new SimpleFillSymbol().setColor(new Color([0, 0, 255, 0.5])));
renderer.addValue("Europe", new SimpleFillSymbol().setColor(new Color([255, 0, 255, 0.5])));
renderer.addValue("Oceania", new SimpleFillSymbol().setColor(new Color([255, 255, 255, 0.75])));
renderer.addValue("South America", new SimpleFillSymbol().setColor(new Color([0, 255, 255, 0.5])));
renderer.addValue("Antarctica", new SimpleFillSymbol().setColor(new Color([255, 255, 0, 0.5])));
renderer.addValue("Australia", new SimpleFillSymbol().setColor(new Color([127, 127, 127, 0.5])));
var featureLayer = new FeatureLayer("http://services.arcgis.com/BG6nSlhZSAWtExvp/arcgis/rest/services/Continents_simple/FeatureServer", {
infoTemplate: new InfoTemplate(" ", "${Continent}"),
mode: FeatureLayer.MODE_ONDEMAND,
outFields: ["Continent"]
});
featureLayer.setRenderer(renderer);
map.addLayer(featureLayer);
}
});
</script>
</head>
<body>
<div id="map"></div>
</body>
</html>
