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
Solved! Go to Solution.
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>
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>
Hi Robert,
Also, is it possible to display these dates in a specific Time Zone, eg. UTC?
Thanks
Mark
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.
Check out Moment.js and Moment Timezone. These libraries are great for client side date manipulation.
Thanks Robert, you're a legend.
Is this approach documented anywhere?
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: