Leaflet Map

A smart & versatile mapping, geolocation and trip-planning tool designed for tourism and area exploration. Works alone or in combination with our Like & Save plugin.

Leaflet Map

About this map example

This map is generated by a CSV of historically popular music venues (JSON works too). The map points are determined by Lat/Lng, and will geolocate by physical address if the coordinates aren’t provided. In addition to typical WP meta, you may add custom meta per location to be stored for output. The list of locations and the map popups have a few template options by default, which can be extended upon as update-proof layouts.

    Active 1.5.4 249 KB updated: 10/02/2026 4:24 PM

    Steve’s Leaflet Map allows you to embed interactive maps on WordPress posts and pages using either a shortcode or a Gutenberg block.

    Key features:

    • Display maps with single or multiple markers
    • Use latitude/longitude coordinates or geocode an address
    • Query posts by taxonomy/term to build a map automatically
    • Base map layers: OpenStreetMap, Topographic, Satellite, Cycle
    • Optional overlay: OpenFireMap (experimental / opt-in)
    • Optional Trails (OSM) overlay via OpenStreetMap Overpass API, cached and fetched asynchronously via REST
    • Optional AirNow AQI overlay via REST, with cached lookup by bbox / lat-lng / zip
    • Optional NOAA/NWS Alerts overlay via REST and cached bbox filtering
    • Optional point list under the map with toggle, click-to-zoom, recenter, and search filter
    • Optional REST/AJAX point loading for large datasets (ajax_points=”true”, cached server-side)
    • Optional marker clustering for large datasets (cluster=”true”, uses Leaflet.markercluster)
    • Optional Explore nearby panel (locate=”true”, distance, distance_unit)
    • Like & Save integration: map the current visitor’s saved items (source="saved")
    • Optional marker styling per point via marker_color and marker_class
    • Optional Point Sets: reusable point collections managed in WP Admin
    • Optional extra point layers: stack additional Point Sets on one map as toggleable layers whose markers and list rows appear/disappear together
    • Points list controls (automatic): Sort dropdown and a Type/category filter built from each point’s dataset_category terms
    • Optional Trip Planner module (experimental, off by default): live OpenRouteService routing with OSRM/mock fallback, transport modes, and a round-trip / one-way “trip end” control
    • Upload the steves-leaflet-map folder to the /wp-content/plugins/ directory
    • Activate the plugin through the Plugins menu in WordPress
    • Use the shortcode in your posts/pages or insert the Gutenberg block
    Shortcode Usage

    Use the [steve_leaflet_map] shortcode in your content.

    Common Shortcode Examples

    Basic map with coordinates:

    [steve_leaflet_map lat="42.3601" lng="-71.0589"]

    Simple “page meta” map (single marker from this page/post’s lat/lng + location_name):

    [steve_leaflet_map_simple height="300px" zoom="12" layer="topo"]

    Map with address geocoding:

    [steve_leaflet_map address="1600 Pennsylvania Avenue NW, Washington, DC"]

    Map all posts in a category:

    [steve_leaflet_map taxonomy="category" term="events"]

    Show a list of points below the map:

    [steve_leaflet_map taxonomy="category" term="events" show_list="true"]

    Load points via REST/AJAX:

    [steve_leaflet_map taxonomy="category" term="events" show_list="true" ajax_points="true" ajax_ttl="600"]

    Enable clustering:

    [steve_leaflet_map taxonomy="category" term="events" show_list="true" ajax_points="true" cluster="true"]

    Enable nearby filtering:

    [steve_leaflet_map taxonomy="category" term="events" show_list="true" ajax_points="true" locate="true"]

    Enable a default nearby distance:

    [steve_leaflet_map taxonomy="category" term="events" show_list="true" ajax_points="true" locate="true" distance="25" distance_unit="mi"]

    Curated “Find nearby” buttons for specific post types (overrides auto-discovered categories):

    [steve_leaflet_map nearby_groups='[{"label":"Find a restaurant nearby","post_type":"restaurant"},{"label":"Find lodging nearby","post_type":"lodging"}]‘ locate=”true”]

    Point Set by ID:

    [steve_leaflet_map point_set_id="12" show_list="true" ajax_points="true" cluster="true"]

    Point Set by slug:

    [steve_leaflet_map point_set_id="my-trailheads" show_list="true" ajax_points="true"]

    Point Set plus two extra toggleable point layers:

    [steve_leaflet_map point_set_id="12" point_set_layers="42:Trails,43:Historic Sites" show_list="true" ajax_points="true" cluster="true"]

    Like & Save items:

    [steve_leaflet_map source="saved" show_list="true"]

    Like & Save items with trails overlay:

    [steve_leaflet_map source="saved" show_list="true" trails="true"]

    Enable air quality / alerts overlays in a map that supports them:

    [steve_leaflet_map overpass_pois="true" airnow="true" airnow_data="false"]

    Shortcode Attributes

    • height – Map height (default: 400px)
    • zoom – Initial zoom level (default: 13)
    • lat – Latitude coordinate
    • lng – Longitude coordinate
    • name – Marker popup text
    • address – Address to geocode if lat/lng are not provided
    • click_zoom – Zoom level applied when a point is clicked (default: empty = don’t change zoom)
    • nearby_groups – Curated “Find nearby” buttons as a JSON array. Overrides auto-discovered categories. Each entry: {“label”:”Find a restaurant nearby”,”post_type”:”restaurant”,”taxonomy”:””,”term”:””}. The post_type is required; taxonomy and term are optional. (default: empty, uses auto-discovery)
    • scroll_guard – on or off; overrides the site-wide scroll-guard setting for this map (default: empty = use site setting)
    • show_list – Show the point list under the map (default: false)
    • ajax_points – Load points via REST/AJAX for large datasets, cached server-side (default: true)
    • cluster – Enable marker clustering via Leaflet.markercluster (default: false)
    • locate – Enable the Explore nearby panel (default: false)
    • distance / distance_unit – Default nearby radius and unit (mi or km; unit default mi)
    • show_directions – Show directions links on markers/popups (default: true)
    • popup_template – Popup template: default, compact, simple (default: default)
    • popup_meta_keys – Comma-separated point.meta keys to render in the popup; when set, only those keys render
    • list_template – Points list template: default, compact, simple (default: default)
    • list_meta_keys – Comma-separated point.meta keys to render in the list; when set, only those keys render
    • list_layout – Points list layout preset: row, list, grid (default: row). list is a compact left-aligned preset (“Title – Address” inline, excerpt below)
    • list_show_thumb – Show the point’s featured image in the list (default: true)
    • list_show_title – Show the point’s title in the list (default: true)
    • list_show_excerpt – Show the point’s excerpt/description in the list (default: true)
    • list_show_meta – Show the point’s meta rows in the list (default: true)
    • list_show_terms – Show the point’s term/category chips in the list (default: true)

    Point Sources

    • post_type – Post type to query (default: post); use any for all types
    • taxonomy – Taxonomy to filter by; leave blank to auto-detect
    • term – Term slug to filter by
    • point_taxonomy – Taxonomy used to normalize manual-point categories (default: dataset_category)
    • point_category – Readable category label for manual points
    • point_set_id – Reusable Point Set ID or slug
    • point_set_layers – Extra Point Sets rendered as toggleable layers, as ID:Label,ID:Label (max 4). See “Extra Point Layers” below.
    • source – Point source; use saved to map the current visitor’s Like & Save items
    • geo_address_key – Meta key used as the address when geocoding this map (default: the site’s configured address meta key)
    • map_position – Render the map above or below the content (default: above)

    Base Layers

    • layer – Default base layer: osm, topo, satellite, cycle (default: osm)
    • base_layers_allowlist – Comma-separated base-layer slugs to offer in the Layers control (e.g. osm,satellite,jawg_dark). Empty = offer all.
    • base_default – Base-layer slug selected when the map opens (must be in the allowlist when the allowlist is non-empty)

    Overlays

    Overlays are toggled by the visitor from the map’s Layers control (bottom-right).

    • overlays_allowlist – Comma-separated overlay slugs to offer. Empty = offer all. One-place registry: includes/overlays.php.
    • overlays_default_enabled – Comma-separated overlay slugs switched on when the map opens

    Individual overlay switches:

    Manual Points

    Manual points are available in the Gutenberg block sidebar.

    For each point you can enter:

    • Latitude
    • Longitude
    • Name
    • Description
    • Address
    • Marker Color
    • Marker Class

    Manual points also support a category/taxonomy field in the block editor:

    • dataset_category is the current taxonomy used by the backend normalization path
    • The block editor also exposes a readable label field so admins can manage the manual point category more clearly

    When manual points are saved, the plugin will normalize type or category values into dataset_category terms for frontend display and filtering.

    Gutenberg Block

    You can also use the Steve’s Leaflet Map blocks in the Gutenberg editor:

    • Main block: steves-leaflet-map/map (full-featured map)
    • Simple block: steves-leaflet-map/simple (single marker from the current page/post meta)
    • Directory block: steves-leaflet-map/directory (map plus a directory-style listing of the same points)

    For the Main block (steves-leaflet-map/map), the block settings are extensive (map + query + points + list + overlays). Panels include Map, Base Layers, Overlays, Boundaries, Points Dataset, Query Settings, List, Popups, Nearby, Trip Planner, and Scroll guard.

    • Points Dataset (optional) panel – Point set ID plus Extra point layers (ID:Label,ID:Label, max 4). See “Extra Point Layers” above.
    • Overlays panel – the overlay allowlist and the overlays that start switched on. The per-overlay settings mirror the shortcode attributes listed above.
    • Boundaries panel – a repeater of GeoJSON boundary configs; each boundary gets its own Layers-control toggle, styling, optional map fit, and “show on map open” flag.

    For the Simple block (steves-leaflet-map/simple), settings are intentionally minimal:

    • Height
    • Zoom
    • Base layer (layer)
    • Marker CSS class (marker_class) – optional (overrides the page/post meta marker_class)
    Admin Settings

    WP Admin → Settings → Steve’s Leaflet Map

    (direct link: wp-admin/options-general.php?page=steves-leaflet-map)

    The page is tabbed: Settings, License, Points, Scan & Update. Each tab has a direct link, e.g. &tab=points.

    • Jawg Maps API key: enables the Jawg Dark basemap (constant override: STEVES_LEAFLET_JAWG_API_KEY)
    • Address meta key (geocoding): Meta key to use as an address when geocoding is needed (default: address)
    • AirNow API key + fixed forecast ZIP
    • OpenTripMap API key
    • FIRMS download URL (CSV)
    • Trip planner: master switch, routing mode (mock / OpenRouteService), ORS API key (constant override: STEVES_LEAFLET_ORS_API_KEY)
    • Scroll guard: cover front-end maps with a “click to enable” veil so page scrolling is not hijacked. Individual maps can override via the block editor panel or scroll_guard=”on|off”.
    • License: plugin license key and status
    • Points: create/edit reusable Point Sets from CSV/JSON (see “Point Sets”)
    • Scan & Update: Admin tool that scans posts/pages for missing lat/lng and fills them via geocoding using the configured address meta key. Supports dry-run.
    Point Sets

    WP Admin → Settings → Steve’s Leaflet Map → Points

    (direct link: wp-admin/options-general.php?page=steves-leaflet-map&tab=points)

    • Create/edit Point Sets with CSV or JSON
    • Reuse them across maps
    • Point Sets are fetched via the plugin REST endpoint and cached server-side

    Point Set columns

    These keys are recognized when importing CSV or JSON; anything else you add (for example website or venue_type) is kept as point meta and rendered as a meta row in the popup/list.

    • lat, lng – Required coordinates
    • name, description, address
    • marker_color (e.g. #369D44), marker_class (e.g. ico-music)
    • type, category – Normalized into dataset_category terms so the Type filter and category chips work

    A minimal JSON point looks like this:

    {“lat”:”42.8605918″,”lng”:”-112.4519518″,”name”:”Lookout Point at Simplot Square”,”description”:”Newly developed park…”,”address”:”435 W. Center Street, Pocatello, ID 83204″,”marker_color”:”#369D44″,”marker_class”:”ico-music”,”type”:”City Parks”}

    You do not need to hand-write a terms array. If you do supply one, keep the taxonomy / slug / name shape: [{"taxonomy":"dataset_category","slug":"city-parks","name":"City Parks"}].

    Automatic post linking (1.5.3+)

    When a dataset point includes a url or website column value that points at an existing post/page/CPT on this site, the plugin matches the point to that post by URL slug and pulls over the post’s featured image, excerpt, canonical URL, and post ID. Set the map’s list layout to row or grid and enable “Show list thumbnail” to display the matched featured images.

    Explore Nearby

    When you enable locate=”true”, the plugin shows an Explore nearby panel under the map.

    It supports:

    • My location
    • Map center
    • Distance presets
    • Distance unit selection
    • Nearby sorting / filtering
    • Optional Trip planner integration when Like & Save is active
    • Curated category groups: Use the nearby_groups attribute to replace the auto-discovered category dropdown with focused buttons like “Find a restaurant nearby”. Each group specifies its own post_type (independent of the current page’s post type), optional taxonomy, and optional term. See Shortcode Attributes above for the format.
    Trip Planner
    • trip_planner_enabled – Show the trip planner panel (default: false; also requires the site-wide planner switch)
    • trip_planner_mode – Routing mode: mock or ors (default: mock)
    • trip_planner_origin – Fixed trip origin (blank = use the visitor’s chosen start)
    • trip_planner_destination – Fixed trip destination
    • trip_planner_waypoints – Fixed waypoints between origin and destination

    For the simple shortcode [steve_leaflet_map_simple], only these attributes are supported:

    • height – Map height (default: 400px)
    • zoom – Initial zoom level (default: 13)
    • layer – Base layer: osm, topo, satellite, jawg_dark (default: osm)
    • marker_class – Optional CSS class used for the marker shape (overrides page/post meta marker_class)
    • nearby_groups – Same as the main shortcode (default: empty, uses auto-discovery)
    Trip Planner (Experimental)

    A modular trip planner is included in the plugin, but it’s disabled by default and safe to remove later.

    Trip route MVP (current):

    • REST endpoint: /wp-json/steves-leaflet-map/v1/trip-planner/route
    • Route drawing uses real road/path geometry (not a straight “superman” line)
    • Fallback chain when ORS is unavailable or no key is set:
    • Public OSRM routing → built-in mock geometry, so the UI always renders something testable
    • Transport mode selector in the UI:
    • Walking / Driving / Biking
    • Passed to the backend as profile
    • Round-trip direction clarity:
    • Return-leg steps are labeled with RETURN: so visitors can visually distinguish “to” vs “return”
    • “Trip end” control:
    • Round trip (return to start) or one way (end at last stop); defaults to round trip
    • Admin-set block destinations still override the toggle

    Current status:

    • Route panel + steps rendering are implemented for the MVP
    • Step text is derived from routing instructions returned by the backend
    • Intended to be easy to extract into a separate add-on plugin later

    Privacy:

    • Geolocation is only requested when the visitor clicks My location
    Custom Fields (Post Meta)

    You can set coordinates and name using custom fields on the post/page:

    • lat – Latitude
    • lng – Longitude
    • location_name – Marker name

    Optional marker styling:

    • marker_color – When set, the marker will render as a colored circle marker
    • Accepts hex colors such as #ff0000 or simple color keywords such as red
    • marker_class – Adds a CSS class to the marker for custom styling
    AirNow AQI

    The AirNow REST endpoint supports:

    • bbox queries for viewport-aware loading
    • lat + lng + radius queries
    • zip queries
    • Server-side caching via transients

    Default radius:

    • 25 miles

    If you want a slightly larger AQI area in the frontend, increase the radius value used by the map UI or shortcode/block settings.