MapSVG 3.2.x tutorial

4. Directory

Watch a video

In the following tutorial we will create a map with Directory (menu) containing a list of custom Database Objects.

Our custom DB Objects will be dealers in USA. Each DB Object (dealer) can be attached to one or more Regions (states). And any Region (state) can have one or more DB Objects (dealers).

Let's switch to Database tab and click on Edit fields button in the toolbar.

Let's add the next fields:

  • Text to store company name. Give it a name "Company"
  • Text to store a email of a company. Give it a name "Email"
  • Region to connect a Database Object (dealer) with a Region (US State)

Click Save fields button and go back to the list of Database Objects by clicking on List button in the toolbar.

Click on Add button in the toolbar and fill in the fields: company name, email, choose US State from drop-down list, click OK button to save. Add a few more dealers. Note that you can also add 1 dealer to multiple states.

Go to Menu > Directory.

Change settings as follows:

  • Directory: On
  • Data source: Database

Go to Menu > Details view.

Change settings as follows:

  • Location: Over the map
  • Width: 100%

Go to Menu > Actions.

Change settings as follows:

  • Directory item click:
    • Show Details view: On

Go to Menu > Templates, choose the Directory item template from drop-down list.

Add the following code into the template textarea field:

{{company}}

Choose DB Object Details view template from drop-down list.

Add the following code into the template textarea field:

<b>{{company}}</b><br />
{{email}}

Save the map, add a new page in WordPress Admin, insert the map shortcode and see the results!

Try to click on any item in the directory to see the Details view.

Next tutorial: 5. Search & filters