diff --git a/docs/guides/maps/cesium.md b/docs/guides/maps/cesium.md
index e078aae05..22914db52 100644
--- a/docs/guides/maps/cesium.md
+++ b/docs/guides/maps/cesium.md
@@ -216,6 +216,20 @@ Below is an example of a detailed map configuration (descriptions have been shor
       "label": "Some Test GeoJSON",
       "type": "GeoJsonDataSource",
       "description": "A single point specified using GeoJSON",
+      "customProperties": {
+        "year": {
+          "type": "date",
+          "property": "dateAndTime",
+          "format": "YYYY"
+        }
+      },
+      "featureTemplate": {
+        "template": "story",
+        "label": "year",
+        "options": {
+          "description": "summary",
+        }
+      },
       "cesiumOptions": {
         "data": {
           "type": "FeatureCollection",
@@ -227,7 +241,9 @@ Below is an example of a detailed map configuration (descriptions have been shor
                 "coordinates": [102.0, 0.5]
               },
               "properties": {
-                "prop0": "value0"
+                "prop0": "value0",
+                "dateAndTime": "2007-03-01T13:00:00Z",
+                "summary": "This is an example point!"
               }
             }
           ]
diff --git a/docs/screenshots/views/maps/FeatureInfoView.png b/docs/screenshots/views/maps/FeatureInfoView.png
index c06892ba7..1e9e20ecf 100644
Binary files a/docs/screenshots/views/maps/FeatureInfoView.png and b/docs/screenshots/views/maps/FeatureInfoView.png differ
diff --git a/src/components/dayjs.min.js b/src/components/dayjs.min.js
new file mode 100644
index 000000000..d284eec4d
--- /dev/null
+++ b/src/components/dayjs.min.js
@@ -0,0 +1 @@
+!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):(t="undefined"!=typeof globalThis?globalThis:t||self).dayjs=e()}(this,(function(){"use strict";var t=1e3,e=6e4,n=36e5,r="millisecond",i="second",s="minute",u="hour",a="day",o="week",f="month",h="quarter",c="year",d="date",$="Invalid Date",l=/^(\d{4})[-/]?(\d{1,2})?[-/]?(\d{0,2})[Tt\s]*(\d{1,2})?:?(\d{1,2})?:?(\d{1,2})?[.:]?(\d+)?$/,y=/\[([^\]]+)]|Y{1,4}|M{1,4}|D{1,2}|d{1,4}|H{1,2}|h{1,2}|a|A|m{1,2}|s{1,2}|Z{1,2}|SSS/g,M={name:"en",weekdays:"Sunday_Monday_Tuesday_Wednesday_Thursday_Friday_Saturday".split("_"),months:"January_February_March_April_May_June_July_August_September_October_November_December".split("_")},m=function(t,e,n){var r=String(t);return!r||r.length>=e?t:""+Array(e+1-r.length).join(n)+t},g={s:m,z:function(t){var e=-t.utcOffset(),n=Math.abs(e),r=Math.floor(n/60),i=n%60;return(e<=0?"+":"-")+m(r,2,"0")+":"+m(i,2,"0")},m:function t(e,n){if(e.date()<n.date())return-t(n,e);var r=12*(n.year()-e.year())+(n.month()-e.month()),i=e.clone().add(r,f),s=n-i<0,u=e.clone().add(r+(s?-1:1),f);return+(-(r+(n-i)/(s?i-u:u-i))||0)},a:function(t){return t<0?Math.ceil(t)||0:Math.floor(t)},p:function(t){return{M:f,y:c,w:o,d:a,D:d,h:u,m:s,s:i,ms:r,Q:h}[t]||String(t||"").toLowerCase().replace(/s$/,"")},u:function(t){return void 0===t}},D="en",v={};v[D]=M;var p=function(t){return t instanceof _},S=function(t,e,n){var r;if(!t)return D;if("string"==typeof t)v[t]&&(r=t),e&&(v[t]=e,r=t);else{var i=t.name;v[i]=t,r=i}return!n&&r&&(D=r),r||!n&&D},w=function(t,e){if(p(t))return t.clone();var n="object"==typeof e?e:{};return n.date=t,n.args=arguments,new _(n)},O=g;O.l=S,O.i=p,O.w=function(t,e){return w(t,{locale:e.$L,utc:e.$u,x:e.$x,$offset:e.$offset})};var _=function(){function M(t){this.$L=S(t.locale,null,!0),this.parse(t)}var m=M.prototype;return m.parse=function(t){this.$d=function(t){var e=t.date,n=t.utc;if(null===e)return new Date(NaN);if(O.u(e))return new Date;if(e instanceof Date)return new Date(e);if("string"==typeof e&&!/Z$/i.test(e)){var r=e.match(l);if(r){var i=r[2]-1||0,s=(r[7]||"0").substring(0,3);return n?new Date(Date.UTC(r[1],i,r[3]||1,r[4]||0,r[5]||0,r[6]||0,s)):new Date(r[1],i,r[3]||1,r[4]||0,r[5]||0,r[6]||0,s)}}return new Date(e)}(t),this.$x=t.x||{},this.init()},m.init=function(){var t=this.$d;this.$y=t.getFullYear(),this.$M=t.getMonth(),this.$D=t.getDate(),this.$W=t.getDay(),this.$H=t.getHours(),this.$m=t.getMinutes(),this.$s=t.getSeconds(),this.$ms=t.getMilliseconds()},m.$utils=function(){return O},m.isValid=function(){return!(this.$d.toString()===$)},m.isSame=function(t,e){var n=w(t);return this.startOf(e)<=n&&n<=this.endOf(e)},m.isAfter=function(t,e){return w(t)<this.startOf(e)},m.isBefore=function(t,e){return this.endOf(e)<w(t)},m.$g=function(t,e,n){return O.u(t)?this[e]:this.set(n,t)},m.unix=function(){return Math.floor(this.valueOf()/1e3)},m.valueOf=function(){return this.$d.getTime()},m.startOf=function(t,e){var n=this,r=!!O.u(e)||e,h=O.p(t),$=function(t,e){var i=O.w(n.$u?Date.UTC(n.$y,e,t):new Date(n.$y,e,t),n);return r?i:i.endOf(a)},l=function(t,e){return O.w(n.toDate()[t].apply(n.toDate("s"),(r?[0,0,0,0]:[23,59,59,999]).slice(e)),n)},y=this.$W,M=this.$M,m=this.$D,g="set"+(this.$u?"UTC":"");switch(h){case c:return r?$(1,0):$(31,11);case f:return r?$(1,M):$(0,M+1);case o:var D=this.$locale().weekStart||0,v=(y<D?y+7:y)-D;return $(r?m-v:m+(6-v),M);case a:case d:return l(g+"Hours",0);case u:return l(g+"Minutes",1);case s:return l(g+"Seconds",2);case i:return l(g+"Milliseconds",3);default:return this.clone()}},m.endOf=function(t){return this.startOf(t,!1)},m.$set=function(t,e){var n,o=O.p(t),h="set"+(this.$u?"UTC":""),$=(n={},n[a]=h+"Date",n[d]=h+"Date",n[f]=h+"Month",n[c]=h+"FullYear",n[u]=h+"Hours",n[s]=h+"Minutes",n[i]=h+"Seconds",n[r]=h+"Milliseconds",n)[o],l=o===a?this.$D+(e-this.$W):e;if(o===f||o===c){var y=this.clone().set(d,1);y.$d[$](l),y.init(),this.$d=y.set(d,Math.min(this.$D,y.daysInMonth())).$d}else $&&this.$d[$](l);return this.init(),this},m.set=function(t,e){return this.clone().$set(t,e)},m.get=function(t){return this[O.p(t)]()},m.add=function(r,h){var d,$=this;r=Number(r);var l=O.p(h),y=function(t){var e=w($);return O.w(e.date(e.date()+Math.round(t*r)),$)};if(l===f)return this.set(f,this.$M+r);if(l===c)return this.set(c,this.$y+r);if(l===a)return y(1);if(l===o)return y(7);var M=(d={},d[s]=e,d[u]=n,d[i]=t,d)[l]||1,m=this.$d.getTime()+r*M;return O.w(m,this)},m.subtract=function(t,e){return this.add(-1*t,e)},m.format=function(t){var e=this,n=this.$locale();if(!this.isValid())return n.invalidDate||$;var r=t||"YYYY-MM-DDTHH:mm:ssZ",i=O.z(this),s=this.$H,u=this.$m,a=this.$M,o=n.weekdays,f=n.months,h=function(t,n,i,s){return t&&(t[n]||t(e,r))||i[n].substr(0,s)},c=function(t){return O.s(s%12||12,t,"0")},d=n.meridiem||function(t,e,n){var r=t<12?"AM":"PM";return n?r.toLowerCase():r},l={YY:String(this.$y).slice(-2),YYYY:this.$y,M:a+1,MM:O.s(a+1,2,"0"),MMM:h(n.monthsShort,a,f,3),MMMM:h(f,a),D:this.$D,DD:O.s(this.$D,2,"0"),d:String(this.$W),dd:h(n.weekdaysMin,this.$W,o,2),ddd:h(n.weekdaysShort,this.$W,o,3),dddd:o[this.$W],H:String(s),HH:O.s(s,2,"0"),h:c(1),hh:c(2),a:d(s,u,!0),A:d(s,u,!1),m:String(u),mm:O.s(u,2,"0"),s:String(this.$s),ss:O.s(this.$s,2,"0"),SSS:O.s(this.$ms,3,"0"),Z:i};return r.replace(y,(function(t,e){return e||l[t]||i.replace(":","")}))},m.utcOffset=function(){return 15*-Math.round(this.$d.getTimezoneOffset()/15)},m.diff=function(r,d,$){var l,y=O.p(d),M=w(r),m=(M.utcOffset()-this.utcOffset())*e,g=this-M,D=O.m(this,M);return D=(l={},l[c]=D/12,l[f]=D,l[h]=D/3,l[o]=(g-m)/6048e5,l[a]=(g-m)/864e5,l[u]=g/n,l[s]=g/e,l[i]=g/t,l)[y]||g,$?D:O.a(D)},m.daysInMonth=function(){return this.endOf(f).$D},m.$locale=function(){return v[this.$L]},m.locale=function(t,e){if(!t)return this.$L;var n=this.clone(),r=S(t,e,!0);return r&&(n.$L=r),n},m.clone=function(){return O.w(this.$d,this)},m.toDate=function(){return new Date(this.valueOf())},m.toJSON=function(){return this.isValid()?this.toISOString():null},m.toISOString=function(){return this.$d.toISOString()},m.toString=function(){return this.$d.toUTCString()},M}(),b=_.prototype;return w.prototype=b,[["$ms",r],["$s",i],["$m",s],["$H",u],["$W",a],["$M",f],["$y",c],["$D",d]].forEach((function(t){b[t[1]]=function(e){return this.$g(e,t[0],t[1])}})),w.extend=function(t,e){return t.$i||(t(e,_,w),t.$i=!0),w},w.locale=S,w.isDayjs=p,w.unix=function(t){return w(1e3*t)},w.en=v[D],w.Ls=v,w.p={},w}));
\ No newline at end of file
diff --git a/src/css/map-view.css b/src/css/map-view.css
index 967c38e33..d30d7edf4 100644
--- a/src/css/map-view.css
+++ b/src/css/map-view.css
@@ -103,7 +103,7 @@
 /* hide the credits until we can find a better placement for them */
 .cesium-widget-credits, .cesium-credit-lightbox-overlay {
   display: none !important;
-} 
+}
 
 
 /*****************************************************************************************
@@ -125,10 +125,11 @@
   display: grid;
   box-sizing: border-box;
 }
+
 /* On larger screens, the toolbar should 'squish' the map, not overlap it */
 @media only screen and (min-width: 768px) {
-  .map-view{
-    grid-template-columns: auto minmax(0,100%);
+  .map-view {
+    grid-template-columns: auto minmax(0, 100%);
     justify-content: start;
   }
 }
@@ -144,6 +145,7 @@
   width: 100%;
   height: 100%;
 }
