Syntax for LabelClass

TracySchloss — Sun, 12 Dec 2021 06:26:41 GMT

I've been using LabelLayer, but the documentation says I should be using LabelClass and setting the LabelingInfo on my FeatureLayer instead. This seems to be another robust objects that has almost no documentation, postings in the forum or examples to work from.

Here's a link.Food Inspections in Missouri

I got no takers on my previous posting about overlapping labels, so I'm hoping one of my other options will give me the results I'm looking for. I have a layer of labels in in ArcGISDynamicServiceLayer, but the hierarchy of featureLayer vs dynamicmeant my labels were under my shaded polygon.

This shouldn't be so hard! I can just hear a web developer - "Why aren't you just using a Google map, it's so much easier? " Ugh. It works properly, it just needs county names.

I'm not getting any errors, but this doesn't work:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
  <head> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 
    <meta http-equiv="X-UA-Compatible" content="IE=7,IE=9" /> 
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/> 
    <title>Food Inspections in Missouri</title> 
        <link rel="stylesheet" href="https://community.esri.com//js.arcgis.com/3.16/dijit/themes/claro/claro.css"/>
    <link rel="stylesheet" type="text/css" href="https://community.esri.com//js.arcgis.com/3.16/esri/css/esri.css">
    <link rel="stylesheet" type="text/css" href="https://community.esri.com//esri.github.io/bootstrap-map-js/dist/css/bootstrapmap.min.css">
    <style type="text/css">
        html, body {
            height: 100%;
            width: 100%;
            margin: 0;
            padding: 0;
        }

        #mapDiv {
            padding: 0;
            height: 96%;
            width: 100%;
            min-height: 400px;
        }
        
        .esriPopup .titlePane, .esriPopup.dark .titlePane, .esriPopup.light .titlePane {
            height: 20px;
  background-color:#ffffff;
        }
    </style>
 </head> 
  <body class="claro"> 
  <script type="text/javascript">
      var dojoConfig = {
          parseOnLoad: false,
          async: true,
          packages: [{
              name: 'js',
              location: window.location.pathname.substring(0, window.location.pathname.lastIndexOf('/')) + "/js"
          },{
              name: 'bootstrap-map-js',
              location: '//esri.github.io/bootstrap-map-js/src/'
          }]
      };
  </script>
      <script type="text/javascript" src="//js.arcgis.com/3.16compact/"></script>
    
    <script type="text/javascript" >    
  require(["dojo/parser", "dojo/on", "dojo/dom","dojo/dom-construct", "esri/InfoTemplate", 
   "esri/dijit/Popup", "esri/SpatialReference", "esri/geometry/Extent","bootstrap-map-js/js/bootstrapmap",
   "esri/layers/FeatureLayer", "esri/layers/ArcGISDynamicMapServiceLayer","esri/layers/LabelLayer",
   "esri/layers/LabelClass",
   "esri/renderers/SimpleRenderer","esri/renderers/ScaleDependentRenderer",
   "esri/symbols/TextSymbol","esri/symbols/Font","esri/Color","esri/symbols/jsonUtils","js/mySymbol",
     "dojo/domReady!"], 
  
  function(parser, on,dom, domConstruct, InfoTemplate,Popup,SpatialReference, Extent,
  BootstrapMap,FeatureLayer,ArcGISDynamicMapServiceLayer,LabelClass, LabelLayer,SimpleRenderer,ScaleDependentRenderer,
  TextSymbol,Font,Color,jsonUtils, mySymbol
   ){ 
      window.app = {};     
   var pathName = "https://ogitest.oa.mo.gov";
      var popup;
   parser.parse();


      app.spatialReference = new SpatialReference({ wkid: 102100 });
      app.startExtent = new Extent(-10583000, 4287025, -9979000, 4980462, app.spatialReference);
      
       popup = new Popup({
          fillSymbol: mySymbol.highlightFillSymbol(),
          markerSymbol: mySymbol.highlightMarkerSymbol()
      }, domConstruct.create("div"));
   

  app.map = BootstrapMap.create(dom.byId('mapDiv'), {
     extent: app.startExtent,
  slider:false,
     autoResize:true,
     scrollWheelZoom: false,
     infoWindow: popup,
  showLabels: true
  });

   app.map.on("load", function () {
         app.map.disablePan();
         app.map.disableMapNavigation();
     
     });


  on(app.map, "layers-add-result", function(e){
     for (var i = 0; i < e.layers.length; i++) {
         var result = (e.layers.error == undefined) ? "OK" : e.layers.error.message;
         console.log(" - " + e.layers.layer.id + ": " + result);
     }
  });
   
    var countyLayer = new FeatureLayer(pathName + "/arcgis/rest/services/BaseMap/county_simple/MapServer/0", {
        id: "countyLayer",
        mode: FeatureLayer.MODE_ONDEMAND,
        outFields: ["*"]
    });
     
  var countyLabelPt = new FeatureLayer(pathName + "/arcgis/rest/services/DHSS/foodInspection_label/MapServer/0", {
  id:'countyLabel',
  mode: FeatureLayer.MODE_ONDEMAND,
        outFields: ["*"]
  })
   
    var infoTemplate = new InfoTemplate(
  "View Food Inspections", 
  "<a href= ${Web_Url} target=_blank ;'>${Agency_Name}</a>");




   var  inspectionCountyLayer = new FeatureLayer(pathName+"/arcgis/rest/services/DHSS/foodInspection/MapServer/1", { 
          mode: FeatureLayer.MODE_ONDEMAND,
          outFields: ["*"],
   infoTemplate: infoTemplate,
   opacity:0.5
        }); 

   var inspectionCityLayer = new FeatureLayer(pathName+"/arcgis/rest/services/DHSS/foodInspection/MapServer/0", { 
          mode: FeatureLayer.MODE_ONDEMAND,
          outFields: ["*"],
   infoTemplate: infoTemplate
        });   
         
        app.map.addLayers([countyLayer,inspectionCountyLayer,inspectionCityLayer]);  


  var labelClass = new LabelClass({  
   labelExpressionInfo: {  
     value: '{NAME}'  
   },  
   labelPlacement: 'center-center'  
  });  
   
  labelClass.symbol = jsonUtils.fromJson({  
   type: 'esriTS',  
   color: [0, 0, 255],  
   haloColor: [255, 255, 255],  
   haloSize: 1,  
   font: {  
     size: 8,  
     weight: 'bold',  
     family: 'sans-serif'  
   }  
  });


  countyLabelPt.setLabelingInfo([ labelClass ]);
  app.map.addLayer(countyLabelPt);
  });
    </script> 


   Click a shaded county to get information on food inspections.
    <div id="mapDiv" ></div> 
  </body> 
