1

I am using the ArcGIS JavaScript API to add a dynamic map in my application. I am loading data through a csvLayer.

The data looks something like this: enter image description here

Here's a snippet of me initiating the csvLayer:

var csvLayer = new CSVLayer({
                    url: numberLayers[0].Url,
                    popupTemplate: popupTemplate,
                    featureReduction: {
                        type: "selection"
                    },
                });

The Popup template where I am displaying the information from the CSV file is given here:

var popupTemplate = {
                    title: "{SensorTitle}",
                    content:
                        [
                            {
                                type: "fields",
                                fieldInfos: [
                                    { fieldName: "DateTime", label: "Date" },
                                    { fieldName: "Temp", label: "Temperature (°F)" },
                                    { fieldName: "Humidity", label: "Humidity (%)" },
                                    { fieldName: "DewPoint", label: "Dew Point (°F)" },
                                    { fieldName: "PM1", label: "PM 1.0 (µg/m3)" },
                                    { fieldName: "PM25", label: "PM 2.5 (µg/m3)" },
                                    { fieldName: "PM10", label: "PM 10.0 (µg/m3)" },
                                    { fieldName: "O3", label: "Ozone (ppb)" },
                                    { fieldName: "NO2", label: "Nitrogen Dioxide (ppb)" },
                                    { fieldName: "CO", label: "Carbon Monoxide (ppb)" },
                                ]
                            },
                        ],
                    actions:
                        [
                            { title: "More Information", id: "more-info", className: "esri-icon-notice-round" }
                        ],
                    overwriteActions: true,
                };

Now this is how the data is presented on my application: enter image description here

If you notice the datetime field for some reason changes automatically from a normal timestamp format to Unix epoch times. Why is this happening? How can I fix this?

P.S: If this post is not clear enough, just compare the two images I posted. The datetime field is automatically changing into a different format.

0

I believe you need a FieldInfoFormat object as follows:

var myFormat = new FieldInfoFormat({ 
dateFormat: "short-date-short-time"})

...then later in the fieldInfos[] of your popupTemplate, the date field should be supplemented with this formatter...

 fieldInfos: [
      { fieldName: "DateTime", label: "Date",     format: myFormat},
      { fieldName: "Temp", label: "Temperature (°F)" },
      { fieldName: "Humidity", label: "Humidity (%)" },
      { fieldName: "DewPoint", label: "Dew Point (°F)" },
      { fieldName: "PM1", label: "PM 1.0 (µg/m3)" },
      { fieldName: "PM25", label: "PM 2.5 (µg/m3)" },
      { fieldName: "PM10", label: "PM 10.0 (µg/m3)" },
      { fieldName: "O3", label: "Ozone (ppb)" },
      { fieldName: "NO2", label: "Nitrogen Dioxide (ppb)" },
      { fieldName: "CO", label: "Carbon Monoxide (ppb)" }
    ]

Note that this formatter may or may not be UTC-aware by default as the epoch-milliseconds value incoming from your csvLayer, so you may have to adjust to that using the intl module.

  • Thanks, this seems to have fixed the problem. Have a good day!! – Purple Samosa Jul 17 at 21:06

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.