+
 /* So the map widget is underneath the links/tabs on larger screens (the toolbar should 'squish' the map, not overlap it) */
 @media only screen and (min-width: 768px) {
   .map-view__map-widget-container {
@@ -170,6 +172,7 @@
   /* required to be placed above map widget in firefox: */
   z-index: 1;
 }
+
 /* On large screens, the toolbar should not overlap the map, it should squish it */
 @media only screen and (min-width: 768px) {
   .map-view__toolbar-container {
@@ -447,7 +450,7 @@ represents 1 unit of the given distance measurement. */
   opacity: 0.8;
 }
 
-.layer-item__icon > svg {
+.layer-item__icon>svg {
   height: 100%;
   width: auto;
 }
@@ -692,7 +695,11 @@ other class: .ui-slider-range */
  *
  * Feature Info
  *
- * The box that shows more information about a feature that a user clicks
+ * The box that shows more information about a feature that a user clicks. The content is
+ * formatted according to a configurable template. Available templates include:
+ *
+ *     - table: A 2 column table that lists the key and value for each of the properties in a feature
+ *     - story: Intended to display a user friendly summary of the data in the feature. Includes a title, sub-title, description, image and link.
  *
  */
 
@@ -701,12 +708,12 @@ other class: .ui-slider-range */
   border-top-right-radius: var(--map-border-radius);
   border-top-left-radius: var(--map-border-radius);
   padding: 1rem 0.8rem 1rem 0.8rem;
-  row-gap: 1rem;
+  row-gap: 0.8rem;
   background-color: var(--map-col-bkg-lighter);
   color: var(--map-col-text);
   box-shadow: var(--map-shadow-md);
   grid-template-columns: auto 2.5rem;
-  grid-template-rows: min-content 1fr min-content;
+  grid-template-rows: min-content auto min-content;
   justify-items: center;
   /* Don't show the details panel unless it also has the feature-info--open class */
   display: none;
@@ -726,7 +733,6 @@ other class: .ui-slider-range */
   font-weight: 500;
   font-size: 0.9rem;
   opacity: 60%;
-  padding-left: 2.5rem;
 }
 
 .feature-info__content {
@@ -735,7 +741,7 @@ other class: .ui-slider-range */
   grid-template-columns: 100%;
   gap: 1rem;
   grid-column: 1 / 3;
-  padding-bottom: 1rem;
+  padding-bottom: 0.5rem;
   overflow: scroll;
 }
 
@@ -747,12 +753,19 @@ other class: .ui-slider-range */
   justify-self: end;
 }
 
+.feature-info__layer-details-button {
+  grid-column: 1 / 3;
+}
+
+
+/* styles for the (default) table template */
+
 .feature-info__table {
   /* TODO: use colour vars */
   background-color: var(--map-col-bkg-lightest);
   border-radius: var(--map-border-radius);
   box-shadow: var(--map-shadow-md);
-  width: calc(var(--map-width-toolbar) - 4rem);
+  width: calc(var(--map-width-toolbar) - 2.2rem);
 }
 
 .feature-info__table-body {}
@@ -771,13 +784,47 @@ other class: .ui-slider-range */
   padding: 0.6rem;
   overflow-wrap: break-word;
   word-wrap: break-word;
-  max-width: calc( (var(--map-width-toolbar)/2) - 1rem );
+  max-width: calc((var(--map-width-toolbar)/2) - 1rem);
 }
 
