Labelling date field on a featurelayer

4082
6
Jump to solution
11-15-2015 11:17 AM
MarkTurnbull
New Contributor III

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

0 Kudos
1 Solution

Accepted Solutions
RobertScheitlin__GISP
MVP Emeritus

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>

View solution in original post

0 Kudos
6 Replies
RobertScheitlin__GISP
MVP Emeritus

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>
0 Kudos
MarkTurnbull
New Contributor III

Hi Robert,

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

Thanks

Mark

0 Kudos
RobertScheitlin__GISP
MVP Emeritus

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.

0 Kudos
OwenEarley
Occasional Contributor III

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

0 Kudos
MarkTurnbull
New Contributor III

Thanks Robert, you're a legend.

Is this approach documented anywhere?

0 Kudos
RobertScheitlin__GISP
MVP Emeritus

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

0 Kudos