Skip to content
HomeDemosDocsChangelogPricing
Log In
Get MapSVG
MapSVG 9/Documentation/Customization

Code editor overview

Select the component you want to customize and open Code. Its source picker groups Templates, JS, and CSS in one list. Empty groups are omitted. Each source retains its own text and Undo history; choosing another entry does not overwrite it.

Use the detailed guides for the complete customization reference carried forward from v8:

  • Templates and record context: Handlebars syntax, every documented field type, related records, WordPress/ACF data, distances, and shortcode embeds.
  • JavaScript and events: middleware, initialization, repository and interaction events, controller lifecycle, and template scripts.
  • CSS and component styling: CSS sources, all seven selectors from v8, Shadow DOM boundaries, and scoped examples.

Editing permissions and saved work

Section titled “Editing permissions and saved work”

Custom code editing requires the Code editor module. JavaScript additionally requires the corresponding WordPress permission; the editor is read-only when that capability is unavailable. HTML templates and CSS have their own applicable editing controls. A visible Code tab does not by itself establish that a paid module or permission is available.

Changes belong to the current draft and follow its autosave/synchronization lifecycle. Saving code does not publish it. Work in a separate draft for an experiment, inspect the preview and browser console, then use Publish when ready. Shared Collection and Query changes remain outside the draft’s configuration snapshot.

Three different kinds of JavaScript

Section titled “Three different kinds of JavaScript”

A Map event receives function(event). Middleware receives function(data, ctx) and returns the processed data. A template afterRender script receives function({ el, map, controller }). Preserve the signature supplied for the selected source.

Enter the bare function itself; do not wrap it in an assignment, <script> element, or an extra pair of parentheses. A syntax error may remain saved as draft text while the last valid event callback continues running in the live editor. Correct the source and reload before deciding it is ready to publish.

The JavaScript API reference remains available for method details. It is a separate reference surface; confirm a method against the current v9 runtime when adapting an older example.