User Guide

Complete guide to using Location Viewer for displaying interactive maps and location grids on your WordPress site.

Getting Started
Adding Locations to Posts
Managing Location Sources
Using the Location Viewer Block
Understanding View Modes
Basic Customization
Troubleshooting

Getting Started

What is Location Viewer?

Location Viewer is a flexible WordPress plugin that displays your locations on interactive maps and responsive grids. It works with any post type and can integrate with external data sources.

Quick Start

Install and activate the Location Viewer plugin
Go to Settings → Location Viewer to configure sources
Add location data to your posts (latitude and longitude)
Insert the Location Viewer block on any page
Select which sources to display and configure view options

Adding Locations to Posts

Location Viewer adds a “Location Data” meta box to enabled post types where you can enter geographic coordinates.

Setting Coordinates

Edit any post of an enabled post type
Scroll down to the Location Data meta box
Enter the Latitude (e.g., 40.7128)
Enter the Longitude (e.g., -74.0060)
Update or publish the post

Finding Coordinates

To find latitude and longitude for a location:

Google Maps: Right-click any location and select “What’s here?” – coordinates appear at the bottom
Geocoding Services: Use free services like geocode.xyz or nominatim.org to convert addresses to coordinates
Browser Tools: Use developer tools in modern browsers to extract coordinates from map services

Coordinate Format

Latitude: Decimal degrees from -90 to 90 (positive = North, negative = South)
Longitude: Decimal degrees from -180 to 180 (positive = East, negative = West)
Example: New York City = Latitude: 40.7128, Longitude: -74.0060

Managing Location Sources

Sources are collections of locations from specific post types or external data. Go to Settings → Location Viewer to manage sources.

Adding a Post Type Source

Click Add New Source in the admin settings
Select Post Type as the source type
Choose which post type to use (Posts, Pages, or custom post types)
Enter a Label (displayed in legends and headers)
Choose an Icon (FontAwesome icon class)
Pick a Color for map markers and badges
Click Add Source

Organizing Sources

Drag and Drop: Click and drag sources to reorder them
Enable/Disable: Toggle sources on/off without deleting them
Delete: Remove sources you no longer need

Source Configuration Options

Setting	Description
Label	Display name for the source (e.g., “Rental Properties”)
Icon	FontAwesome class for markers and badges (e.g., “fa-home”)
Color	Hex color code for visual identification (e.g., “#3498db”)
Enabled	Whether the source is available for selection in blocks

Using the Location Viewer Block

Add the Location Viewer block to any page or post to display your locations.

Inserting the Block

Edit a page or post
Click the + button to add a block
Search for “Location Viewer”
Click to insert the block

Block Settings Overview

The Location Viewer block has three main settings panels in the sidebar:

Map Settings Panel

Show Map: Toggle map display on/off
Auto Center Map: Automatically center on all markers or use manual coordinates
Manual Center: Set specific latitude, longitude, and zoom when auto-center is disabled
Show Legend: Display a legend with source toggles
Map Sources: Select which sources appear on the map

Grid Settings Panel

Show Grid: Toggle grid display on/off
Show Headers on Grid: Display section headers grouping items by source
Grid Sources: Select which sources appear in the grid

Options Panel

Height Mode: Choose Full Page, Full Height, or Fixed Height
Show Filters: Enable filter controls (when implemented)
Show Header Bar: Display view switcher buttons
Default View: Set initial view when page loads (Split, Map, or Grid)
View Button Order: Drag to reorder view switcher buttons
Split View Order: Choose whether map or grid appears first in split view
Single View Selection: Choose which single view to show when header bar is hidden

Selecting Sources

You can display different sources on the map versus the grid:

Map Sources: Check the boxes for sources you want markers for
Grid Sources: Check the boxes for sources you want grid items for
Tip: You can show all sources on the map but only specific ones in the grid, or vice versa

Understanding View Modes

Location Viewer offers three view modes that users can switch between:

Split View

Displays map and grid side-by-side on desktop
Stacks vertically on mobile devices
Configure whether map appears on left or right via “Split View Order” setting
Perfect for exploring locations while viewing details

Map View

Shows only the interactive map, full width
Best for geographic exploration and location discovery
Markers remain clickable to show popups with details

Grid View

Shows only the location grid, full width
Best for browsing location details and descriptions
Clicking grid items can still interact with hidden map

View Switcher Configuration

Show Header Bar: Controls whether view switcher buttons appear
Default View: Sets which view appears when page first loads
View Button Order: Drag buttons to customize their order in the header
Single View Selection: When header bar is hidden, choose Map or Grid to display

Basic Customization

Height Modes

Full Page: Viewer fills entire page height, great for dedicated location pages
Full Height: Grid can expand fully with 50vh minimum map height, balanced layout
Fixed Height: Uses specific height value, predictable sizing

Map Controls

Auto Center: Map automatically adjusts to show all visible markers
Manual Center: Set specific coordinates and zoom level for consistent framing
Show All Button: Appears when manually panning – click to reset to auto-center view

Using the Legend

When “Show Legend” is enabled, a legend appears on the map with checkboxes for each source:

Toggle Visibility: Uncheck a source to hide its markers and grid items
Visual Indicators: Icons show which sources are active/inactive
Synchronized: Toggling affects both map markers and grid items simultaneously

Interactive Features

Location Viewer includes powerful bidirectional interactions:

Grid Item Click: Centers map on location and opens marker popup
Grid Item Hover: Highlights corresponding map marker
Marker Click: Scrolls to corresponding grid item (if grid is visible)
Marker Hover: Highlights corresponding grid item
Legend Toggle: Hides/shows markers and grid items for that source

Troubleshooting

No Locations Appearing

Verify posts have latitude and longitude values in the Location Data meta box
Check that the source is enabled in Settings → Location Viewer
Confirm the source is selected in the block’s Map Sources or Grid Sources
Ensure posts are published (not drafts)

Map Not Displaying

Check that “Show Map” is enabled in block settings
Verify at least one source is selected in Map Sources
Check browser console for JavaScript errors
Ensure Leaflet.js is loading properly

Grid Items Not Showing

Check that “Show Grid” is enabled in block settings
Verify at least one source is selected in Grid Sources
Confirm posts have content (title and/or excerpt)

Markers in Wrong Location

Double-check latitude and longitude values in post meta
Ensure latitude is between -90 and 90
Ensure longitude is between -180 and 180
Verify no typos or extra characters in coordinate fields

View Switcher Not Working

Verify “Show Header Bar” is enabled in block settings
Check that both map and grid are enabled (can’t switch if only one is active)
Clear browser cache and reload page

Need More Help?

For advanced customization and developer documentation, see the Developer Guide. For issues and bug reports, please visit the plugin’s support forum or GitHub repository.

View Developer Guide

Get Support