terriajs

<!DOCTYPE html> <html lang="en" class="no-js"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> <meta http-equiv="x-ua-compatible" content="ie=edge"> <meta name="lang:clipboard.copy" content="Copy to clipboard"> <meta name="lang:clipboard.copied" content="Copied to clipboard"> <meta name="lang:search.language" content="en"> <meta name="lang:search.result.none" content="No matching documents"> <meta name="lang:search.result.one" content="1 matching document"> <meta name="lang:search.result.other" content="# matching documents"> <meta name="lang:search.tokenizer" content="[\s\-]+"> <link rel="shortcut icon" href="../../../assets/images/favicon.png"> <meta name="generator" content="mkdocs-0.17.2, mkdocs-material-2.2.3"> <title>Feature Information Template - TerriaJS</title> <link rel="stylesheet" href="../../../assets/stylesheets/application.bcabdff3.css"> <script src="../../../assets/javascripts/modernizr.1aa3b519.js"></script> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,400i,700|Roboto+Mono"> <style>body,input{font-family:"Roboto","Helvetica Neue",Helvetica,Arial,sans-serif}code,kbd,pre{font-family:"Roboto Mono","Courier New",Courier,monospace}</style> <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"> </head> <body> <svg class="md-svg"> <defs> </defs> </svg> <input class="md-toggle" data-md-toggle="drawer" type="checkbox" id="drawer"> <input class="md-toggle" data-md-toggle="search" type="checkbox" id="search"> <label class="md-overlay" data-md-component="overlay" for="drawer"></label> <header class="md-header" data-md-component="header"> <nav class="md-header-nav md-grid"> <div class="md-flex"> <div class="md-flex__cell md-flex__cell--shrink"> <a href="../../.." title="TerriaJS" class="md-header-nav__button md-logo"> <img src="../../../terria.png" width="24" height="24"> </a> </div> <div class="md-flex__cell md-flex__cell--shrink"> <label class="md-icon md-icon--menu md-header-nav__button" for="drawer"></label> </div> <div class="md-flex__cell md-flex__cell--stretch"> <div class="md-flex__ellipsis md-header-nav__title" data-md-component="title"> <span class="md-header-nav__topic"> TerriaJS </span> <span class="md-header-nav__topic"> Feature Information Template </span> </div> </div> <div class="md-flex__cell md-flex__cell--shrink"> <label class="md-icon md-icon--search md-header-nav__button" for="search"></label> <div class="md-search" data-md-component="search" role="dialog"> <label class="md-search__overlay" for="search"></label> <div class="md-search__inner"> <form class="md-search__form" name="search"> <input type="text" class="md-search__input" name="query" required placeholder="Search" autocapitalize="off" autocorrect="off" autocomplete="off" spellcheck="false" data-md-component="query"> <label class="md-icon md-search__icon" for="search"></label> <button type="reset" class="md-icon md-search__icon" data-md-component="reset"></button> </form> <div class="md-search__output"> <div class="md-search__scrollwrap" data-md-scrollfix> <div class="md-search-result" data-md-component="result"> <div class="md-search-result__meta"> Type to start searching </div> <ol class="md-search-result__list"></ol> </div> </div> </div> </div> </div> </div> </div> </nav> </header> <div class="md-container"> <main class="md-main"> <div class="md-main__inner md-grid" data-md-component="container"> <div class="md-sidebar md-sidebar--primary" data-md-component="navigation"> <div class="md-sidebar__scrollwrap"> <div class="md-sidebar__inner"> <nav class="md-nav md-nav--primary" data-md-level="0"> <label class="md-nav__title md-nav__title--site" for="drawer"> <span class="md-nav__button md-logo"> <img src="../../../terria.png" width="24" height="24"> </span> TerriaJS </label> <ul class="md-nav__list" data-md-scrollfix> <li class="md-nav__item"> <a href="../../.." title="Home" class="md-nav__link"> Home </a> </li> <li class="md-nav__item"> <a href="../../../getting-started/" title="Getting Started" class="md-nav__link"> Getting Started </a> </li> <li class="md-nav__item md-nav__item--nested"> <input class="md-toggle md-nav__toggle" data-md-toggle="nav-3" type="checkbox" id="nav-3"> <label class="md-nav__link" for="nav-3"> Customizing </label> <nav class="md-nav" data-md-component="collapsible" data-md-level="1"> <label class="md-nav__title" for="nav-3"> Customizing </label> <ul class="md-nav__list" data-md-scrollfix> <li class="md-nav__item"> <a href="../../../customizing/" title="Overview" class="md-nav__link"> Overview </a> </li> <li class="md-nav__item"> <a href="../../../customizing/client-side-config/" title="Client-side Config" class="md-nav__link"> Client-side Config </a> </li> <li class="md-nav__item"> <a href="../../../customizing/initialization-files/" title="Initialization Files" class="md-nav__link"> Initialization Files </a> </li> <li class="md-nav__item"> <a href="../../../customizing/server-side-config/" title="Server-side Config" class="md-nav__link"> Server-side Config </a> </li> <li class="md-nav__item"> <a href="../../../customizing/skinning/" title="Skinning" class="md-nav__link"> Skinning </a> </li> </ul> </nav> </li> <li class="md-nav__item md-nav__item--active md-nav__item--nested"> <input class="md-toggle md-nav__toggle" data-md-toggle="nav-4" type="checkbox" id="nav-4" checked> <label class="md-nav__link" for="nav-4"> Connecting to Data </label> <nav class="md-nav" data-md-component="collapsible" data-md-level="1"> <label class="md-nav__title" for="nav-4"> Connecting to Data </label> <ul class="md-nav__list" data-md-scrollfix> <li class="md-nav__item"> <a href="../../" title="Overview" class="md-nav__link"> Overview </a> </li> <li class="md-nav__item"> <a href="../../cross-origin-resource-sharing/" title="Cross-Origin Resource Sharing" class="md-nav__link"> Cross-Origin Resource Sharing </a> </li> <li class="md-nav__item"> <a href="../../catalog-groups/" title="Catalog Groups" class="md-nav__link"> Catalog Groups </a> </li> <li class="md-nav__item"> <a href="../../catalog-items/" title="Catalog Items" class="md-nav__link"> Catalog Items </a> </li> <li class="md-nav__item md-nav__item--active md-nav__item--nested"> <input class="md-toggle md-nav__toggle" data-md-toggle="nav-4-5" type="checkbox" id="nav-4-5" checked> <label class="md-nav__link" for="nav-4-5"> Customizing Data Appearance </label> <nav class="md-nav" data-md-component="collapsible" data-md-level="2"> <label class="md-nav__title" for="nav-4-5"> Customizing Data Appearance </label> <ul class="md-nav__list" data-md-scrollfix> <li class="md-nav__item"> <a href="../overview/" title="Overview" class="md-nav__link"> Overview </a> </li> <li class="md-nav__item"> <a href="../imagery-data/" title="Imagery Data" class="md-nav__link"> Imagery Data </a> </li> <li class="md-nav__item"> <a href="../tabular-data/" title="Tabular Data" class="md-nav__link"> Tabular Data </a> </li> <li class="md-nav__item md-nav__item--active"> <input class="md-toggle md-nav__toggle" data-md-toggle="toc" type="checkbox" id="toc"> <label class="md-nav__link md-nav__link--active" for="toc"> Feature Information Template </label> <a href="./" title="Feature Information Template" class="md-nav__link md-nav__link--active"> Feature Information Template </a> <nav class="md-nav md-nav--secondary"> <label class="md-nav__title" for="toc">Table of contents</label> <ul class="md-nav__list" data-md-scrollfix> <li class="md-nav__item"> <a href="#more-details" title="More details" class="md-nav__link"> More details </a> </li> <li class="md-nav__item"> <a href="#formatting-numbers" title="Formatting numbers" class="md-nav__link"> Formatting numbers </a> </li> <li class="md-nav__item"> <a href="#url-encoding-strings" title="URL-encoding strings" class="md-nav__link"> URL-encoding strings </a> </li> <li class="md-nav__item"> <a href="#formatting-dates" title="Formatting dates" class="md-nav__link"> Formatting dates </a> </li> <li class="md-nav__item"> <a href="#time-series-charts" title="Time-series charts" class="md-nav__link"> Time-series charts </a> </li> <li class="md-nav__item"> <a href="#other-supporting-data" title="Other supporting data" class="md-nav__link"> Other supporting data </a> </li> <li class="md-nav__item"> <a href="#more-examples" title="More examples" class="md-nav__link"> More examples </a> </li> </ul> </nav> </li> </ul> </nav> </li> <li class="md-nav__item"> <a href="../../catalog-functions/" title="Catalog Functions" class="md-nav__link"> Catalog Functions </a> </li> <li class="md-nav__item md-nav__item--nested"> <input class="md-toggle md-nav__toggle" data-md-toggle="nav-4-7" type="checkbox" id="nav-4-7"> <label class="md-nav__link" for="nav-4-7"> Catalog Type Details </label> <nav class="md-nav" data-md-component="collapsible" data-md-level="2"> <label class="md-nav__title" for="nav-4-7"> Catalog Type Details </label> <ul class="md-nav__list" data-md-scrollfix> <li class="md-nav__item"> <a href="../../catalog-type-details/abs-itt-dataset-list/" title="ABS ITT (group)" class="md-nav__link"> ABS ITT (group) </a> </li> <li class="md-nav__item"> <a href="../../catalog-type-details/abs-itt/" title="ABS ITT (item)" class="md-nav__link"> ABS ITT (item) </a> </li> <li class="md-nav__item"> <a href="../../catalog-type-details/esri-featureServer-group/" title="ArcGIS FeatureServer (group)" class="md-nav__link"> ArcGIS FeatureServer (group) </a> </li> <li class="md-nav__item"> <a href="../../catalog-type-details/esri-featureServer/" title="ArcGIS FeatureServer (item)" class="md-nav__link"> ArcGIS FeatureServer (item) </a> </li> <li class="md-nav__item"> <a href="../../catalog-type-details/esri-mapServer-group/" title="ArcGIS MapServer (group)" class="md-nav__link"> ArcGIS MapServer (group) </a> </li> <li class="md-nav__item"> <a href="../../catalog-type-details/esri-mapServer/" title="ArcGIS MapServer (item)" class="md-nav__link"> ArcGIS MapServer (item) </a> </li> <li class="md-nav__item"> <a href="../../catalog-type-details/esri-group/" title="ArcGIS Server (group)" class="md-nav__link"> ArcGIS Server (group) </a> </li> <li class="md-nav__item"> <a href="../../catalog-type-details/bing-maps/" title="Bing Maps (item)" class="md-nav__link"> Bing Maps (item) </a> </li> <li class="md-nav__item"> <a href="../../catalog-type-details/csw/" title="Catalog Service for the Web (CSW) (group)" class="md-nav__link"> Catalog Service for the Web (CSW) (group) </a> </li> <li class="md-nav__item"> <a href="../../catalog-type-details/czml/" title="Cesium Language (CZML) (item)" class="md-nav__link"> Cesium Language (CZML) (item) </a> </li> <li class="md-nav__item"> <a href="../../catalog-type-details/cesium-terrain/" title="Cesium Terrain (item)" class="md-nav__link"> Cesium Terrain (item) </a> </li> <li class="md-nav__item"> <a href="../../catalog-type-details/ckan/" title="CKAN (group)" class="md-nav__link"> CKAN (group) </a> </li> <li class="md-nav__item"> <a href="../../catalog-type-details/ckan-resource/" title="CKAN Resource (item)" class="md-nav__link"> CKAN Resource (item) </a> </li> <li class="md-nav__item"> <a href="../../catalog-type-details/csv/" title="Comma-Separated Values (CSV) (item)" class="md-nav__link"> Comma-Separated Values (CSV) (item) </a> </li> <li class="md-nav__item"> <a href="../../catalog-type-details/composite/" title="Composite (item)" class="md-nav__link"> Composite (item) </a> </li> <li class="md-nav__item"> <a href="../../catalog-type-details/ogr/" title="Format Conversion Service (based on OGR) (item)" class="md-nav__link"> Format Conversion Service (based on OGR) (item) </a> </li> <li class="md-nav__item"> <a href="../../catalog-type-details/geojson/" title="GeoJSON (item)" class="md-nav__link"> GeoJSON (item) </a> </li> <li class="md-nav__item"> <a href="../../catalog-type-details/gpx/" title="GPX (item)" class="md-nav__link"> GPX (item) </a> </li> <li class="md-nav__item"> <a href="../../catalog-type-details/group/" title="Group (Manual) (group)" class="md-nav__link"> Group (Manual) (group) </a> </li> <li class="md-nav__item"> <a href="../../catalog-type-details/kml/" title="Keyhole Markup Language (KML) (item)" class="md-nav__link"> Keyhole Markup Language (KML) (item) </a> </li> <li class="md-nav__item"> <a href="../../catalog-type-details/open-street-map/" title="OpenStreetMap (item)" class="md-nav__link"> OpenStreetMap (item) </a> </li> <li class="md-nav__item"> <a href="../../catalog-type-details/places-like-me-function/" title="Places Like Me (function)" class="md-nav__link"> Places Like Me (function) </a> </li> <li class="md-nav__item"> <a href="../../catalog-type-details/sdmx-json/" title="SDMX-JSON (item)" class="md-nav__link"> SDMX-JSON (item) </a> </li> <li class="md-nav__item"> <a href="../../catalog-type-details/sos/" title="Sensor Observation Service (SOS) (item)" class="md-nav__link"> Sensor Observation Service (SOS) (item) </a> </li> <li class="md-nav__item"> <a href="../../catalog-type-details/socrata/" title="Socrata (group)" class="md-nav__link"> Socrata (group) </a> </li> <li class="md-nav__item"> <a href="../../catalog-type-details/spatial-detailing-function/" title="Spatial Detailing (function)" class="md-nav__link"> Spatial Detailing (function) </a> </li> <li class="md-nav__item"> <a href="../../catalog-type-details/terria-json/" title="TerriaJS JSON (function)" class="md-nav__link"> TerriaJS JSON (function) </a> </li> <li class="md-nav__item"> <a href="../../catalog-type-details/url-template/" title="URL Template (item)" class="md-nav__link"> URL Template (item) </a> </li> <li class="md-nav__item"> <a href="../../catalog-type-details/wfs-getCapabilities/" title="Web Feature Service (WFS) (group)" class="md-nav__link"> Web Feature Service (WFS) (group) </a> </li> <li class="md-nav__item"> <a href="../../catalog-type-details/wfs/" title="Web Feature Service (WFS) (item)" class="md-nav__link"> Web Feature Service (WFS) (item) </a> </li> <li class="md-nav__item"> <a href="../../catalog-type-details/wms-getCapabilities/" title="Web Map Service (WMS) (group)" class="md-nav__link"> Web Map Service (WMS) (group) </a> </li> <li class="md-nav__item"> <a href="../../catalog-type-details/wms/" title="Web Map Service (WMS) (item)" class="md-nav__link"> Web Map Service (WMS) (item) </a> </li> <li class="md-nav__item"> <a href="../../catalog-type-details/wps/" title="Web Processing Service (WPS) (function)" class="md-nav__link"> Web Processing Service (WPS) (function) </a> </li> <li class="md-nav__item"> <a href="../../catalog-type-details/wps-getCapabilities/" title="Web Processing Service (WPS) (group)" class="md-nav__link"> Web Processing Service (WPS) (group) </a> </li> <li class="md-nav__item"> <a href="../../catalog-type-details/wfs-features-group/" title="WFS Features (group)" class="md-nav__link"> WFS Features (group) </a> </li> <li class="md-nav__item"> <a href="../../catalog-type-details/why-am-i-special-function/" title="Why Am I Special (function)" class="md-nav__link"> Why Am I Special (function) </a> </li> </ul> </nav> </li> </ul> </nav> </li> <li class="md-nav__item md-nav__item--nested"> <input class="md-toggle md-nav__toggle" data-md-toggle="nav-5" type="checkbox" id="nav-5"> <label class="md-nav__link" for="nav-5"> Deploying </label> <nav class="md-nav" data-md-component="collapsible" data-md-level="1"> <label class="md-nav__title" for="nav-5"> Deploying </label> <ul class="md-nav__list" data-md-scrollfix> <li class="md-nav__item"> <a href="../../../deploying/" title="Overview" class="md-nav__link"> Overview </a> </li> <li class="md-nav__item"> <a href="../../../deploying/deploying-terriamap/" title="Deploying TerriaMap" class="md-nav__link"> Deploying TerriaMap </a> </li> <li class="md-nav__item"> <a href="../../../deploying/deploying-to-aws/" title="Deploying to AWS" class="md-nav__link"> Deploying to AWS </a> </li> <li class="md-nav__item"> <a href="../../../deploying/deploying-with-kubernetes/" title="Deploying with Kubernetes" class="md-nav__link"> Deploying with Kubernetes </a> </li> <li class="md-nav__item"> <a href="../../../deploying/setting-up-a-region-mapping-server/" title="Setting Up a Region Mapping Server" class="md-nav__link"> Setting Up a Region Mapping Server </a> </li> <li class="md-nav__item"> <a href="../../../deploying/setting-up-geoserver/" title="Setting Up Geoserver" class="md-nav__link"> Setting Up Geoserver </a> </li> <li class="md-nav__item"> <a href="../../../deploying/using-as-a-ckan-previewer/" title="Using as a CKAN Previewer" class="md-nav__link"> Using as a CKAN Previewer </a> </li> <li class="md-nav__item"> <a href="../../../deploying/controlling-with-url-parameters/" title="Controlling with URL Parameters" class="md-nav__link"> Controlling with URL Parameters </a> </li> <li class="md-nav__item"> <a href="../../../deploying/controlling-in-an-iframe-or-popup/" title="Controlling in an <iframe> or Popup" class="md-nav__link"> Controlling in an <iframe> or Popup </a> </li> </ul> </nav> </li> <li class="md-nav__item md-nav__item--nested"> <input class="md-toggle md-nav__toggle" data-md-toggle="nav-6" type="checkbox" id="nav-6"> <label class="md-nav__link" for="nav-6"> Contributing </label> <nav class="md-nav" data-md-component="collapsible" data-md-level="1"> <label class="md-nav__title" for="nav-6"> Contributing </label> <ul class="md-nav__list" data-md-scrollfix> <li class="md-nav__item"> <a href="../../../contributing/" title="Overview" class="md-nav__link"> Overview </a> </li> <li class="md-nav__item"> <a href="../../../contributing/development-environment/" title="Development Environment" class="md-nav__link"> Development Environment </a> </li> <li class="md-nav__item"> <a href="../../../contributing/architecture/" title="Architecture" class="md-nav__link"> Architecture </a> </li> <li class="md-nav__item"> <a href="../../../contributing/using-a-custom-version-of-cesium/" title="Using a Custom Version of Cesium" class="md-nav__link"> Using a Custom Version of Cesium </a> </li> <li class="md-nav__item"> <a href="../../../contributing/setting-up-saucelabs/" title="Setting up Saucelabs" class="md-nav__link"> Setting up Saucelabs </a> </li> <li class="md-nav__item"> <a href="../../../contributing/problems-and-solutions/" title="Problems and Solutions" class="md-nav__link"> Problems and Solutions </a> </li> </ul> </nav> </li> </ul> </nav> </div> </div> </div> <div class="md-sidebar md-sidebar--secondary" data-md-component="toc"> <div class="md-sidebar__scrollwrap"> <div class="md-sidebar__inner"> <nav class="md-nav md-nav--secondary"> <label class="md-nav__title" for="toc">Table of contents</label> <ul class="md-nav__list" data-md-scrollfix> <li class="md-nav__item"> <a href="#more-details" title="More details" class="md-nav__link"> More details </a> </li> <li class="md-nav__item"> <a href="#formatting-numbers" title="Formatting numbers" class="md-nav__link"> Formatting numbers </a> </li> <li class="md-nav__item"> <a href="#url-encoding-strings" title="URL-encoding strings" class="md-nav__link"> URL-encoding strings </a> </li> <li class="md-nav__item"> <a href="#formatting-dates" title="Formatting dates" class="md-nav__link"> Formatting dates </a> </li> <li class="md-nav__item"> <a href="#time-series-charts" title="Time-series charts" class="md-nav__link"> Time-series charts </a> </li> <li class="md-nav__item"> <a href="#other-supporting-data" title="Other supporting data" class="md-nav__link"> Other supporting data </a> </li> <li class="md-nav__item"> <a href="#more-examples" title="More examples" class="md-nav__link"> More examples </a> </li> </ul> </nav> </div> </div> </div> <div class="md-content"> <article class="md-content__inner md-typeset"> <h1 id="feature-information-template">Feature Information Template</h1> <p>You can add a <code>featureInfoTemplate</code> to the items in your catalog <code>json</code> file like so:</p> <pre><code>{ "catalog": [ { "name": "ArcGIS Server", "type": "group", "items": [ { "name": "Gravity Anomaly two", "type": "esri-mapServer", "url": "http://www.ga.gov.au/gisimg/rest/services/earth_science/Geoscience_Australia_National_Geophysical_Grids/MapServer/6", "attribution" : { "text" : "Geoscience Australia", "link" : "http://www.ga.gov.au" }, "featureInfoTemplate" : "Pixel colour: <b>Red={{Red}} Blue={{Blue}} Green={{Green}}</b>." } ] } ] } </code></pre> <p>The template will replace all occurrences of <code>{{property}}</code> with the value of the property for that feature.</p> <p>The result is:</p> <p><img src="../img/template.png"></p> <p>instead of:</p> <p><img src="../img/no_template.png"></p> <p>You can provide a template to use for the name of the collapsible section (eg. to replace <code>RGB</code> in the example above), like so:</p> <pre><code> "featureInfoTemplate" : { "template": "<div>Pixel colour: {{>foobar}}</div>", "name": "Red {{Red}}" } </code></pre> <h2 id="more-details">More details</h2> <p>The template is rendered using <a href="https://github.com/janl/mustache.js#usage">Mustache</a>, so you can use all of its features here.</p> <p>In particular, you can render properties that include html by using triple-braces, eg. <code>{{{property}}}</code>.</p> <p>You can make use of partial templates (and even recursive templates) by specifying your template and partials as a json object, eg.:</p> <pre><code> "featureInfoTemplate" : { "template": "<div>Pixel colour: {{>foobar}}</div>", "partials": { "foobar": "<b>Red={{Red}} Blue={{Blue}} Green={{Green}}</b>" } } </code></pre> <p>After Mustache has rendered the template, the result is displayed using <a href="https://help.github.com/articles/markdown-basics/">Markdown</a>, so you could also write:</p> <pre><code> "featureInfoTemplate" : "Pixel colour: *Red={{Red}} Blue={{Blue}} Green={{Green}}*." </code></pre> <h2 id="formatting-numbers">Formatting numbers</h2> <p>The preferred way to format numbers is using the <code>formats</code> option, eg:</p> <pre><code> "featureInfoTemplate": { "template": "Pixel colour: <b>Red={{Red}} Blue={{Blue}} Green={{Green}}</b>.", "formats": { "Red": { "type": "number", "maximumFractionDigits": 2 }, "Green": { "type": "number", "maximumFractionDigits": 2 }, "Blue": { "type": "number", "maximumFractionDigits": 2 } } } </code></pre> <p><code>"type"</code> specifies the type of formatting that will be applied to the property. Here we are using <code>"number"</code> formatting which is also the default formatting if <code>"type"</code> is not supplied.</p> <p>The supported format options are:</p> <ul> <li><code>"maximumFractionDigits": X</code>: To reduce the number of decimal places to a maximum of X digits.</li> <li><code>"minimumFractionDigits": X</code>: To increase the number of decimal places to a minimum of X digits.</li> <li><code>"useGrouping": true</code>: To show thousands separators.</li> <li><code>"style": "percent"</code>: To show 0.15 as 15%.</li> </ul> <p>A second method is to use <code>terria.formatNumber</code> directly in the template. This accepts an initial JSON string describing the same options as above. To simplify the notation, the quotes around the keys are optional here.</p> <pre><code> "featureInfoTemplate": "template": "Pixel colour: <b>Red={{#terria.formatNumber}}{maximumFractionDigits:3}{{Red}}{{/terria.formatNumber}}</b>." </code></pre> <h2 id="url-encoding-strings">URL-encoding strings</h2> <p>To URL-encode a value in a template, use <code>terria.urlEncode</code> or <code>terria.urlEncodeComponent</code>. For example:</p> <pre><code>Test: {{#terria.urlEncode}}http://example.com/a b{{/terria.urlEncode}} Test: {{#terria.urlEncodeComponent}}W/HOE#1{{/terria.urlEncodeComponent}} </code></pre> <h2 id="formatting-dates">Formatting dates</h2> <p>Similar to formatting numbers you can format dates in the <code>"formats"</code> section by suppliying <code>"dateTime"</code> in the <code>"type"</code> property, eg:</p> <pre><code> "featureInfoTemplate": { "template": "Date: {{Date}}", "formats": { "Date": { "type": "dateTime"; "format": "dd-mm-yyyy HH:MM:ss"; } } } </code></pre> <p>The date format style used for the <code>"format"</code> property is the style from the <a href="https://www.npmjs.com/package/dateformat#usage">npm dateformat package</a>, e.g. <code>"dd-mm-yyyy HH:MM:ss"</code> or <code>"isoDateTime"</code>.</p> <p>As with number you can also use <code>terria.dateTimeformat</code> directly in the template. This accepts an initial JSON string describing the same options as above.</p> <pre><code> "featureInfoTemplate": "template": "{{#terria.formatDateTime}}{"format": "dd-mm-yyyy HH:MM:ss"}2017-11-23T08:47:53Z{{/terria.formatDateTime}}</b>." </code></pre> <h2 id="time-series-charts">Time-series charts</h2> <p>For features with time-varying table-based data structures (eg. CSV, SOS2, SDMX-JSON, if there is a time column), the feature info panel also includes a chart of the data over time, eg.</p> <p><img src="../img/feature_info_with_time_series.png"></p> <p>You can place this chart in your template using <code>{{terria.timeSeries.chart}}</code>. Alternatively, you can access the following component information:</p> <ul> <li><code>{{terria.timeSeries.xName}}</code> - the x-column name</li> <li><code>{{terria.timeSeries.yName}}</code> - the y-column name</li> <li><code>{{terria.timeSeries.title}}</code></li> <li><code>{{terria.timeSeries.id}}</code></li> <li><code>{{terria.timeSeries.units}}</code> - the column units as a comma-separated string.</li> <li><code>{{terria.timeSeries.data}}</code> - the data as a comma-separated string.</li> </ul> <p>Please note: <em> If any of the component information above contains double-quotes, double quotes will be removed before TerriaJS processes the template further. </em> If any of the component information above is used as part of tag attributes, it must be surrounded by double-quotes. e.g. <code><chart y-column="{{terria.timeSeries.yName}}"></chart></code></p> <p>So you could reconstruct the chart manually as:</p> <pre><code><h4>{{terria.timeSeries.title}}</h4> <chart x-column="{{terria.timeSeries.xName}}" y-column="{{terria.timeSeries.yName}}" id="{{terria.timeSeries.id}}" column-units="{{terria.timeSeries.units}}"> {{terria.timeSeries.data}} </chart> </code></pre> <p>or use this as a basis to customise the chart.</p> <h2 id="other-supporting-data">Other supporting data</h2> <p>The clicked point's latitude and longitude are also available as <code>{{terria.coords.latitude}}</code> and <code>{{terria.coords.longitude}}</code>.</p> <p>The current time for the layer is avaliable as <code>{{terria.currentTime}}</code>.</p> <h2 id="more-examples">More examples</h2> <p>Some examples are here: <a href="https://github.com/TerriaJS/terriajs/blob/master/wwwroot/test/init/csv.json">https://github.com/TerriaJS/terriajs/blob/master/wwwroot/test/init/csv.json</a>, and <a href="https://github.com/TerriaJS/terriajs/blob/master/wwwroot/test/init/charts.json">charts.json</a>.</p> <p>You can add this directly to your catalog by appending <code>#build/TerriaJS/test/init/csv.json</code> to the URL to your map, eg. <code>http://localhost:3001/#build/TerriaJS/test/init/csv.json</code>.</p> </article> </div> </div> </main> <footer class="md-footer"> <div class="md-footer-nav"> <nav class="md-footer-nav__inner md-grid"> <a href="../tabular-data/" title="Tabular Data" class="md-flex md-footer-nav__link md-footer-nav__link--prev" rel="prev"> <div class="md-flex__cell md-flex__cell--shrink"> <i class="md-icon md-icon--arrow-back md-footer-nav__button"></i> </div> <div class="md-flex__cell md-flex__cell--stretch md-footer-nav__title"> <span class="md-flex__ellipsis"> <span class="md-footer-nav__direction"> Previous </span> Tabular Data </span> </div> </a> <a href="../../catalog-functions/" title="Catalog Functions" class="md-flex md-footer-nav__link md-footer-nav__link--next" rel="next"> <div class="md-flex__cell md-flex__cell--stretch md-footer-nav__title"> <span class="md-flex__ellipsis"> <span class="md-footer-nav__direction"> Next </span> Catalog Functions </span> </div> <div class="md-flex__cell md-flex__cell--shrink"> <i class="md-icon md-icon--arrow-forward md-footer-nav__button"></i> </div> </a> </nav> </div> <div class="md-footer-meta md-typeset"> <div class="md-footer-meta__inner md-grid"> <div class="md-footer-copyright"> powered by <a href="http://www.mkdocs.org">MkDocs</a> and <a href="https://squidfunk.github.io/mkdocs-material/"> Material for MkDocs</a> </div> </div> </div> </footer> </div> <script src="../../../assets/javascripts/application.6cdc17f0.js"></script> <script>app.initialize({version:"0.17.2",url:{base:"../../.."}})</script> </body> </html>