MapSVG quick start guide

Let's start off with a World map and add a few objects into the database which would be our representatives in different countries.
Database > List > Add

We've added 2 persons in USA, 1 in France and 1 in Russia.

Now turn on Tooltips: Settings > Tooltips > On.
Then edit the template: Templates > Region tooltip.

MapSVG uses the popular Handlebars templating engine.
When you need to output a custom field in a template, just wrap it with curly brackets like this:
{{my_custom_field}}

After you add the template code try to hover the mouse pointer on the USA.
Note that tooltip is showing 2 DB Objects which we've added to the USA.

When you need to check if field is empty or not:
{{#if my_custom_field}} {{my_custom_field}} {{else}} It's empty! {{/if}}

Iterate over a set of DB objects attached to a Region:
{{#each objects}}...{{/each}}

Iterate over a set of Regions attached to a DB object:
{{#each regions}}...{{/each}}

Location field has nested properties:
{{location.address.formatted}}
{{location.address.country}}
{{location.address.country_short}}
{{location.address.state}} (US map only)
{{location.address.state_short}} (US map only)
{{location.address.county}} (US map only)

Image field always contains a set of images (because it is allowed to add multiple images in a single Image field),
and each image comes in 3 different sizes:
{{images.0.thumbnail}}
{{images.0.medium}}
{{images.0.full}}
{{images.1.thumbnail}}
{{images.1.medium}}
{{images.1.full}}
...
Show all images, medium size:
{{#each images}} <img src="{{medium}}" /> {{/each}}

Now let's add Tooltips to markers.
Markers are showing locations of DB Objects so this time you need to edit another template:
Templates > DB Object tooltip.
After you add the template code try to hover the mouse pointer on any marker.

Let's turn on Popovers.
Actions > Region click > Show popover (check)
Then copy Region tooltip template code you've added earlier to Region popover template.
After that try to click on any region:

Let's turn on Popovers for markers.
Actions > Marker click > Show popover (check)
Copy the DB Object tooltip template code you've added earlier to DB Object popover template.
After that try to click on any marker:

Now let's try to show a Details View instead of popovers.
Turn off Popovers: Actions > Region click > Show popover (uncheck)
Turn on Details View: Actions > Region click > Show details view (check)
Copy the Region Popover template to Region Details View template.
After that try to click on any region:

Turn on the Details View for markers too the same way:

Now let's add a Directory.
Directory is located in the left sidebar by default so first you need to show the left sidebar:
Settings > Containers > Left sidebar: On
Now turn on the Directory:
Directory > Directory: On
Please note what source for the Directory is chosen now: it's "Database" -
which means Directory will be filled with 4 objects we've added to the Database earlier.
Currently the Directory is empty because we need to add a template
and tell MapSVG what we need to show in the Directory, so let's move to the next step and do that.

Add the template: Templates > Directory item template
Since we've chosen "Database" as the source of our Directory, all DB Object fields are
available in the Directory item template:

Turn on Details View for click on a Directory Item:
Actions > Directory item click > Show details view (check)
Now try to click on any of the Directory items.

Now instead of DB Objects let's show a list or countries in the Directory.
Change the Directory source: Directory > Source: Regions
Set Sort by: title, Sort order: A..Z
Directory becomes empty again because we need to change the template.
Let's move to the next step and do that.

Since we've chosen "Regions" as the Directory source - DB Object fields are not available
in the Directory item template anymore.
Change the template to {{title}} (which is a Region field) to show country names.

Keep in mind the following important thing about the Details View when it's shown on click on a Directory Item:
When Directory > Source: Regions is chosen, Region Details view template is loaded.
When Directory > Source: Database is chosen, DB Object Details view template is loaded.


That's all!
In next tutorials we'll learn how to add Filters, Search, CSS and JavaScript event handlers.
Back to the tutorials