Labeling features

Question

Hi , I want to add labels for my features by attribute "NOM" . <!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> Population Totale </title> <link rel="stylesheet" href="http://js.arcgis.com/3.16/dijit/themes/tundra/tundra.css"> <link rel="stylesheet" href="http://js.arcgis.com/3.16/esri/css/esri.css"> <style> #HomeButton { position: absolute; top: 90px; left: 20px; z-index: 2; } html, body { height: 100%; width: 100%; margin: 0; padding: 0; } #map { margin: 0; padding: 0; } #feedback { position: absolute; height: 390px; font-family: arial; margin: 5px; padding: 10px; z-index: 40; background: #fff; color: #444; width: 300px; right: 10px; top: 10px; box-shadow: 0 0 5px #888; } #legendWrapper { padding: 10px 0 0 0; } #note { font-size: 80%; font-weight: 700; padding: 0 0 10px 0; } h3 { margin: 0 0 5px 0; border-bottom: 1px solid #444; } </style> <script src="http://js.arcgis.com/3.16/"></script> <script> //global vars var layer, legend; require([ "esri/map", "esri/dijit/BasemapGallery", "esri/dijit/HomeButton", "esri/dijit/PopupTemplate", "esri/layers/FeatureLayer", "esri/dijit/Legend", "esri/renderers/smartMapping", "dojo/_base/array", "dojo/dom", "dojo/dom-construct", "dojo/data/ItemFileReadStore", "dijit/form/FilteringSelect", "esri/dijit/Print", "dojo/parser", "dijit/layout/BorderContainer", "dijit/layout/ContentPane", "dojo/domReady!" ], function( Map, BasemapGallery, HomeButton, PopupTemplate, FeatureLayer, Legend, smartMapping, array, dom, domConstruct, ItemFileReadStore, FilteringSelect, Print, parser ) { parser.parse(); var mapOptions = { basemap: "topo", center: [11, 34], zoom: 6, slider: true }; var map = new Map("map", mapOptions); var basemapGallery = new BasemapGallery({ showArcGISBasemaps: true, map: map }, "basemapGallery"); basemapGallery.startup(); basemapGallery.on("error", function(msg) { console.log("basemap gallery error: ", msg); }); // map.enableKeyboardNavigation(); var home = new HomeButton({ map: map }, "HomeButton"); home.startup(); var printer = new Print({ map: map, url: "http://41.231.36.249/sirgeo/rest/services/Utilities/PrintingTools/GPServer/Export%20Web%20Map%20Task", templates: [{ label: "Map", format: "PDF", layout: "MAP_ONLY", exportOptions: { width: 500, height: 400, dpi: 96 } }, { label: "Layout", format: "PDF", layout: "A4 Portrait", layoutOptions: { titleText: "My Print", authorText: "esri", copyrightText: "My Company", scalebarUnit: "Miles", } }] }, dom.byId("printButton")); printer.startup(); var fieldName = "PopTot2004"; // the counties map service uses the actual field name as the field alias // set up an object to use as a lookup table to work with user friendly field names var fields = { "PopTot2004": "Population Totale (2004)", "PopTot2005": "Population Totale (2005)", "PopTot2006": "Population Totale (2006)", "PopTot2007": "Population Totale (2007)", "PopTot2008": "Population Totale (2008)", "PopTot2009": "Population Totale (2009)", "PopTot2010": "Population Totale (2010)", "PopTot2011": "Population Totale (2011)", "PopTot2012": "Population Totale (2012)", "PopTot2013": "Population Totale (2013)", "PopTot2014": "Population Totale (2014)", "NOM": "NOM" }; var outFields = ["PopTot2004", "PopTot2005", "PopTot2006", "PopTot2007", "PopTot2008", "PopTot2009", "PopTot2010", "PopTot2011", "PopTot2012", "PopTot2013", "PopTot2014", "NOM"]; //create popup var popupTemplate = new PopupTemplate({ title: "{NOM}", fieldInfos: [{ "fieldName": fieldName, "label": fields[fieldName], "visible": true, "format": { places: 0, digitSeparator: true } }], showAttachments: true }); layer = new FeatureLayer("http://41.231.36.249/sirgeo/rest/services/SIR-Gouv/demographie_gouv/MapServer/0", { "id": "Chad", "infoTemplate": popupTemplate, "mode": FeatureLayer.MODE_SNAPSHOT, "outFields": outFields, "opacity": 0.8 }); //only working with Washington state //layer.setDefinitionExpression("Region='NO'"); map.addLayer(layer); layer.on("load", function() { createRenderer(fieldName); }); function createRenderer(field) { //smart mapping functionality begins smartMapping.createClassedColorRenderer({ layer: layer, field: field, basemap: map.getBasemap(), classificationMethod: "quantile", numClasses: 3, //ClassBreakInfo(null, minValue:100000, maxValue:250000), showOthers: false }).then(function(response) { layer.setRenderer(response.renderer); layer.redraw(); createLegend(map, layer, field); }); } //this function gets called when fields are selected to render function updateAttribute(ch) { map.infoWindow.hide(); var popupTemplateUpdated = new PopupTemplate({ title: "{NOM}", fieldInfos: [{ "fieldName": ch, "label": fields[ch], "visible": true, "format": { places: 0, digitSeparator: true } }], showAttachments: true }); layer.setInfoTemplate(popupTemplateUpdated); createRenderer(ch); layer.redraw(); createLegend(map, layer, ch); } //Create a legend function createLegend(map, layer, field) { //If applicable, destroy previous legend if (legend) { legend.destroy(); domConstruct.destroy(dom.byId("legendDiv")); } // create a new div for the legend var legendDiv = domConstruct.create("div", { id: "legendDiv" }, dom.byId("legendWrapper")); legend = new Legend({ map: map, layerInfos: [{ layer: layer, title: "Indicateur: " }] }, legendDiv); legend.startup(); } // create a store and a filtering select for the county layer's fields var fieldNames, fieldStore, fieldSelect; fieldNames = { "identifier": "value", "label": "name", "items": [] }; array.forEach(outFields, function(f) { if (array.indexOf(f.split("_"), "NOM") == -1) { // exclude attrs that contain "NAME" fieldNames.items.push({ "name": fields[f], "value": f }); } }); fieldStore = new ItemFileReadStore({ data: fieldNames }); fieldSelect = new FilteringSelect({ displayedValue: fieldNames.items[0].name, value: fieldNames.items[0].value, name: "fieldsFS", required: false, store: fieldStore, searchAttr: "name", style: { "width": "290px", "fontSize": "12pt", "color": "#444" } }, domConstruct.create("div", null, dom.byId("fieldWrapper"))); fieldSelect.on("change", updateAttribute); }); </script> </head> <body class="tundra"> <div data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design:'headline',gutters:false" style="width: 100%; height: 100%; margin: 0;"> <div id="map" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'center'"> <div id="feedback"> <h3>Population Totale(milliers habitants)</h3> <div id="info"> SÃ©lectionnez une annÃ©e pour une visualisation cartographiqe . </div> <div id="legendWrapper"></div> <div id="fieldWrapper"> Veuillez choisir l'annÃ©e </div> <div id="printButton"></div> </div> </div> </div> <div id="HomeButton"></div> <div style="position:absolute; left:20px; top:150px; z-Index:999;"> <div data-dojo-type="dijit/TitlePane" data-dojo-props="title:'Fond de carte', closable:false, open:false"> <div data-dojo-type="dijit/layout/ContentPane" style="width:380px; height:280px; overflow:auto;"> <div id="basemapGallery"></div> </div> </div> </div> </body> </html>

