Uncaught TypeError: Photos.setLabelingInfo is not a function

IsaacBoates · ‎04-30-2017

I am trying to create a web map with javascript, and I keep getting this error. I have pretty much copy and pasted the code from this page: Labeling features on the client | ArcGIS API for JavaScript 3.20

This is the code (I am clicking on the "code" button in the post interface but it refuses to format properly):

var map; 
require([
"esri/symbols/SimpleLineSymbol",
"esri/symbols/SimpleFillSymbol",
"esri/symbols/TextSymbol",
"esri/renderers/SimpleRenderer",
"esri/layers/LabelClass",
"esri/Color",
"esri/geometry/Extent",
"esri/map",
"esri/dijit/BasemapToggle",
"esri/layers/ArcGISDynamicMapServiceLayer",
"esri/layers/FeatureLayer",
"esri/layers/RasterFunction",
"esri/layers/ImageParameters",
"esri/layers/ArcGISTiledMapServiceLayer",
"esri/dijit/Popup",
"esri/dijit/PopupTemplate",
"dojo/dom-construct",
"dojo/on",
"esri/InfoTemplate",
"dojo/dom",
"dojo/query",
"dojo/domReady!",
"esri/dijit/Legend",
"dojo/_base/array",
"dojo/parser",
"dijit/form/HorizontalSlider",
"esri/dijit/Scalebar"],
function(SimpleLineSymbol,
SimpleFillSymbol,
TextSymbol,
SimpleRenderer,
LabelClass,
Color,
Extent,
Map,
BasemapToggle,
ArcGISDynamicMapServiceLayer,
FeatureLayer,
RasterFunction,
ImageParameters,
ArcGISTiledMapServiceLayer,
Popup,
PopupTemplate,
DomConstruct,
on,
InfoTemplate,
dom,
query,
ready,
Legend,
arrayUtils,
parser,
HorizontalSlider,
Scalebar)

{
var extent = new Extent({"xmin":2054005.395500005 , "ymin":6188618.186554961, "xmax":2079286.521715342, "ymax":6203773.949341377,"spatialReference": {"wkid": 3857}});
var popup = Popup({ 
titleInBody: false
},DomConstruct.create("div"));

map = new Map("mapDiv", {
"extent": extent,
basemap:"topo",
infoWindow: popup, 
showLabels: true
});

var Scalebar = new Scalebar({
map: map,
scalebarUnit: "dual",
attachTo: "bottom-left"

});
document.getElementsByClassName("scalebar_bottom-left esriScalebar")[0].style.bottom= "60px";
document.getElementsByClassName("scalebar_bottom-left esriScalebar")[0].style.left= "25px";

document.getElementsByClassName("esriScalebarLabel")[0].style.color ="black";
document.getElementsByClassName("esriScalebarLabel")[1].style.color ="black";

document.getElementsByClassName("esriScalebarLineLabel")[0].style.color ="black";
document.getElementsByClassName("esriScalebarLineLabel")[1].style.color ="black";

document.getElementsByClassName("esriScalebarLine")[1].style.borderColor="black"
document.getElementsByClassName("esriScalebarMetricLine")[0].style.borderColor="black"

document.getElementsByClassName("esriScalebarLabel")[0].style.color = "black";
document.getElementsByClassName("esriScalebarLabel")[1].style.color = "black";

var toggle = new BasemapToggle({
map: map,
basemap: "satellite"
}, "BasemapToggle");
toggle.startup();



var Photos = new FeatureLayer("https://www.imm.hs-karlsruhe.de/devsrv/rest/services/Gr2_Slvk2017/Gr2_P_VP_2_Photos/MapServer/0", {
id: "Photos",
outFields: ["*"],
visible: true
});

var photosColor = new Color("#ffffff");
var photosLine = new SimpleLineSymbol("solid", photosColor, 1.5);
var photosSymbol = new SimpleFillSymbol("solid", photosLine, null);
var photosRenderer = new SimpleRenderer(photosSymbol);

var json = {
"labelExpressionInfo": {"value": "{azimuth}"}
};

var photosLabel = new TextSymbol().setColor(photosColor);
photosLabel.font.setSize("14pt");
photosLabel.font.setFamily("arial");

var labelClass = new LabelClass(json);
labelClass.symbol = photosLabel; // symbol also can be set in LabelClass' json
Photos.setLabelingInfo([ labelClass ]);

map.addLayer(Photos);

})

KenBuja · ‎05-01-2017

This code seems to be working. I substituted a sample service in place of yours.

