MapSVG 3.x tutorial

3. Directory with regions

In the following tutorial we will create a directory with regions. Each region will have 2 custom fields: to store a link and population count. Click on a region on the map or click on the same region in directory would redirect a user by a link.

We'll use geo-calibrated map of USA but the same task could be done with any other map.

First let's switch to Regions tab and click on Edit fields button in the toolbar.

Let's add the next custom Region fields:

  • Text to store URL. Give it a name "Link"
  • Text to store a population count. Give it a name "Population"

After you have added 2 fields, click Save fields button and switch back to the list of regions by clicking List button in the toolbar.

Go through all Regions by clicking on them and enter links and population numbers.

Switch to Directory tab.

Change settings as follows:

  • Directory: On
  • Data source: Regions

Switch to Actions tab.

Change settings as follows:

  • Region click
    • Go to link stored in: select checkbox
    • Choose Region.link field from drop-down list
  • Directory item click:
    • Show Details view: Off
    • Go to link stored in: select checkbox
    • Choose Region.link field from drop-down list

Switch to Templates tab, choose the Directory item template from drop-down list.

Add the following code into the template textarea field:

<b>{{title}}</b><br />

{{#if data.population}}
  {{data.population}}
{{/if}}

{{#unless data.population}}
  unknown
{{/unless}}

Let's go step by step through our template. On the first line:

<b>{{title}}</b><br />

We show Region title which is state name in case of USA map. We wrapped state name with <b></b> tag to make it bold. Then goes <br /> tag which is "go to the next line" tag in HTML.

Then we check if population field is non-empty, and if it's not then we show population number. Custom region fields are accessible via data property so if we want to get our custom population field then we need to write data.population:

{{#if data.population}}
  {{data.population}}
{{/if}}

And if population number isn't defined then just show the word "unknown":

{{#unless data.population}}
  unknown
{{/unless}}

Save the map, add a new page in WordPress Admin, insert the map shorcode and see what we've done! Try to click on any item in directory or on a region and you will be redirected by the link which you've added for that region.