topic Re: Labelling date field on a featurelayer in ArcGIS JavaScript Maps SDK Questions

Labelling date field on a featurelayer

MarkTurnbull — Sun, 15 Nov 2015 19:17:30 GMT

Hi Javascript Gurus

I am having difficulty labelling (client side) a featurelayer with a date field. I have tried turning the map object's showLabels to true and tried creating a LabelLayer and adding it to the map, both options produce the same results. If I specify just the date field, I get labels that are the raw date object (number of seconds since 1/11970). I have tried to use the {DATE:DateString} and {DATE:DateFormat} functions but they present empty labels. I have also tried to re-set the labelClass on the feature layer to use FORMATDATETIME(DATE,"d/M/yyyy") but still the labels are empty. I would prefer not to have to create a field that contains a formatted date string in the map service. Is there anyway to debug why the labels are not appearing as expected (I have checked the ArcGIS Server logs and the browser console but cant find any errors relating to the labelling)? What is the right approach to labelling dates on a feature layer?

Thanks

Re: Labelling date field on a featurelayer

RobertScheitlin__GISP — Sat, 11 Dec 2021 19:22:15 GMT

Mark,

Here is a some sample code that demos using a date field for a label:

<!DOCTYPE html>
<html>
<head>
  <title>Create a Map</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
  <link rel="stylesheet" href="http://js.arcgis.com/3.14/dijit/themes/claro/claro.css">
  <link rel="stylesheet" href="http://js.arcgis.com/3.14/esri/css/esri.css">
  <style>
    html, body, #mapDiv{
      padding: 0;
      margin: 0;
      height: 100%;
    }
  </style>

  <script src="http://js.arcgis.com/3.14/"></script>
  <script>

    require([
      "esri/map",
      "esri/layers/FeatureLayer",
      "esri/layers/LabelClass",
      "esri/symbols/TextSymbol",
      "dojo/domReady!"], function(
        Map, FeatureLayer,
        LabelClass, TextSymbol
      ) {
      var map = new Map("mapDiv", {
        center: [-56.049, 38.485],
        zoom: 3,
        basemap: "gray",
        showLabels: true
      });

      // create a feature layer to show earthquakes
      var eqUrl = "http://sampleserver3.arcgisonline.com/ArcGIS/rest/services/Earthquakes/Since_1970/MapServer/0";
      var eq = new FeatureLayer(eqUrl, {
        id: "Earthquakes",
        outFields: ["*"],
        mode: FeatureLayer.MODE_ONDEMAND
      });
      map.addLayer(eq);

      /// Setup label properties
      var eqLabels = new LabelClass({
        labelExpressionInfo: {"value": "{Date_}"},
        fieldInfos:[{
          "fieldName": "Date_",
          "format": {"dateFormat": "shortDate"}
        }],
        symbol: {
         "type": "esriTS",
         "color": [67,176,211,255],
         "font": {
          "family": "Arial",
          "size": "14px"
         }
        }
      });

      // Apply label info to the feature layer
      eq.setLabelingInfo([eqLabels]);

    });
  </script>

</head>
<body class="claro">
  <div id="mapDiv"></div>
</body>
</html>

Re: Labelling date field on a featurelayer

MarkTurnbull — Sun, 15 Nov 2015 23:18:09 GMT

Thanks Robert, you're a legend.

Is this approach documented anywhere?

Re: Labelling date field on a featurelayer

MarkTurnbull — Sun, 15 Nov 2015 23:28:27 GMT

Hi Robert,

Also, is it possible to display these dates in a specific Time Zone, eg. UTC?

Thanks

Mark

Re: Labelling date field on a featurelayer

RobertScheitlin__GISP — Mon, 16 Nov 2015 01:56:14 GMT

Mark,

It is kind of spread of in help docs. The starting point is the JS API LabelClass.

Also the format portion comes from this link:

Format Popup Content | Guide | ArcGIS API for JavaScript

Re: Labelling date field on a featurelayer

RobertScheitlin__GISP — Mon, 16 Nov 2015 02:06:07 GMT

Mark,

Not sure on that one. I know in JS API you can take a UTC date (Which ArcGIS Server returns) and use locale.parse. But I don't know how to do this in the labeling stuff.

Re: Labelling date field on a featurelayer

OwenEarley — Mon, 16 Nov 2015 03:09:36 GMT

Check out Moment.js and Moment Timezone. These libraries are great for client side date manipulation.