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.
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 NOAA HMS Smoke overlay via REST and cached geometry parsing
- 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 Trip Planner module scaffold (experimental, removable, disabled by default)
- 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
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"]
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"]
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"]
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 smoke / 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
- layer – Map layer: osm, topo, satellite, cycle (default: osm)
- openfire – Set to true to add an OpenFireMap overlay toggle
- trails – Set to true to include an OSM trails overlay in the layers control
- trails_padding – Degrees of padding added around the point bounds for the Overpass bbox (default: 0.02)
- trails_cache_ttl – Cache time in seconds for Overpass results (default: 21600)
- show_list – Set to true to show a list of points below the map
- popup_template – Popup layout preset: default, compact, or simple (default: default)
- popup_meta_keys – Comma-separated allowlist of point.meta keys to render in the popup (blank = show all)
- list_meta_keys – Comma-separated allowlist of point.meta keys to render in the points list (blank = show all)
- list_template – Points list layout preset: default, compact, or simple (default: default)
- list_show_thumb – Set to true to show the point thumbnail in the list
- list_show_title – Set to true to show the point title in the list
- list_show_excerpt – Set to true to show excerpt/description in the list
- list_show_meta – Set to true to show rendered meta rows in the list
- list_show_terms – Set to true to show the terms chips in the list
- list_layout – Points list layout preset: row or grid (CSS-only; default: row)
- ajax_points – Set to true to load points via REST/AJAX instead of embedding them in the HTML
- ajax_ttl – Cache TTL in seconds for REST point queries (default: 600)
- cluster – Set to true to enable marker clustering
- locate – Set to true to enable the Explore nearby panel
- distance – Default distance value. Leave blank to start unfiltered
- distance_unit – Distance unit: mi or km
- post_type – Post type to query for taxonomy mapping (default: post)
- taxonomy – Taxonomy name for mapping posts by term
- term – Term slug for mapping posts in that taxonomy
- source – Data source mode:
- blank – normal behavior (single point / taxonomy / manual points)
- saved – map the current visitor’s Like & Save items
- point_set_id – Load a saved Point Set by numeric ID or slug
- geo_address_key – Meta key used for address geocoding fallback (defaults to the plugin setting; fallback is address)
- point_taxonomy – Manual points taxonomy label used by the block editor. Default: dataset_category
- point_category – Optional manual points category label shown in the block editor
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.
You can also use the Steve’s Leaflet Map block in the Gutenberg editor.
Block settings include:
- Map settings
- Query settings
- Point Sets
- Like & Save source
- Manual Points
- Nearby / distance filtering
- Optional overlays
- Popup templates + popup/list point.meta allowlisting (Phase 1)
- Points list templates + section visibility controls (Phase 2)
- Points list layout preset (list_layout: row/grid) (Phase 3, CSS-only)
Important block behavior:
- Enable Use manual points to use points entered in the Manual Points panel
- If Load points via AJAX or Point set ID is enabled, manual points are not used
- Manual Points now include a visible taxonomy selector and category label field
- The default taxonomy name for manual points is dataset_category
WP Admin → Settings → Steve’s Leaflet Map
- Address meta key (geocoding): Meta key to use as an address when geocoding is needed (default: address)
- Point Sets: Create/edit reusable datasets from CSV/JSON
- AirNow API key: Set the key used by the AirNow REST endpoint
- NOAA/NWS Alerts and NOAA HMS Smoke are fetched through REST endpoints and rendered as overlays when enabled in the frontend assets
WP Admin → Settings → Steve’s Leaflet Map → Point Sets
- 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
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
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)
- Free fallback when ORS API key is not configured:
- Uses public OSRM routing to generate a path polyline + steps
- 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”
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
- Location is used in the browser to filter/sort the list and draw the radius circle
- Location is not sent to the server by default
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.
