1

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>

enter image description here

0

I fixed this by changing the source url for the layer to http://services.arcgis.com/BG6nSlhZSAWtExvp/ArcGIS/rest/services/Continents_simple/FeatureServer/0

When I posted the link above I went inside it and it was the REST directory (which I was not originally in, I was just in ArcGIS Online 'My Map') and I saw that there was an actual layer inside the service. Once I clicked on that, it was clear that I needed to choose the layer '0' that was inside the FeatureServer.

  • Exactly, the render was right implemented, the problem was that you were not able to get the Feature Layer form the server. – Katah Nov 6 '17 at 9:50

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.