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.
Pick a category below to find nearby places.
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"]
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"]
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
- 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)
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)
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 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)
For the Main block (steves-leaflet-map/map), the block settings are extensive (map + query + points + list + overlays).
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)
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
- 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. Does not implement any proximity / “What’s Nearby” panel.
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
- 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.
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.