<!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>Labeling features client-side</title>
  <link rel="stylesheet" href="https://js.arcgis.com/3.20/esri/css/esri.css">
  <style>
    html, body, #mapDiv {
      height: 100%;
      width: 100%;
      margin: 0;
      padding: 0;
    }
  </style>

  <script src="https://js.arcgis.com/3.20/"></script>
  <script>
    var map;

    require([
    "esri/symbols/SimpleLineSymbol",
    "esri/symbols/SimpleFillSymbol",
    "esri/symbols/TextSymbol",
    "esri/renderers/SimpleRenderer",
    "esri/layers/LabelClass",
    "esri/Color",
    "esri/geometry/Extent",
    "esri/map",
    "esri/dijit/BasemapToggle",
    "esri/layers/ArcGISDynamicMapServiceLayer",
    "esri/layers/FeatureLayer",
    "esri/layers/RasterFunction",
    "esri/layers/ImageParameters",
    "esri/layers/ArcGISTiledMapServiceLayer",
    "esri/dijit/Popup",
    "esri/dijit/PopupTemplate",
    "dojo/dom-construct",
    "dojo/on",
    "esri/InfoTemplate",
    "dojo/dom",
    "dojo/query",
    "esri/dijit/Legend",
    "dojo/_base/array",
    "dojo/parser",
    "dijit/form/HorizontalSlider",
    "esri/dijit/Scalebar",
    "dojo/domReady!"],
    function (SimpleLineSymbol,
    SimpleFillSymbol,
    TextSymbol,
    SimpleRenderer,
    LabelClass,
    Color,
    Extent,
    Map,
    BasemapToggle,
    ArcGISDynamicMapServiceLayer,
    FeatureLayer,
    RasterFunction,
    ImageParameters,
    ArcGISTiledMapServiceLayer,
    Popup,
    PopupTemplate,
    DomConstruct,
    on,
    InfoTemplate,
    dom,
    query,
    Legend,
    arrayUtils,
    parser,
    HorizontalSlider,
    Scalebar) {
      var extent = new Extent({ "xmin": 1054005.395500005, "ymin": 6188618.186554961, "xmax": 2079286.521715342, "ymax": 6203773.949341377, "spatialReference": { "wkid": 3857 } });
      var popup = Popup({
        titleInBody: false
      }, DomConstruct.create("div"));



      map = new Map("mapDiv", {
        extent: extent,
        basemap: "topo",
        infoWindow: popup,
        showLabels: true
      });

      var Scalebar = new Scalebar({
        map: map,
        scalebarUnit: "dual",
        attachTo: "bottom-left"

      });
      document.getElementsByClassName("scalebar_bottom-left esriScalebar")[0].style.bottom = "60px";
      document.getElementsByClassName("scalebar_bottom-left esriScalebar")[0].style.left = "25px";

      document.getElementsByClassName("esriScalebarLabel")[0].style.color = "black";
      document.getElementsByClassName("esriScalebarLabel")[1].style.color = "black";

      document.getElementsByClassName("esriScalebarLineLabel")[0].style.color = "black";
      document.getElementsByClassName("esriScalebarLineLabel")[1].style.color = "black";

      document.getElementsByClassName("esriScalebarLine")[1].style.borderColor = "black"
      document.getElementsByClassName("esriScalebarMetricLine")[0].style.borderColor = "black"

      document.getElementsByClassName("esriScalebarLabel")[0].style.color = "black";
      document.getElementsByClassName("esriScalebarLabel")[1].style.color = "black";


      var toggle = new BasemapToggle({
        map: map,
        basemap: "satellite"
      }, "BasemapToggle");
      toggle.startup();

      var Photos = new FeatureLayer("https://sampleserver6.arcgisonline.com/arcgis/rest/services/Wildfire/FeatureServer/0", {
        id: "Photos",
        outFields: ["*"],
        visible: true
      });

      var photosColor = new Color("#000000");
      var photosLine = new SimpleLineSymbol("solid", photosColor, 1.5);
      var photosSymbol = new SimpleFillSymbol("solid", photosLine, null);
      var photosRenderer = new SimpleRenderer(photosSymbol);

      var json = {
        "labelExpressionInfo": { "value": "{created_user}" }
      };

      var photosLabel = new TextSymbol().setColor(photosColor);
      photosLabel.font.setSize("14pt");
      photosLabel.font.setFamily("arial");

      map.addLayer(Photos);

      var labelClass = new LabelClass(json);
      labelClass.symbol = photosLabel; // symbol also can be set in LabelClass' json
      Photos.setLabelingInfo([labelClass]);

    })
  </script>
</head>
<body>
  <div id="mapDiv"></div>
</body>
</html>
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

IsaacBoates · ‎05-02-2017

Hi Ken, thank you for your response. I changed my web service from MapServer to FeatureServer, but I don't know if that made a difference or not. The real problem was that my script was importing arcgis javascript api 3.9 instead of 3.20.