MapSVG 3.x tutorial

4. Directory with database objects

In the following tutorial we will create a Directory with Database Objects.

It will be a list of dealers across USA country. Each state may have one or more dealers. That's why we chose to store our data in Database Objects: multiple Database Object can be connected to a Region.

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)

Also switch On "Searchable" option for "Company" and "Region" fields so we could search by company/state in the directory later.

After you have added all 3 fields, click Save fields button and switch 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. Enter company name, email, choose US State from drop-down list, click OK button (or use keyboard Hotkey!). Repeat for every dealer.

Switch to Directory tab.

Change settings as follows:

  • Directory: On
  • Data source: Database
  • Search: On

Switch to Details view tab.

Change settings as follows:

  • Location: Near directory

Switch to Actions tab.

Change settings as follows:

  • Region click
    • Filter directory by Region: On
  • Directory item click:
    • Show Details view: On

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

Add the following code into the template textarea field:

{{company}}

Choose 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 shorcode and see what we've done!

We have added multiple dealers for Texas state so if we click on a Texas state on the map - directory list would be filtered by state and that filter would appear above the directory (see the screenshot).

Try to enter company name or state name in the search box to find a dealer by name/state (remember we selected Searchable option for "Company" and "Region" custom fields?).

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