-.feature-info__layer-details-button {
-  grid-column: 1 / 3;
+/* styles for the story template */
+
+.feature-info__thumbnail {
+  min-width: 6rem;
+  min-height: 6rem;
+  max-width: 50%;
+  float: right;
+  margin: 0.3rem;
+  border-radius: var(--map-border-radius);
+  box-shadow: var(--map-shadow-md);
+
+}
+
+.feature-info__subtitle {
+  font-size: 0.9em;
+  text-transform: uppercase;
+  display: block;
+  opacity: 0.85;
+  margin: 0;
+  padding: 0;
+}
+
+.feature-info__description {
+  margin: 0.55rem 0;
+  font-size: 0.9rem;
+  line-height: 1.4rem;
+}
+
+.feature-info__link {
+  text-transform: uppercase;
+  font-size: 0.9rem;
+  display: flex;
+  align-items: center;
+  font-weight: bold;
+  text-decoration: none;
 }
 
+
 /*****************************************************************************************
  *
  * Map Legend
@@ -786,17 +833,17 @@ other class: .ui-slider-range */
  *
  */
 
-.map-legend--preview{
+.map-legend--preview {
   height: 1.2rem;
   width: 100%
 }
 
-.map-legend__svg--preview{
+.map-legend__svg--preview {
   height: 100%;
   width: auto;
 }
 
-.map-legend__img--preview{
+.map-legend__img--preview {
   --img-overflow: 0.8rem;
   /* allow images previews to bleed into the padding a little, so that more detail is visible */
   height: calc(100% + var(--img-overflow));
@@ -806,5 +853,4 @@ other class: .ui-slider-range */
   box-shadow: var(--map-shadow-md);
   /* imagery appears lighter on the map */
   filter: brightness(1.75);
-}
-
+}
\ No newline at end of file
diff --git a/src/js/models/maps/Feature.js b/src/js/models/maps/Feature.js
index 2c81d2bb9..b70718121 100644
--- a/src/js/models/maps/Feature.js
+++ b/src/js/models/maps/Feature.js
@@ -46,7 +46,7 @@ define(
          * @property {*} featureObject The object that a Map widget uses to represent this
          * feature in the map. For example, in Cesium this could be a
          * Cesium.Cesium3DTileFeature or a Cesium.Entity.
-         * @property {string} label An optional friendly label for this feature.
+         * @property {string} label An optional friendly label or name for this feature.
         */
         defaults: function () {
           return {
diff --git a/src/js/models/maps/assets/Cesium3DTileset.js b/src/js/models/maps/assets/Cesium3DTileset.js
index 6af184c75..36103484f 100644
--- a/src/js/models/maps/assets/Cesium3DTileset.js
+++ b/src/js/models/maps/assets/Cesium3DTileset.js
@@ -314,17 +314,17 @@ define(
          */
         getPropertiesFromFeature(feature) {
           try {
-            const properties = {};
+            let properties = {};
             feature.getPropertyNames().forEach(function (propertyName) {
               properties[propertyName] = feature.getProperty(propertyName)
             })
+            properties = this.addCustomProperties(properties)
             return properties
           }
           catch (error) {
             console.log(
               'There was an error getting properties from a A Cesium 3D Tile feature' +
-              '. Error details: ' + error +
-              '. Returning an empty object.'
+              '. Error details: ' + error + '. Returning an empty object.'
             );
             return {}
           }
diff --git a/src/js/models/maps/assets/CesiumVectorData.js b/src/js/models/maps/assets/CesiumVectorData.js
index bb3c24f4a..9380562d1 100644
--- a/src/js/models/maps/assets/CesiumVectorData.js
+++ b/src/js/models/maps/assets/CesiumVectorData.js
@@ -252,6 +252,7 @@ define(
             if (featureProps) {
               properties = feature.properties.getValue(new Date())
             }
+            properties = this.addCustomProperties(properties)
             return properties
           }
           catch (error) {
diff --git a/src/js/models/maps/assets/MapAsset.js b/src/js/models/maps/assets/MapAsset.js
index 03f73cb1b..44005b368 100644
--- a/src/js/models/maps/assets/MapAsset.js
+++ b/src/js/models/maps/assets/MapAsset.js
@@ -6,14 +6,16 @@ define(
     'underscore',
     'backbone',
     'models/portals/PortalImage',
-    'models/maps/AssetColorPalette'
+    'models/maps/AssetColorPalette',
+    MetacatUI.root + '/components/dayjs.min.js'
   ],
   function (
     $,
     _,
     Backbone,
     PortalImage,
-    AssetColorPalette
+    AssetColorPalette,
+    dayjs
   ) {
     /**
      * @classdesc A MapAsset Model comprises information required to fetch source data for
@@ -75,6 +77,13 @@ define(
          * attributes of this asset. This applies to raster/imagery and vector assets. For
          * imagery, the colorPalette will be used to create a legend. For vector assets
          * (e.g. 3Dtilesets), it will also be used to style the features.
+         * @property {MapConfig#FeatureTemplate} [featureTemplate] Configuration for
+         * content and layout of the Feature Info panel - the panel that shows information
+         * about a selected feature from a vector asset ({@link FeatureInfoView}).
+         * @property {MapConfig#CustomProperties} [customProperties] Configuration that
+         * allows for the definition of custom feature properties, potentially based on
+         * other properties. For example, a custom property could be a formatted version
+         * of an existing date property.
          * @property {'ready'|'error'|null} [status = null] Set to 'ready' when the
          * resource is loaded and ready to be rendered in a map view. Set to 'error' when
          * the asset is not supported, or there was a problem requesting the resource.
@@ -95,8 +104,10 @@ define(
             opacity: 1,
             visible: true,
             colorPalette: null,
+            customProperties: {},
+            featureTemplate: {},
             status: null,
-            statusDetails: null,
+            statusDetails: null
           }
         },
 
@@ -144,10 +155,126 @@ define(
          * mapped to attributes of this asset. This applies to raster/imagery and vector
          * assets. For imagery, the colorPalette will be used to create a legend. For
          * vector assets (e.g. 3Dtilesets), it will also be used to style the features.
+         * @property {MapConfig#FeatureTemplate} [featureTemplate] Configuration for the
+         * content and layout of the Feature Info panel ({@link FeatureInfoView}) - the
+         * panel that shows information about a selected feature from a vector asset. If
+         * no feature template is set, then the default table layout is used. 
+         * @property {MapConfig#CustomProperties} [customProperties] Definitions of custom
+         * properties of features, potentially based on existing properties. For example,
+         * a custom property could be a formatted version of another date property. These
+         * custom properties can be used in the filters, colorPalette, or featureTemplate.
+         * So far, custom strings and formatted dates are supported. Eventually, the
+         * custom properties may be expanded to support formatted numbers and booleans.
          * @property {MapConfig#VectorFilterConfig} [filters] - A set of conditions used
          * to show or hide specific features of this tileset.
         */
 
+        /**
+         * A feature template configures the format and content of information displayed
+         * in the Feature Info panel ({@link FeatureInfoView}). The Feature Info panel is
+         * displayed in a map when a user clicks on a vector feature in a map.
+         * @typedef {Object} FeatureTemplate
+         * @name MapConfig#FeatureTemplate
+         * @since 2.x.x
+         * @property {'story'|'table'} [template='table'] The name/ID of the template to
+         * use. This must match the name of one of the templates available in
+         * {@link FeatureInfoView#contentTemplates}.
+         * @property {string} [label] Sets which of the feature properties to use as the
+         * title for the FeatureInfoView. The string must exactly match the key for a
+         * property that exists in the feature.
+         * @property {MapConfig#StoryTemplateOptions} [options] A list of key-value pairs
+         * that map the template variable to a property/attribute of the the feature. Keys
+         * are the template variable names and values are the names of properties in the
+         * feature. Template variable names are specific to each template. Currently only
+         * the 'story' template allows variables. These are specified in the
+         * {@link FeatureInfoView#contentTemplates}.
+         * @example
+         * // Use the "story" template, which shows a secondary title, image, description,
+         * // and link.
+         * {
+         *   "template": "story",
+         *   "label": "title",
+         *   "options": {
+         *     "subtitle": "formattedDate",
+         *     "description": "summary",
+         *     "thumbnail": "imageSrc",
+         *     "url": "newsLink",
+         *     "urlText": "newsTitle",
+         *   }
+         * }
+         * @example
+         * // Use the default template (a table), but use the "forestName" attribute for
+         * // the FeatureInfo panel label
+         * {
+         *   "label": "forestName"
+         * }
+         */
+
+        /**
+         * An object that maps template variable to feature properties for the "story"
+         * template.
+         * @typedef {Object}
+         * @name MapConfig#StoryTemplateOptions
+         * @since 2.x.x
+         * @property {string} subtitle The name of a feature property to use for a
+         * secondary title in the template
+         * @property {string} description The name of a feature property that contains a
+         * brief summary or description of the feature; displayed as a paragraph.
+         * @property {string} thumbnail The name of a feature property that contains a URL
+         * for an image. Displayed as a thumbnail next to the description.
+         * @property {string} url The name of a feature property with a URL to use to
+         * create a link (e.g. to learn more information about the given feature)
+         * @property {string} urlText The name of a feature property that has text to
+         * display for the url. Defaults to 'Read More' if none is set.
+         */
+
+        /**
+         * An object where the keys indicate the name/ID of the new custom property to
+         * create, and the values are an object that defines the new property. 
+         * @typedef {Object.<string, (MapConfig#CustomDateProperty|MapConfig#CustomStringProperty)>} CustomProperties
+         * @name MapConfig#CustomProperties
+         * @since 2.x.x
+         * @example
+         * {
+         *   "year": {
+         *     "type": "date",
+         *     "property": "dateTime",
+         *     "format": "YYYY",
+         *   },
+         *   "urlText": {
+         *     "type": "string",
+         *     "value": "Click here to learn more about this feature"
+         *   }
+         * }
+         */
+
+        /**
+         * An object that defines a formatted date to use as a property in a feature. Used
+         * in the {@link MapConfig#CustomProperties} object.
+         * @typedef {Object} CustomDateProperty
+         * @name MapConfig#CustomDateProperty
+         * @since 2.x.x
+         * @property {'date'} type Must be set to 'date' to indicate that this is a custom
+         * date property
+         * @property {string} property The name/ID of the existing date property to format
+         * @property {string} format A string that indicates the new format to use.
+         * Follows the syntax used by Day.JS, see
+         * {@link https://day.js.org/docs/en/display/format}
+         */
+
+        /**
+         * An object that defines a custom string to use as a property in a feature. Used
+         * in the {@link MapConfig#CustomProperties} object.
+         * @typedef {Object} CustomStringProperty
+         * @name MapConfig#CustomStringProperty
+         * @since 2.x.x
+         * @property {'string'} type Must be set to 'string' to indicate that this is a
+         * custom string property
+         * @property {string} value The new string to use. So far only static strings are
+         * available. In the future, templates that include other properties may be
+         * supported.
+         */
+
         /**
          * Executed when a new MapAsset model is created.
          * @param {MapConfig#MapAssetConfig} [assetConfig] The initial values of the
@@ -235,6 +362,160 @@ define(
           return map.get('selectedFeatures').containsFeature(feature)
         },
 
+        /**
+         * Given a set of properties from a Feature from this Map Asset model, add any
+         * custom properties to the properties object and return it.
+         * @since 2.x.x
+         * @param {Object} properties A set of key-value pairs representing the existing
+         * properties of a feature from this asset.
+         * @returns {Object} The properties object with any custom properties added.
+         */
+        addCustomProperties: function (properties) {
+          try {
+
+            const model = this;
+            const customProperties = model.get('customProperties');
+            const formattedProperties = {};
+
+            if (!customProperties || !Object.keys(customProperties).length) {
+              return properties
+            }
+
+            if (!properties || typeof properties !== 'object') {
+              properties = {}
+            }
+
+            if (customProperties) {
+              _.each(customProperties, function (config, key) {
+                let formattedValue = '';
+                if (config.type === 'date') {
+                  formattedValue = model.formatDateProperty(config, properties)
+                  // TODO: support formatted numbers and booleans...
+                  // } else if (config.type === 'number') {
+                  //   formattedValue = model.formatNumberProperty(config, properties)
+                  // } else if (config.type === 'boolean') {
+                  //   formattedValue = model.formatBooleanProperty(config, properties)
+                } else {
+                  formattedValue = model.formatStringProperty(config, properties)
+                }
+                formattedProperties[key] = formattedValue;
+              });
+            }
+            // merge the properties with the formatted properties
+            return Object.assign(properties, formattedProperties);
+          } catch (error) {
+            console.log(
+              'There was an error adding custom properties. Returning properties ' +
+              'unchanged. Error details: ' +
+              error
+            );
+            return properties
+          }
+        },
+
+        /**
+         * Given a definition for a new date property, and the properties that already
+         * exist on a specific feature, returns a new string with the formatted date.
+         * @since 2.x.x
+         * @param {MapConfig#CustomDateProperty} config - An object that defines the new
+         * date property to create
+         * @param {Object} properties key-value pairs representing existing properties in
+         * a Feature
+         * @returns {string} The value for the new date property, formatted as defined by
+         * config, for the given feature
+         */
+        formatDateProperty: function (config, properties) {
+          try {
+            if (!properties) {
+              properties = {}
+            }
+            let formattedDate = ''
+            if (!config || !config.format) {
+              return formattedDate;
+            }
+            const value = properties[config.property];
+            if (value) {
+              formattedDate = dayjs(value).format(config.format);
+            }
+            return formattedDate;
+          }
+          catch (error) {
+            console.log(
+              'There was an error formatting a date for a Feature model' +
+              '. Error details: ' + error
+            );
+            return '';
+          }
+        },
+
+        /**
+         * For a given set of Feature properties and a definition for a new sting
+         * property, returns the value of the custom property. Note that since only static
+         * strings are supported so far, this function essentially just returns the value
+         * of config.value. This function exists to allow support of dynamic strings in
+         * the future (e.g. combining strings from existing properties)
+         * @since 2.x.x
+         * @param {MapConfig#CustomStringProperty} config The object the defines the new
+         * custom property
+         * @param {Object} properties key-value pairs representing existing properties in
+         * a Feature
+         * @returns {string} The new string for the given Feature property
+         */
+        formatStringProperty: function (config, properties) {
+          try {
+            if (!properties) {
+              properties = {}
+            }
+            let formattedString = ''
+            if (!config || !config.value) {
+              return formattedString;
+            }
+            formattedString = config.value;
+            return formattedString;
+          }
+          catch (error) {
+            console.log(
+              'There was an error formatting a string for a Feature model' +
+              '. Error details: ' + error
+            );
+            return '';
+          }
+        },
+
+        // formatNumberProperty: function (config, properties) {
+        //   try {
+        //     if (!properties) {
+        //       properties = {}
+        //     }
+        //     let formattedNumber = ''
+        //     // TODO...
+        //   }
+        //   catch (error) {
+        //     console.log(
+        //       'There was an error formatting a number for a Feature model' +
+        //       '. Error details: ' + error
+        //     );
+        //     return '';
+        //   }
+        // },
+
+        // formatBooleanProperty: function (config, properties) {
+        //   try {
+        //     if (!properties) {
+        //       properties = {}
+        //     }
+        //     let formattedBoolean = ''
+        //     // TODO...
+        //   }
+        //   catch (error) {
+        //     console.log(
+        //       'There was an error formatting a boolean for a Feature model' +
+        //       '. Error details: ' + error
+        //     );
+        //     return '';
+        //   }
+        // },
+
         /**
          * Sanitizes an SVG string and updates the model's 'icon' attribute the sanitized
          * string. Also sets the 'iconStatus' attribute to 'success'.
diff --git a/src/js/templates/maps/feature-info.html b/src/js/templates/maps/feature-info.html
deleted file mode 100644
index bb3181b2e..000000000
--- a/src/js/templates/maps/feature-info.html
+++ /dev/null
@@ -1,22 +0,0 @@
-
-<h5 class="feature-info__label"><%= title %></h5>
-<button class="<%= classes.toggle %> map-view__button"><i class="icon-remove"></i></button>
-
-<div class="feature-info__content">
-  <% if(properties) { %>
-    <table class="feature-info__table">
-      <tbody class="feature-info__table-body">
-        <% for (const [key, value] of Object.entries(properties)) { %>
-          <tr class="feature-info__table-row">
-            <td class="feature-info__table-cell"><%= key %></td>
-            <td class="feature-info__table-cell"><%= value %></td>
-          </tr>
-        <% } %>
-      </tbody>
-    </table>
-  <% } %>
-</div>
-
-<% if(showLayerDetailsButton) { %>
-  <button class="<%= classes.layerDetailsButton %> map-view__button">See Layer Details</button>
-<% } %>
\ No newline at end of file
diff --git a/src/js/templates/maps/feature-info/feature-info.html b/src/js/templates/maps/feature-info/feature-info.html
new file mode 100644
index 000000000..ba2c5afba
--- /dev/null
+++ b/src/js/templates/maps/feature-info/feature-info.html
@@ -0,0 +1,7 @@
+
+<h5 class="feature-info__label"></h5>
+<button class="<%= classes.toggle %> map-view__button"><i class="icon-remove"></i></button>
+
+<iframe class="feature-info__content"></iframe>
+
+<button class="<%= classes.layerDetailsButton %> map-view__button">See Layer Details</button>
\ No newline at end of file
diff --git a/src/js/templates/maps/feature-info/story.html b/src/js/templates/maps/feature-info/story.html
new file mode 100644
index 000000000..1bc842ec9
--- /dev/null
+++ b/src/js/templates/maps/feature-info/story.html
@@ -0,0 +1,17 @@
+<div>
+<% if(thumbnail) { %>
+  <img class="feature-info__thumbnail" src="<%= thumbnail %>"/>
+<% } %>
+
+<% if(subtitle) { %>
+  <h5 class="feature-info__subtitle"><%= subtitle %></h5>
+<% } %>
+
+<% if(description) { %>
+  <p class="feature-info__description"><%= description %></p>
+<% } %>
+
+<% if(url) { %>
+  <a class="feature-info__link" href="<%= url %>" target="_blank"><%= urlText || "Read More" %></a>
+<% } %>
+</div>
\ No newline at end of file
diff --git a/src/js/templates/maps/feature-info/table.html b/src/js/templates/maps/feature-info/table.html
new file mode 100644
index 000000000..22ae74f73
--- /dev/null
+++ b/src/js/templates/maps/feature-info/table.html
@@ -0,0 +1,12 @@
+<% if(properties) { %>
+  <table class="feature-info__table">
+    <tbody class="feature-info__table-body">
+      <% for (const [key, value] of Object.entries(properties)) { %>
+        <tr class="feature-info__table-row">
+          <td class="feature-info__table-cell"><%= key %></td>
+          <td class="feature-info__table-cell"><%= value %></td>
+        </tr>
+      <% } %>
+    </tbody>
+  </table>
+<% } %>
\ No newline at end of file
diff --git a/src/js/views/maps/FeatureInfoView.js b/src/js/views/maps/FeatureInfoView.js
index daf4756d9..7a7dd16d2 100644
--- a/src/js/views/maps/FeatureInfoView.js
+++ b/src/js/views/maps/FeatureInfoView.js
@@ -7,7 +7,7 @@ define(
     'underscore',
     'backbone',
     'models/maps/Feature',
-    'text!templates/maps/feature-info.html'
+    'text!templates/maps/feature-info/feature-info.html'
   ],
   function (
     $,
@@ -20,12 +20,13 @@ define(
     /**
     * @class FeatureInfoView
     * @classdesc An info-box / panel that shows more details about a specific geo-spatial
-    * feature that is highlighted or in focus in a Map View. Details displayed include a
-    * table of attributes that are set on that feature, and a link to view more
-    * information about the Map Asset (e.g. 3D tileset) that contains the feature. The
-    * title of the panel will use the value of the feature's 'name', 'title', 'id', or
-    * 'identifier' property, if it has one (case insensitive). Otherwise, it will use the
-    * 'assetId' in the Feature model (an ID used by the map widget.)
+    * feature that is highlighted or in focus in a Map View, as specified by a given
+    * {@link Feature} model. The format and content of the info-box varies based on which
+    * template is configured in the parent {@link MapAsset} model, but at a minimum a link
+    * is included that opens the associated {@link LayerInfoView}. Unless otherwise
+    * configured, the title of the panel will use the value of the feature's 'name',
+    * 'title', 'id', 'identifier', or 'assetId' property, if it has one (case
+    * insensitive).
     * @classcategory Views/Maps
     * @name FeatureInfoView
     * @extends Backbone.View
@@ -59,6 +60,40 @@ define(
          */
         template: _.template(Template),
 
+        /**
+         * A ContentTemplate object specifies a single template designed to render
+         * information about the Feature.
+         * @typedef {Object} ContentTemplate
+         * @since 2.x.x
+         * @property {string} [name] - An identifier for this template.
+         * @property {string[]} [options] - The list of keys (option names) that are
+         * allowed for the given template. Only options with these keys will be passed to
+         * the underscore.js template, regardless of what is configured in the
+         * {@link MapConfig#FeatureTemplate}. When no options are specified, then the
+         * entire Feature model will be passed to the template as JSON.
+         * @property {string} template - The path to the HTML template. This will be used
+         * with require() to load the template as needed.
+         */
+
+        /**
+         * The list of available templates that format information about the Feature. The
+         * last template in the list is the default template. It will be used when a
+         * matching template is not found or one is not specified.
+         * @type {ContentTemplate[]}
+         * @since 2.x.x
+         */
+        contentTemplates: [
+          {
+            name: 'story',
+            template: 'text!templates/maps/feature-info/story.html',
+            options: ['title', 'subtitle', 'description', 'thumbnail', 'url', 'urlText']
+          },
+          {
+            name: 'table',
+            template: 'text!templates/maps/feature-info/table.html'
+          }
+        ],
+
         /**
         * Creates an object that gives the events this view will listen to and the
         * associated function to call. Each entry in the object has the format 'event
@@ -85,11 +120,17 @@ define(
          * @property {string} layerDetailsButton The layer details button is added to the
          * view when the selected feature is associated with a layer (a MapAsset like a 3D
          * tileset). When clicked, it opens the LayerDetailsView for that layer.
+         * @property {string} contentContainer The iframe that holds the content rendered
+         * by the {@link FeatureInfoView#ContentTemplate}
+         * @property {string} title The label/title at the very top of the Feature panel,
+         * next to the close button.
          */
         classes: {
           open: 'feature-info--open',
           toggle: 'feature-info__toggle',
-          layerDetailsButton: 'feature-info__layer-details-button'
+          layerDetailsButton: 'feature-info__layer-details-button',
+          contentContainer: 'feature-info__content',
+          title: 'feature-info__label'
         },
 
         /**
@@ -125,22 +166,75 @@ define(
 
           try {
 
+            const view = this
+            const classes = view.classes
+
             // Show the feature info box as open if the view is set to have it open
             // already
-            if (this.isOpen) {
-              this.el.classList.add(this.classes.open);
+            if (view.isOpen) {
+              view.el.classList.add(view.classes.open);
             }
 
-            this.renderContent()
+            // Insert the principal template into the view
+            view.$el.html(view.template({
+              classes: classes
+            }));
+
+            const iFrame = view.el
+              .querySelector('.' + classes.contentContainer);
+
+            // Select the iFrame 
+            const iFrameDoc = iFrame
+              .contentWindow
+              .document
+
+            // Add a script that gets all of the CSS stylesheets from the parent and
+            // applies them within the iFrame. Create a div within the iFrame to hold the 
+            // feature info template content.
+            iFrameDoc.open();
+            iFrameDoc.write(`
+              <div id="content"></div>
+              <script type="text/javascript">
+              window.onload = function() {
+                  if (parent) {
+                      var h = document.getElementsByTagName("head")[0];
+                      var ss = parent.document.getElementsByTagName("style");
+                      for (var i = 0; i < ss.length; i++)
+                          h.appendChild(ss[i].cloneNode(true));
+                  }
+              }
+              </script>
+              <style>
+                body {
+                  background-color: transparent;
+                  color: var(--map-col-text);
+                  font-family: "Helvetica Nueue", "Helvetica", "Arial", "Lato", "sans serif";
+                  margin: 0;
+                  box-sizing: border-box;
+                }
+              </style>
+            `);
+            iFrameDoc.close();
+
+            // Identify the elements from the template that will be updated when the 
+            // Feature model changes
+            view.elements = {
+              title: view.el.querySelector('.' + classes.title),
+              iFrame: iFrame,
+              iFrameContentContainer: iFrameDoc.getElementById('content'),
+              layerDetailsButton: view.el.querySelector('.' + classes.layerDetailsButton),
+            }
+
+            view.update();
 
             // Ensure the view's main element has the given class name
-            this.el.classList.add(this.className);
+            view.el.classList.add(view.className);
 
             // When the model changes, update the view
-            this.stopListening(this.model, 'change')
-            this.listenTo(this.model, 'change', this.update)
+            view.stopListening(view.model, 'change')
+            view.listenTo(view.model, 'change', view.update)
 
-            return this
+            return view
 
           }
           catch (error) {
@@ -152,38 +246,138 @@ define(
         },
 
         /**
-         * Render or re-render the attributes table and layer details button.
+         * Updates the view with information from the current Feature model
+         */
+        updateContent: function () {
+
+          try {
+
+            // Elements to update
+            const title = this.getFeatureTitle()
+            const iFrame = this.elements.iFrame
+            const iFrameDiv = this.elements.iFrameContentContainer
+            const layerDetailsButton = this.elements.layerDetailsButton
+            const mapAsset = this.model.get('mapAsset')
+            let mapAssetLabel = mapAsset ? mapAsset.get('label') : null
+            const buttonDisplay = mapAsset ? null : 'none'
+            const buttonText = 'See ' + mapAssetLabel + ' Layer Details'
+
+            // Insert the title into the title element
+            this.elements.title.innerHTML = title
+
+            // Update the iFrame content
+            iFrame.height = 0;
+            this.getContent().then(function (html) {
+              iFrameDiv.innerHTML = html;
+              const maxHeight = window.innerHeight - 275;
+              const scrollHeight = iFrame.contentWindow.document.body.scrollHeight + 5;
+              iFrame.height = scrollHeight > maxHeight ? maxHeight : scrollHeight;
+            })
+
+            // Show or hide the layer details button, update the text
+            layerDetailsButton.style.display = buttonDisplay
+            layerDetailsButton.innerText = buttonText
+
+          }
+          catch (error) {
+            console.log(
+              'There was an error rendering the content of a FeatureInfoView' +
+              '. Error details: ' + error
+            );
+          }
+        },
+
+        /**
+         * Get the inner HTML content to insert into the iFrame. The content will vary
+         * based on the feature and if there is a template set on the parent Map Asset
+         * model.
+         * @since 2.x.x
+         * @returns {Promise|null} Returns a promise that resolves to the content HTML
+         * when ready, otherwise null
          */
-        renderContent: function () {
+        getContent: function () {
           try {
-            const classes = this.classes;
-            let title = 'Feature';
-            let properties = null;
-            let showLayerDetailsButton = false;
+
+            let content = null;
+            let templateOptions = this.model.toJSON();
+            const mapAsset = this.model.get('mapAsset')
+            const featureProperties = this.model.get('properties')
+            const templateConfig = mapAsset ? mapAsset.get('featureTemplate') : null
+            const propertyMap = templateConfig ? templateConfig.options : {}
+            const templateName = templateConfig ? templateConfig.template : null;
+            const contentTemplates = this.contentTemplates;
+
+            // Given the name of a template configured in the MapAsset model, find the
+            // matching template from the contentTemplates set on this view
+            let contentTemplate = contentTemplates.find(
+              template => template.name == templateName
+            );
+            if (!contentTemplate) {
+              contentTemplate = contentTemplates[contentTemplates.length - 1];
+            }
+
+            // To get variables to pass to the template, there must be properties set on
+            // the feature and the selected content template must accept options
+            if (
+              contentTemplate && contentTemplate.options &&
+              templateConfig && templateConfig.options
+            ) {
+              templateOptions = {}
+              contentTemplate.options.forEach(function (prop) {
+                const key = propertyMap[prop]
+                templateOptions[prop] = featureProperties[key] || ''
+              })
+            }
+
+            // Return a promise that resolves to the content HTML
+            return new Promise(function (resolve, reject) {
+              if (contentTemplate) {
+                require([contentTemplate.template], function (template) {
+                  content = _.template(template)(templateOptions);
+                  resolve(content);
+                })
+              } else {
+                resolve(null);
+              }
+            })
+
+          }
+          catch (error) {
+            console.log(
+              'There was an error getting the content of a FeatureInfoView' +
+              '. Error details: ' + error
+            );
+          }
+        },
+
+        /**
+         * Create a title for the feature info box
+         * @since 2.x.x
+         * @returns {string} The title for the feature info box
+         */
+        getFeatureTitle: function () {
+          try {
+            let title = '';
+            let suffix = '';
 
             if (this.model) {
 
               // Get the layer/mapAsset model
               const mapAsset = this.model.get('mapAsset')
-              // Get the properties to show in the table
-              properties = this.model.get('properties') ?? {}
 
-              // Show a link to open the details for the feature's parent layer
-              if (mapAsset) {
-                showLayerDetailsButton = true;
-              }
+              const featureTemplate = mapAsset ? mapAsset.get('featureTemplate') : null;
+              const properties = this.model.get('properties') ?? {};
+              const assetName = mapAsset ? mapAsset.get('label') : null;
+              let name = featureTemplate ? properties[featureTemplate.label] : this.model.get('label');
 
-              // Create a title for the feature info box
-              let label = mapAsset ? mapAsset.get('label') : null;
+              // Build a title if the feature has no label. Check if the feature has a name,
+              // title, ID, or identifier property. Search for these properties independent
+              // of case. If none of these properties exist, use the feature ID provided by
+              // the model.
+              if (!name) {
 
-              // If the feature has a label, use that in the title
-              let name = this.model.get('label')
+                title = 'Feature';
 
-              // If no feature label, check if the feature has a name, title, ID, or
-              // identifier property. Search for these properties independent of case. If
-              // none of these properties exist, use the feature ID provided by the model.
-              if (!name) {
-                
                 let searchKeys = ['name', 'title', 'id', 'identifier']
                 searchKeys = searchKeys.map(key => key.toLowerCase());
                 const propKeys = Object.keys(properties)
@@ -200,32 +394,36 @@ define(
                 const nameKey = propKeys[propKeysLower.indexOf(nameKeyLower)]
 
                 name = properties[nameKey] ?? this.model.get('featureID');
-              }
 
+                if (assetName) {
+                  suffix = ' from ' + assetName + ' Layer'
+                }
 
+              }
               if (name) {
                 title = title + ' ' + name
               }
-
-              if (label) {
-                title = title + ' from ' + label + ' Layer'
+              if (suffix) {
+                title = title + suffix
               }
 
             }
 
-            // Insert the template into the view
-            this.$el.html(this.template({
-              classes: classes,
-              title: title,
-              properties: properties,
-              showLayerDetailsButton: showLayerDetailsButton
-            }));
+            // Do some basic sanitization of the title
+            title = title.replace(/&/g, '&amp;')
+            title = title.replace(/</g, '&lt;')
+            title = title.replace(/>/g, '&gt;')
+            title = title.replace(/"/g, '&quot;')
+            title = title.replace(/'/g, '&#039;')
+
+            return title
           }
           catch (error) {
             console.log(
-              'There was an error rendering the content of a FeatureInfoView' +
+              'There was an error making a title for the FeatureInfoView' +
               '. Error details: ' + error
             );
+            return 'Feature'
           }
         },
 
@@ -300,7 +498,7 @@ define(
               }
             } else {
               this.open()
-              this.renderContent()
+              this.updateContent()
             }
           }
           catch (error) {