rscheitlin · Accepted Answer

Amal, Here is your code with labeling added. <!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> Population Totale </title> <link rel="stylesheet" href="http://js.arcgis.com/3.16/dijit/themes/tundra/tundra.css"> <link rel="stylesheet" href="http://js.arcgis.com/3.16/esri/css/esri.css"> <style> #HomeButton { position: absolute; top: 90px; left: 20px; z-index: 2; } html, body { height: 100%; width: 100%; margin: 0; padding: 0; } #map { margin: 0; padding: 0; } #feedback { position: absolute; height: 390px; font-family: arial; margin: 5px; padding: 10px; z-index: 40; background: #fff; color: #444; width: 300px; right: 10px; top: 10px; box-shadow: 0 0 5px #888; } #legendWrapper { padding: 10px 0 0 0; } #note { font-size: 80%; font-weight: 700; padding: 0 0 10px 0; } h3 { margin: 0 0 5px 0; border-bottom: 1px solid #444; } </style> <script src="http://js.arcgis.com/3.16/"></script> <script> //global vars var layer, legend; require([ "esri/map", "esri/dijit/BasemapGallery", "esri/dijit/HomeButton", "esri/dijit/PopupTemplate", "esri/layers/FeatureLayer", "esri/dijit/Legend", "esri/renderers/smartMapping", "dojo/_base/array", "dojo/dom", "dojo/dom-construct", "dojo/data/ItemFileReadStore", "dijit/form/FilteringSelect", "esri/dijit/Print", "esri/layers/LabelClass", "esri/symbols/TextSymbol", "esri/Color", "dojo/parser", "dijit/layout/BorderContainer", "dijit/layout/ContentPane", "dojo/domReady!" ], function( Map, BasemapGallery, HomeButton, PopupTemplate, FeatureLayer, Legend, smartMapping, array, dom, domConstruct, ItemFileReadStore, FilteringSelect, Print, LabelClass, TextSymbol, Color, parser ) { parser.parse(); var mapOptions = { basemap: "topo", center: [11, 34], zoom: 6, slider: true, showLabels : true //very important that this must be set to true! }; var map = new Map("map", mapOptions); var basemapGallery = new BasemapGallery({ showArcGISBasemaps: true, map: map }, "basemapGallery"); basemapGallery.startup(); basemapGallery.on("error", function(msg) { console.log("basemap gallery error: ", msg); }); // map.enableKeyboardNavigation(); var home = new HomeButton({ map: map }, "HomeButton"); home.startup(); var printer = new Print({ map: map, url: "http://41.231.36.249/sirgeo/rest/services/Utilities/PrintingTools/GPServer/Export%20Web%20Map%20Task", templates: [{ label: "Map", format: "PDF", layout: "MAP_ONLY", exportOptions: { width: 500, height: 400, dpi: 96 } }, { label: "Layout", format: "PDF", layout: "A4 Portrait", layoutOptions: { titleText: "My Print", authorText: "esri", copyrightText: "My Company", scalebarUnit: "Miles", } }] }, dom.byId("printButton")); printer.startup(); var fieldName = "PopTot2004"; // the counties map service uses the actual field name as the field alias // set up an object to use as a lookup table to work with user friendly field names var fields = { "PopTot2004": "Population Totale (2004)", "PopTot2005": "Population Totale (2005)", "PopTot2006": "Population Totale (2006)", "PopTot2007": "Population Totale (2007)", "PopTot2008": "Population Totale (2008)", "PopTot2009": "Population Totale (2009)", "PopTot2010": "Population Totale (2010)", "PopTot2011": "Population Totale (2011)", "PopTot2012": "Population Totale (2012)", "PopTot2013": "Population Totale (2013)", "PopTot2014": "Population Totale (2014)", "NOM": "NOM" }; var outFields = ["PopTot2004", "PopTot2005", "PopTot2006", "PopTot2007", "PopTot2008", "PopTot2009", "PopTot2010", "PopTot2011", "PopTot2012", "PopTot2013", "PopTot2014", "NOM"]; //create popup var popupTemplate = new PopupTemplate({ title: "{NOM}", fieldInfos: [{ "fieldName": fieldName, "label": fields[fieldName], "visible": true, "format": { places: 0, digitSeparator: true } }], showAttachments: true }); layer = new FeatureLayer("http://41.231.36.249/sirgeo/rest/services/SIR-Gouv/demographie_gouv/MapServer/0", { "id": "Chad", "infoTemplate": popupTemplate, "mode": FeatureLayer.MODE_SNAPSHOT, "outFields": outFields, "opacity": 0.8 }); // create a text symbol to define the style of labels var fLabel = new TextSymbol().setColor(new Color("#666")); fLabel.font.setSize("14pt"); fLabel.font.setFamily("arial"); //this is the very least of what should be set within the JSON var json = { "labelExpressionInfo": {"value": "{NOM}"} }; //create instance of LabelClass (note: multiple LabelClasses can be passed in as an array) var labelClass = new LabelClass(json); labelClass.symbol = fLabel; // symbol also can be set in LabelClass' json layer.setLabelingInfo([labelClass]); map.addLayer(layer); layer.on("load", function() { createRenderer(fieldName); }); function createRenderer(field) { //smart mapping functionality begins smartMapping.createClassedColorRenderer({ layer: layer, field: field, basemap: map.getBasemap(), classificationMethod: "quantile", numClasses: 3, //ClassBreakInfo(null, minValue:100000, maxValue:250000), showOthers: false }).then(function(response) { layer.setRenderer(response.renderer); layer.redraw(); createLegend(map, layer, field); }); } //this function gets called when fields are selected to render function updateAttribute(ch) { map.infoWindow.hide(); var popupTemplateUpdated = new PopupTemplate({ title: "{NOM}", fieldInfos: [{ "fieldName": ch, "label": fields[ch], "visible": true, "format": { places: 0, digitSeparator: true } }], showAttachments: true }); layer.setInfoTemplate(popupTemplateUpdated); createRenderer(ch); layer.redraw(); createLegend(map, layer, ch); } //Create a legend function createLegend(map, layer, field) { //If applicable, destroy previous legend if (legend) { legend.destroy(); domConstruct.destroy(dom.byId("legendDiv")); } // create a new div for the legend var legendDiv = domConstruct.create("div", { id: "legendDiv" }, dom.byId("legendWrapper")); legend = new Legend({ map: map, layerInfos: [{ layer: layer, title: "Indicateur: " }] }, legendDiv); legend.startup(); } // create a store and a filtering select for the county layer's fields var fieldNames, fieldStore, fieldSelect; fieldNames = { "identifier": "value", "label": "name", "items": [] }; array.forEach(outFields, function(f) { if (array.indexOf(f.split("_"), "NOM") == -1) { // exclude attrs that contain "NAME" fieldNames.items.push({ "name": fields[f], "value": f }); } }); fieldStore = new ItemFileReadStore({ data: fieldNames }); fieldSelect = new FilteringSelect({ displayedValue: fieldNames.items[0].name, value: fieldNames.items[0].value, name: "fieldsFS", required: false, store: fieldStore, searchAttr: "name", style: { "width": "290px", "fontSize": "12pt", "color": "#444" } }, domConstruct.create("div", null, dom.byId("fieldWrapper"))); fieldSelect.on("change", updateAttribute); }); </script> </head> <body class="tundra"> <div data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design:'headline',gutters:false" style="width: 100%; height: 100%; margin: 0;"> <div id="map" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'center'"> <div id="feedback"> <h3>Population Totale(milliers habitants)</h3> <div id="info"> Sélectionnez une année pour une visualisation cartographiqe . </div> <div id="legendWrapper"></div> <div id="fieldWrapper"> Veuillez choisir l'année </div> <div id="printButton"></div> </div> </div> </div> <div id="HomeButton"></div> <div style="position:absolute; left:20px; top:150px; z-Index:999;"> <div data-dojo-type="dijit/TitlePane" data-dojo-props="title:'Fond de carte', closable:false, open:false"> <div data-dojo-type="dijit/layout/ContentPane" style="width:380px; height:280px; overflow:auto;"> <div id="basemapGallery"></div> </div> </div> </div> </body> </html> ‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