MapSVG 3.2.x tutorial

5. Search & filters

In the following tutorial we will continue to work with the map we have create in previous tutorial: 4. Directory - and we will add search & filter functionality into that map.

Go to Menu > Database tab and click on Edit fields button in the toolbar.

Turn on Searchable option for "Company" field.

That option adds FULLTEXT index into MySQL table for "company" column - and that gives you an ability to perform text search by company name in MapSVG.

You can have multiple searchable fields - you can set "Regions" as Searchable as well to be able to do text-search not only by company but by US state also. But it's more effective to have drop-down filter with list of states - and later we'll see how to do that.

Add 1 more field:

  • Type Select
  • Label Sales
  • Name sales
  • Options
    Low:0
    Medium:1
    High:2
    

We'll use this field to store amount of dealer's sales - and we'll use this field in filters.

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

Go through all dealers and set amount of sales (just random values).

Go to Menu > Actions.

Change settings as follows:

  • Region click:
    • Filter directory: On

This option filters directory by clicked region.

Go to Menu > Filters. Turn on Filters: ON option.

Click on Edit fields button in the toolbar.

Add a field:

  • Type "Select"
  • Label [empty] (you can leave label empty for filters)
  • Parameter to filter "Object.sales"
  • Default option text "Any sales"
  • Insert options from Object.sales - click the button to insert options:
    Low:0
    Medium:1
    High:2
    

Add one more field:

  • Type "Select"
  • Label [empty]
  • Parameter to filter "Object.regions"
  • Default option text "Any state"
  • Insert options from Object.regions - click the button to insert the list of US states

CLick Save fields button and go back to filters settings page.

Save the map, add a new page: WP Admin Menu > Pages > Add new, insert the map shortcode and see the results!

There are 2 drop-down filters above directory which can be used together. So for example you can filter dealers to show only dealers with "Medium" sales from "Texas".