🗺️
Mapster WP Maps
HomeProExamplesContact
  • Getting Started
    • About
    • Installation
    • Key Concepts
    • Importing/Exporting
    • Guides
      • Your First Map
      • Creating a Crowdsourced Map
      • Set Up Recurring Import
      • Adding a Custom Style
      • Building a Custom Popup
  • Creating Shapes
  • Displaying Maps
  • Maps
    • Map Tiles
    • Initial View
      • Fit to Features
      • Manual Values
      • User Location
    • Map Size
    • Points, Lines, Polygons
    • Clustering
    • Interactivity
    • Controls
      • Basic Controls
      • Geocoding & Geolocation
      • Togglers
      • Other Controls
      • Control Render Order
    • Filters
      • Category Filter
      • Custom Search Filter
      • Filter Dropdown
    • Lists
      • Store Locator
    • Specialty Maps
      • Map Comparer
      • Heatmaps
      • Elevation Profile
      • User Submission
      • Listing Page Map
    • Preloader
    • Developer
      • Javascript
      • Embedding Maps
      • Faster Loading (Cache)
      • Caching
      • Progressive Loading
      • Query String Control
  • Locations
    • Markers
    • Circles
    • Labels
    • Icons
    • 3D Models
  • Lines
    • Lines
  • Multi Lines
  • Polygons
    • Flat Polygons
    • 3D Polygons
    • Image Polygons
  • Multi Polygons
  • Popups
    • Popup Templates
      • Introduction
      • Layout, Colors, Text, CSS
      • HTML
      • Options
    • Popup Content
  • Pro Sections
    • User Submission
      • Overview
      • Submission Interface
      • Adding Custom Fields
      • Submission Admin
  • Mass Edit
  • Settings
    • General
    • Account Management
  • Advanced
  • Import
  • Tileset Management
  • Developer
    • Mapster Map ACF Field
    • Mapster Map Gravity Forms Field
    • Custom Scripts
    • Hooks
    • Spatial DB & API
    • Internationalization
Powered by GitBook
On this page
  • Make Your Posts, Then Geographies, & Associate Them
  • Create the Listing Map
  • Adding the Shortcodes

Was this helpful?

  1. Maps
  2. Specialty Maps

Listing Page Map

Make a page with locations or areas listed and interactable between the map and your posts.

PreviousUser SubmissionNextPreloader

Last updated 10 months ago

Was this helpful?

With Mapster Pro, you can create a page that will list the posts that you've attached to a map beside them, and allow users to interact with the post listings and have things change on the map. This is easiest to see in an example like the one below.

This type of map can be a little tricky to set up, but these instructions should help you to get going.

.

Make Your Posts, Then Geographies, & Associate Them

This type of map was originally built for polygons, but it should work equally well with other types of geographies. The idea is that you create a geography in Mapster, and then "associate" that geography with another post in your Wordpress installation. It doesn't matter what post type your other post is, you can associate it in the sidebar area of any geography that you create.

This associated post will be used to create the "Listing" side of the Listing Map. It will use the Title and Featured Image of this post in order to create the listing itself, and when the user clicks on the listing, they will be directed to the post's URL on the frontend.

Create the Listing Map

For the listing map, not every geography that you add will be shown in the Listing area. Only those geographies that are "associated" with other posts in your installation will be shown.

So, feel free to add any geographies you want as if you were creating a normal map! This can be handy to add labels on top of polygons, for instance, if you want to only associate posts with polygons but still show neat labels on top of them.

Make sure to go to the "Specialty Maps" section and select "Listing Page".

You can choose a few options:

  • Lazy load (still in development)

  • Center on hover -- when a user hovers over one of the listings, the map will automatically center on the associated geography

  • Listing style -- choose between an image grid (great if you have featured images) or just a simple list

  • Sticky map -- if you have a long set of listings, the map will move smoothly beside the listings as the user scrolls down the page

Adding the Shortcodes

The best way to add the Listing Map and the Listings into your installation is to use the provided shortcodes in different container <div>. You can find the Map shortcode on the "Maps" page in Wordpress, and the Listing shortcode in the "Specialty Maps" > Listing Page area of the specific map you created.

Put these shortcodes into the areas you want them to appear on your page -- usually best as two columns -- and you should see your listing map appear!

See an example of the Listing Page Map here
Here, you can select the post to associate with your geography.