Version 1.4
- Native Directions API Integration
- Route Optimization integration
Version 1.3 (Upcoming)
- Geolocation option (adds a “show my location” button)
- Bugfix for mobile— opening infowindows for each marker
- Infowindow toggle button option — makes an AJAX call to the Airtable API. The request toggles a checkbox field in Airtable. Conditional fields can be used based on that checkbox field, e.g. the marker icon or other infowindow content. Use AJAX to update the marker/infowindow content and appearance.
Version 1.2 (Current)
InfoWindow customization for each map post, with Airtable field merge tags
Added a metabox with CodeMirror6 HTML and CSS editors to create a template for the map’s infowindows.
Added a row repeater field to create custom merge tags to pull any data from Airtable to include in the info window template. Those custom merge tags (along with default merge tags for address data) are automatically added to a drop-down menu to insert the merge tag into the HTML editor.
Also added a drop-down menu to the template’s CSS editor to add color tags (using the theme colors entered on the settings page).
Access Manager
Restrict or grant access to the custom map post based on individual user or user role
Version 1.1
Toggle Markers & KML Layer Options
The ability to use/ not use map markers (set with Airtable data) or a KML layer (e.g. a boundary overlay).
Map Uploads Metabox
Advanced fields for file uploads — Simple upload field for a KML file, and a repeater field (to add rows for additional files) for marker icon files.
Added AJAX functionality and mutation observers for users to update marker icon settings (height/width), and the page updates the icon preview size as well as the “Scaled Size:” line to display the setting values.
Custom Modals for Instructions buttons
Added “Instructions” buttons to each field (or field section) on the edit post page, opening modals with a detailed explanation of each setting or section.
Custom Styles Editor
For each website to have the maps match the theme’s color scheme, a custom CodeMirror6 instance was added to the settings page for the JSON to set the map styles object.
“Map Color Settings” section added— Fields to enter the website’s theme color hex values and color preview swatches. Those colors are then used to generate the default JSON schema for the map styles. The JSON code can be edited
Added a custom button to copy the syntax-validated and formatted JSON code from the CodeMirror editor field to import into a map theme editor like SnazzyMaps.
Also added a button to restore the original default JSON generated with the custom color settings.
Code Editor Guide
Added accordion-style elements to list all keyboard shortcuts relating to the CodeMirror6 editor, for both Mac and PC users. Also additional info about the copy/ restore defaults buttons.
Version 1.0
Custom Post Type for Maps
Registers a new custom post type (ddd_map) for creating and managing custom maps.
Custom Maps Settings Page
Added a settings page with fields for an Airtable Personal Access Token, Google Maps API key, Google Maps Geocoding API key for server-side requests.
Displays maps using the Google Maps JavaScript API
Google Maps API key is configurable via the plugin settings page.
Fetches location data from an Airtable base
Added meta boxes to map post edit post page for integration with Airtable— i.e. Airtable Base ID, Table ID, View ID. To display markers on the map, fields to configure Airtable field IDs were added for address fields, coordinates, and marker icon title.
Update Coordinates Metabox
Added a button to initiate a function that retrieves all Airtable records and uses address data to get longitude and latitude coordinates with the Geocoding API. Following a successful GET request, fields are updated in the Airtable records with the coordinates. This is an AJAX-based implementation, displaying server response alerts to the edit post page metabox.
UI enhancement– added spinner indicators for long-running tasks like updating multiple records in Airtable.
Optional Settings Metabox
Fields to optionally enter default map center coordinates, zoom level, and map height/ width were added.
Shortcode Metabox
The shortcode.php file includes everything to build and display the map, including the localization of data for use in the map’s javascript file. A shortcode, like [ddd_map id=”post_id”], is generated to embed the custom map on any post or page. Also added the option to edit the map’s height and width using shortcode attributes.
The shortcode is automatically added to the custom map post to preview the map, but the shortcode is intended to be used on any other page on the website.
Security Enhancements
Included nonces and user capability checks to ensure secure data submission and AJAX requests.
Error Handling and Logging
Implements logging for errors during the Airtable data fetch or Google Geocoding API calls. Add detailed user notifications in case of failure in the coordinate update process.
Leave A Comment