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:

<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



Handlebars support if/else conditions:

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

Negative conditions:

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

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

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


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}}

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

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


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}}

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:


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


Multiselect field

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


    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}}

Images field

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


    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}}" />

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.


Post field

Post ID, URL, title, content:


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


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