AnsweredAssumed Answered

Blank legend content

Question asked by gueniot on Jul 5, 2017
Latest reply on Jul 7, 2017 by gueniot

Hi,

I would like to show a legend on my map with the value of each point, but my legend show only the title.

Anything is missing somewhere ?

Here is my code :

 

 

<!DOCTYPE html>

<html>

 

<head>

<meta charset="utf-8">

<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">

 

<style>

  html, body, #viewDiv {

    padding: 0;

    margin: 0;

    height: 100%;

    width: 100%;

  }

 

</style>

<title>Carte de lemmes</title>

 

<link rel="stylesheet" href="https://js.arcgis.com/4.3/esri/css/main.css">

<script src="https://js.arcgis.com/4.3/"></script>

<script>

function getRandomColor() {

  var letters = '0123456789ABCDEF';

  var color = '#';

  for (var i = 0; i < 6; i++) {

    color += letters[Math.floor(Math.random() * 16)];

  }

  return color;

}

 

require([

    "esri/views/MapView",

    "esri/Map",

    "esri/layers/FeatureLayer",

    "esri/layers/support/Field",

    "esri/geometry/Point",

    "esri/renderers/UniqueValueRenderer",

    "esri/symbols/SimpleMarkerSymbol",

    "esri/widgets/Legend",

    "esri/request",

    "dojo/_base/array",

    "dojo/dom",

    "dojo/on",

    "dojo/domReady!"

  ], function(MapView, Map, FeatureLayer, Field, Point,

UniqueValueRenderer, SimpleMarkerSymbol, Legend, esriRequest,

    arrayUtils, dom, on

  ){

 

 

// Création de la couche de points

var fields = [

{

name: "ObjectID",

alias: "ObjectID",

type: "oid"

},{

name: "lemme",

alias: "lemme",

type: "string"

},{

name: "formePhonique",

alias: "formePhonique",

type: "string"

},{

name: "commune",

alias: "commune",

type: "string"

}, ,{

name: "question",

alias: "question",

type: "string"

}

];

 

var pTemplate = {

        title: "{question}",

        content: [{

          type: "fields",

          fieldInfos: [{

            fieldName: "lemme",

            label: "Lemme",

            visible: true

          }, {

            fieldName: "formePhonique",

            label: "Forme phonique",

            visible: true

          }, {

            fieldName: "commune",

            label: "Commune",

            visible: true

      }]

        }]

      };

 

var features = [{geometry: new Point({

    x: 9.123337,

y: 42.474312,

  }),

  attributes: {

    ObjectID: 7885,

lemme: "tumbà",

formePhonique: "tumb'a",

commune: "Moltifao",

question: "'tuer' (le cochon)"

}

},{geometry: new Point({

    x: 9.011969,

y: 41.640460,

  }),

  attributes: {

    ObjectID: 34741,

lemme: "pulsà",

formePhonique: "pulz'a",

commune: "Granace",

question: "'tuer' (le cochon)"

}

},{geometry: new Point({

    x: 9.253651,

y: 41.592664,

  }),

  attributes: {

    ObjectID: 36089,

lemme: "tumbà",

formePhonique: "tumb'a",

commune: "Porto Vecchio",

question: "'tuer' (le cochon)"

}

},];

      var map = new Map({

      basemap: "gray"

    });

 

  var view = new MapView({

      container: "viewDiv"// Reference to the DOM node that will contain the view

      center: [9.15892639, 42.183238],

      zoom: 9,

      map: map               // References the map object created in step 3

    });

 

    var tumbà = new SimpleMarkerSymbol({

          color: getRandomColor(),

          width: 10,

          style: "solid"

        });

var pulsà = new SimpleMarkerSymbol({

          color: getRandomColor(),

          width: 10,

          style: "solid"

        });

 

    var defaultSymb = new SimpleMarkerSymbol({

        color: "#123456",

        width: 10,

        style: "solid"

      });

    

    var myrenderer = new UniqueValueRenderer({

     defaultSymbol: defaultSymb,

      defaultLabel: "Other major roads",

      field: "lemme",

      visualVariables: [

      {

         type: "size",

         field: "lemme"

      }],       

      uniqueValueInfos: [

      {

        value: "tumbà", // code for interstates/freeways

        symbol: tumbà,

        label: "tumbà"

      },{

        value: "pulsà", // code for interstates/freeways

        symbol: pulsà,

        label: "pulsà"

      }, ]

    });

 

    var lyr = new FeatureLayer({

source: features,

        fields: fields,

        objectIdField: "ObjectID",

        geometryType: "point",

        renderer: myrenderer,

        spatialReference: {

            wkid: 4326

          },

        popupTemplate: pTemplate,

        legendEnabled: true,

}); 

    map.add(lyr);

 

var legend = new Legend({

        view: view,

        layerInfos: [{

          layer: lyr,

          title: "'tuer' (le cochon)"

        }]

    });

 

    view.ui.add(legend, "bottom-left");

 

});

</script>

</head> 

 

<body>

<div id="viewDiv"></div>

</body>

 

</html>

Outcomes