Skip to content
HomeDemosDocsChangelogPricing
Log In
Get MapSVG
MapSVG 9/Documentation/Guides

Build a USA office locator

This guide combines a calibrated SVG, Object records, markers, Directory, and Filters. Directory and any import/clustering features require their respective modules.

Prepare the App and records

Section titled “Prepare the App and records”
  1. Create an App named USA Office Locator from geo-calibrated/usa.svg.
  2. Set Region Styles to blue #1274b7 with white borders.
  3. Open its Objects Collection in Database.
  4. Add fields for Title, Description, Category, and Location as needed.
  5. Add a few fictional offices with valid US coordinates. For example: Pacific Office in San Francisco and Atlantic Office in New York.

Use real coordinates for the location, but fictional business content. Choose consistent category values, such as regional and partner.

Connect the components

Section titled “Connect the components”

Select the intended Objects Query in Page settings. Enable/place Directory and Filters through the App tree and Layout. Set both to the Page’s Objects binding.

In Filters → Edit form, add a category control mapped to the returned category field. Configure a clear placeholder such as All office types. Add address/distance search only when the relevant service and capability are available.

Configure markers and content

Section titled “Configure markers and content”

Choose the default marker image in Marker → Settings. If categories should use different icons, map each existing category value to an image.

Enable marker click → Show popover. Edit the Object Popover template to show Title, Description, and the fields useful to visitors. Use Popover rather than the currently limited Details action.

Responsive layout

Section titled “Responsive layout”

On Desktop, place Directory beside Map and Filters above them. On Mobile, test the Mobile Toolbar’s Map/List targets and ensure filters are reachable. Review both portrait and landscape instead of only shrinking the desktop browser.

Acceptance check

Section titled “Acceptance check”

Filter to one category, select an office, open/close its popover, clear the filter, and navigate Map/List on Mobile. Confirm every displayed marker belongs to the expected Objects Query.

Publish, embed with the copied shortcode, and repeat the checks on a WordPress page while logged out.