PixMapr Under the Hood: A Map Library, a Drawing Tool, and a Plugin Split – PixMapr is my WordPress plugin for turning static images into interactive ones: draw polygon, circle, or rectangle hotspots on a picture in the admin, attach content or a product to each region, and embed the result with a block or shortcode.
It ships as PixMapr Lite, free on WordPress.org, and PixMapr Pro, the commercial edition powering my Online Store Kit stores.
This entry is the project write-up: what it is built from, how it is put together, and what shipping it involved.
Key Takeaways
- PixMapr stands on Leaflet, a battle-tested mapping library, which gives it pan, zoom, and geometry that scales with the image for free.
- Hotspots are authored visually with drawing tools in the WordPress admin; the plugin never asks anyone for a coordinate.
- The front end renders real, indexable HTML with keyboard support, ARIA labels, and a tappable list fallback on phones and for no-JS visitors.
- The edition split follows one rule: a feature is entirely in or entirely out. Lite carries no locked UI and no dead code.
- Lite is genuinely unlimited: images, hotspots, all three shapes, theming, and both embed paths.
- Pro adds the heavy machinery: six layouts, numbered markers with a legend, fullscreen pan and zoom, multi-image Scenes, WooCommerce add to cart from the image, engagement counts, and export or import.
- Both editions read and write the same data, which makes upgrading a non-event by design.
The Problem I Discovered Before Building PixMapr
Clickable images on the web have been stuck between two bad options: hand-coded HTML image maps that break under responsive layouts and say nothing to assistive tech, and hotspot plugins whose free tiers are throttled demos.
I wanted the authoring experience of a design tool, the rendering quality of a proper front end, and a free edition I would not be embarrassed to put my name on.
The Foundation: a Mapping Library, Repurposed
The observation that unlocked the project: an image hotspot editor is a map editor pointed at a photograph.
Mapping libraries already solved shape drawing, hit testing, panning, zooming, and coordinate systems that survive resizing.
So PixMapr builds on Leaflet, with Leaflet.draw providing the authoring tools, instead of reinventing a geometry engine from scratch.
That choice bought me:
- Authoring: polygon, circle, and rectangle tools that feel like drawing, not data entry.
- Scale-independence: hotspot geometry maps cleanly onto whatever size the theme renders the image at.
- Pro’s map behaviors: pan, zoom, and fullscreen came almost naturally, because under the hood the image already is a map.
What a mapping library does not give you is accessibility or WordPress integration, and that is where most of the real work went.
The PixMapr’s Front End Is HTML, Not a Canvas Mystery
Every hotspot renders with a real label and real content in the DOM.
Keyboard users can walk the regions and open them; screen readers get announcements; search engines get text.
On small screens, and for anyone browsing without JavaScript, the shapes step aside for a tappable hotspot list, because precision-tapping a small polygon on a phone is not an interaction, it is a lottery.
Embedding is deliberately unexciting: a native block for the block editor and a [pixmapr] shortcode for the Classic Editor, Divi, and anything else that renders shortcodes.
Performance-wise, the plugin can serve a scaled image size instead of the original and lazy-loads images near the viewport.
The Edition Split, as an Engineering Constraint
Splitting a plugin into free and paid editions is where codebases usually rot: flags everywhere, disabled buttons, upsell nags.
I held the split to one rule, and it turned out to be a genuinely useful engineering constraint: every feature is either fully present, code and UI and copy, or fully absent. There is no third state. Lite is not Pro with features switched off; it is a build that simply does not contain them.
What each edition contains:
| Lite (free) | Pro | |
|---|---|---|
| Images and hotspots | Unlimited | Unlimited |
| Shapes | Polygon, circle, rectangle | Same |
| Layouts | Side panel, tooltip | Left, right, top, bottom, lightbox, tooltip |
| Markers | Shapes only | Numbered markers plus auto legend |
| Navigation | Static image | Pan, zoom, fullscreen, phone layout |
| Scenes | No | Multi-image sets with a front-end switcher |
| WooCommerce | No | Product hotspots, add to cart without reload |
| Themes | 5 plus theme builder | 20+ plus theme builder |
| Analytics | No | View and open counts, no personal data |
| Ops | No | Export or import in one file, 10 auto snapshots, duplicate |
| Builders | Shortcode-compatible | Native Elementor widget, Beaver Builder module |
Both editions share the same data structures, so Pro activates on top of a Lite site and every image keeps working.
That is not an upgrade script; it is the same schema.
Shipping PixMapr
The release trail, for the record: Pro sells through my own store with licensed, signed automatic updates; Lite went through the WordPress.org plugin review and is live in the directory.
The review pass was the most productive code audit the project got, and it hardened my rule about the edition split: anything that looks like a feature but does not work like one has no business in a free plugin.
There will be a public demo running the full Pro build if you want to poke at the result.
Also read:
- Introducing WP MyLinks
- Introduction to OneClick Chat to Order
- OneClick WP Hello
- Indonesian Banks for WooCommerce
- Enter Datar WordPress Theme
Frequently Asked Questions (FAQ’s)
Why build on a mapping library instead of plain SVG or canvas?
Because the hard problems of this domain, drawing tools, hit testing, zooming, and resolution-independent geometry, are exactly the problems mapping libraries have spent fifteen years polishing.
Leaflet gave PixMapr a proven interaction core so the project’s effort could go into WordPress integration, accessibility, and the editorial experience.
Is the Pro edition a different codebase?
No. It is the same engine with more features compiled in, and both editions speak the same data format.
That is why Lite images light up with Pro capabilities the moment Pro activates, and why the two can even run side by side.