Templates

Overview

MapSVG uses Handlebars templates.

Let's say you have the following DB Object in MapSVG:

{
  id: 1,
  title: "My city",
  description: "Lorem ipsum"
  location: {
      lat: 55.1234,
      lng: 66.1234,
      address: {formatted: "1 Main st., New York, USA"}
    }
}    

This is how you could use it in a DB Object Details view template:

<h2>{{title}}</h2>
<p>{{description}}</p>
<p><i>Address: {{location.address.formatted}}</i></p>

Which results in the following HTML code:

<h2>My city</h2>
<p>Lorem ipsum</p>
<p><i>Address: 1 Main st., New York, USA</i></p>

And this is how it looks when you open a Details View:


My city

Lorem ipsum

Address: 1 Main st., New York, USA


Syntax

#if/else

Handlebars support if/else conditions:

{{#if title}}
  {{title}}
{{else}}
  The title is empty!
{{/if}}    

Negative conditions:

{{#unless title}}
  The title is empty!
{{/unless}}    

Check if variable is equal or not equal to some value:

{{#ifeq title "Hello"}}
  The title is "Hello!
{{/ifeq}}
{{#ifnoteq title "Hello"}}
  The title is NOT "Hello!
{{/ifnoteq}}    

#each

Example: a Region have multiple attached DB Objects. You can show fields of attached objects individually by object index number:

{{objects.0.my_field}} <!-- "my_field" value of the  1st object --> 
{{objects.1.my_field}} <!-- "my_field" value of the  2nd object --> 
{{objects.1.title}}    <!-- "title" value of the  2nd object --> 

But also you can iterate over the list of DB Objects, attached to a Region:

{{#each objects}}
  Object's my_field: {{my_field}}
  Object's title: {{title}}
  Object's address: {{location.address.formatted}}
{{/each}}    

Iteration over a list of Regions, attached to a DB Object:

{{#each regions}}
  Region title: {{title}}
  Region status: {{status}}
{{/each}}    

#switch/case

Show content depending on the value of a field.

{{#switch status}}
  {{case "1" break="true"}} Status is "Available" {{/case}}
  {{case "2" break="true"}} Status is "Sold" {{/case}}
  {{#default}} Unknown status {{/default}}
{{/each}}

Template tags by field type

Select, Radio, Status fields

These fields have 2 values for each option: number and text. Suppose that you have the following list of options in your select / radio / status fields:

Avaialble: 1
Sold: 2
Disabled: 3

Show number value of a select / radio / status field:

  {{my_field}}

Show text value of a select / radio / status field:

  {{my_field_text}}

Multiselect field

Muliselect field of contains an array of chosen options as label/value pairs.

Example:

{
    my_multiselect_field: [
      {label: "Option one", value: 1},
      {label: "Option two", value: 2}
    ]
}

Showing all chosen values of a multiselect field, comma-separated:

{{#each my_multiselect_field}}
 {{label}} - {{value}}{{#unless @last}}, {{/unless}}
{{/each}}    

Images field

Images field always contain an array of images and each image comes in 3 different sizes: thumbnail, medium, full.

Example:

[
  {
    thumbnail: "/path/to/thumbnail/image.jpg", 
    medium: "/path/to/medium/image.jpg", 
    full: "/path/to/full/image.jpg"
  },
  {
    thumbnail: "/path/to/thumbnail/image2.jpg", 
    medium: "/path/to/medium/image2.jpg", 
    full: "/path/to/full/image2.jpg"
  }
]

Remember that this field contains only URLs of images, so if you want to show an image in a template, you should use <img src="..." /> HTML tag.

Show all images:

{{#each images}}
    <img src="{{thumbnail}}" />
    <img src="{{medium}}" />
    <img src="{{full}}" />
{{/each}}    

Show a single image by index number (0 is the first image, 1 is the second, etc.):

<img src="{{images.0.full}}" />

HTML field

When you have a textarea field with HTML highlight mode, you have to use 3 curly braces {{{...}}} instead of 2 {{..}} around the field name in the template to render it as HTML. If you use 2 curly braces, the field will be rendered as a plain text.

{{{my_textarea_with_html}}}

Post field

Post ID, URL, title, content:

{{post.id}}
{{post.url}}}
{{post.post_title}}
{{post.post_content}}

If you use ACF plugin (Advanced Custom Fields), you can show your custom fields via .acf property:

post.acf.my_field_name
post.acf.my_another_field

Location field

Example of the Location field structure:

{
  location: {
    address: {
      formatted: "1 Main st., Houston, TX 10022, USA",
      locality: "Houston",
      state_short: "TX",
      state: "Texas",
      country_short: "US",
      country: "United States",
      zip: "10022"      
    }
    lat: 55.1234,
    lng: 66.1234
  }
}

Template:

{{location.address.formatted}}
{{location.address.city}}
{{location.address.zip}}