</html>

Re: Syntax for LabelClass

KenBuja — Tue, 05 Apr 2016 20:17:34 GMT

You have LabelClass and LabelLayer in different positions in the function than the modules called in the require

"esri/layers/ArcGISDynamicMapServiceLayer","esri/layers/LabelLayer", "esri/layers/LabelClass", "esri/renderers/SimpleRenderer"

ArcGISDynamicMapServiceLayer, LabelClass, LabelLayer, SimpleRenderer

Re: Syntax for LabelClass

TracySchloss — Tue, 05 Apr 2016 20:24:35 GMT

Hurray for finding my dumb mistake. However, it doesn't solve my problem of missing county names, which I was hoping to resolve by using the 'recommended' method of labeling.

Re: Syntax for LabelClass

TracySchloss — Tue, 05 Apr 2016 20:38:30 GMT

I've moved a few of my label points around and I think I got them all. Of course, once it gets placed on the web page and its smaller, they'll stop dropping off again. I see there's a parameter for sizeInfo. I suppose it's wishful thinking that I could tie that back to a font size somehow.

I started out with a scale dependent renderer, which drew OK, but was below my shaded polygons, so it wasn't ideal. I changed the opacity, but you could tell the text was underneath.

topic Syntax for LabelClass in ArcGIS JavaScript Maps SDK Questions

Syntax for LabelClass

Re: Syntax for LabelClass

Re: Syntax for LabelClass

Re: Syntax for LabelClass