adding methods to get the header summaries in the selected date mode

src/utils/map-utils.js

@@ -100,16 +100,37 @@ export const getPropertyName = (layerProps, element_name) => {
     return ret_val;
 };
 
+/**
+ * gets the run date formatted based on current user UTC/locale selection
+ *
+ * @param layerProps
+ * @param useUTC
+ * @param longFormat
+ * @returns {string|string}
+ */
+export const getPreferredTimeZone = (layerProps, useUTC, longFormat=false) => {
+    // does the situation need the full date format
+    if (longFormat) {
+        return useUTC ? new Date(layerProps['runDate']).toUTCString() : new Date(layerProps['insertion_date']).toLocaleString();
+    }
+    // send back the short date format
+    else {
+        // get the date/time by current preference
+        return useUTC ? layerProps['run_date'] : new Date(layerProps['insertion_date']).toLocaleDateString();
+    }
+
+};
+
 /**
  * gets the summary header text for the layer groups.
  * This takes into account the two types of runs (tropical, synoptic)
  *
  * @param layerProps
  * @returns {string}
  */
-export const getHeaderSummary = (layerProps) => {
+export const getHeaderSummary = (layerProps, useUTC) => {
     // get the full accordian summary text
-    return layerProps['run_date'] + ': ' +
+    return getPreferredTimeZone(layerProps, useUTC) + ': ' +
         ((getPropertyName(layerProps, 'stormOrModelEle') === undefined) ? 'Data error' : getPropertyName(layerProps, 'stormOrModelEle').toUpperCase()) +
         ', ' + getPropertyName(layerProps, 'numberName') + getPropertyName(layerProps, 'numberEle') +
         ', Type: ' + layerProps['event_type'] +
@@ -186,7 +207,6 @@ export const markClicked = (map, event, id) => {
   marker.addTo(map);
 };
 
-
 export const markUnclicked = (map, id) => {
   map.eachLayer((layer) => {
     if (layer.options && layer.options.pane === "markerPane") {