CodeCanyon Mapplic - WordPress Plugin

Guide to Configuring and Using CodeCanyon Mapplic on a WordPress Site

CodeCanyon Mapplic is not meant for a standard street map. It is designed for cases where your site already has its own visual layout: a floor plan, shopping mall map, exhibition hall, campus, museum, resort layout, event seating map, residential complex plan, or illustrated map. In this guide, you will learn how to turn that static layout into an interactive WordPress map: prepare an SVG or image, create the map in the admin panel, connect zones to locations, configure popups, the directory, search, filters, responsiveness, and final page testing.

This article does not just retell the product listing. The practical workflow matters more here: what to check before installation, which settings to enable first, where errors usually appear, how to avoid losing coordinates when replacing a file, how to work with multi-floor layouts, and when a different tool may be a better fit.

This guide is intended for a site owner, content editor, WordPress developer, or agency specialist who receives a floor plan or property map from a designer and needs to publish it so visitors can quickly find the right place, open details, and share a link to a specific point.

When an Interactive Map Works Better Than a Standard Map

The main difference between Mapplic and services built around map tiles, streets, and city routing is that the plugin works with your own visual asset. If your goal is to show addresses on a real city map, it is usually easier to use Google Maps, OpenStreetMap, or a dedicated store locator plugin. If your goal is to show the internal layout of a building, halls, booths, sections, apartments, rooms, or even a fictional area, a standard map is rarely helpful. What users need is not the roads around the property, but clear navigation inside your own layout.

Mapplic turns an SVG, PNG, or JPG into an interactive layer. That layer can include locations: markers, clickable SVG areas, popups, images, links, phone numbers, business hours, groups, and filters. In the WordPress version, maps are created from the admin panel and embedded on a page with the shortcode [mapplic-map id="MAP_ID"]. This is especially convenient when the content will be managed by a site editor rather than a developer.

The plugin is especially useful when visitors arrive with a specific question: "where is the store," "which booth is occupied," "which apartments are available," "how do I find the right department," or "which zones belong to a certain category." If the map does not help the visitor take action on the page, it is better not to complicate it with interactivity. Mapplic is best used for layouts where clicks, search, filters, or direct links actually shorten the user's path.

Typical Use Cases Where Mapplic Shows Its Strengths

• Shopping mall or business center: the visitor is looking for a tenant, a store category, a floor, and contact details.
• Museum, campus, hospital, or school: the map helps people find a building, department, classroom, hall, or service area.
• Exhibition, festival, or temporary venue: the organizer shows booths, entrances, food areas, registration, and sponsors.
• Residential complex or development project: the visitor sees lots, buildings, sections, unit status, and a link to a detailed page.
• Illustrated map: the author preserves the map's own visual identity instead of forcing it into a standard geographic base layer.

In these scenarios, good visuals alone are not enough. The map needs stable location identifiers, a clear directory, thoughtful grouping, solid behavior on small screens, and working links. Otherwise, interactivity quickly turns into a decorative layer that is difficult to maintain.

Who Mapplic Is a Good Fit For, and Who Should Look Elsewhere

CodeCanyon Mapplic is a strong fit for projects where the map is a standalone interface rather than a small contact block. The plugin makes sense if you already have, or plan to prepare, a property layout and can describe each point with names, descriptions, groups, images, and links. The more stable the structure of the property, the easier the map is to maintain: a shopping mall, museum plan, or campus changes far less often than a list of courier points or a CRM-based address database.

The plugin may not be the best choice if you expect automatic map generation, road navigation, city route calculation, large geodata handling, or advanced GIS analytics. The Mapplic documentation clearly distinguishes the cloud platform from the WordPress plugin: the WordPress version is self-hosted on your own site, managed from the admin panel, and updated manually, but some cloud-platform features do not carry over to the plugin. So before implementation, do not just check the feature list. Make sure you understand which version of the product actually includes the feature you need.

Strong Candidates for Implementation

Mapplic works best on sites where the map is connected to WordPress editorial content. For example, each store may have its own page, while the map opens a short card and links to the full details. Or each exhibition booth may have a logo, category, and link to the exhibitor profile. In projects like these, Mapplic handles visual navigation, while WordPress remains the source of pages, SEO content, forms, and the overall site structure.

If an agency is working on the map, Mapplic is convenient because it separates layout design from location content. The designer prepares the SVG, the editor fills in the locations, and the developer checks the page embed and adds careful CSS adjustments if needed. The most common risk point is an unprepared source file: a poor-quality SVG, an overly heavy raster image, or chaotic element IDs are much harder to fix in the admin panel than to clean up in advance.

When the Product May Not Be a Good Fit

Do not choose Mapplic just because the word "map" sounds universal. If you need routing on real roads, distance calculation, clusters of thousands of addresses, geocoding for visitor submissions, sales heatmaps, or real-time sync with external databases, it is better to evaluate specialized geo services. If you only need a simple clickable image with a few areas, a lighter hotspot image plugin may be enough. If JavaScript-free content accessibility is a top requirement, compare Mapplic with alternatives before publishing.

Practical takeaway: Mapplic is worth testing when you already have your own layout and a clear location model. If you do not have the source layout yet, solve the map design first, then choose the interactivity tool.

What to Prepare Before Installation

Preparation saves more time than any post-install configuration. Mapplic can work with SVG, PNG, and JPG, but not every format supports the same level of interactivity. SVG is usually the better option for floor plans, sections, halls, and lots because vector elements can be linked to locations by ID. A raster image can also work, but interactivity will rely on markers and coordinates rather than clickable shapes inside the file itself.

The Source Layout

If the map needs clickable rooms, zones, or lots, check the SVG in advance in an editor such as Illustrator, Figma, or Inkscape. Interactive elements should be collected in a group with the MLOC- prefix, and the direct child elements of that group should have unique names that begin with a letter. Those names are then linked to the ID field of the locations. If the designer leaves random layer names, duplicates, or elements outside the required group, Mapplic will not recognize the layout completely.

For a raster map, different factors matter more: file size, readability, and weight. Visitors will zoom the map, so tiny labels in the source file quickly become a problem. A file that is too large will slow down loading, especially if the map appears on a high-traffic page. Remove decorative details that are unnecessary even when zoomed in, and do not pack into the map anything that can be moved into a popup card instead.

The Location List and a Consistent ID System

Before creating the map, it helps to build a table. At a minimum, you need id and title, but in practice it is better to also add group, short description, link, phone, business hours, image, and internal fields such as floor, type, or status. Mapplic supports CSV as a data source: table rows can be pulled into the map, and when the id matches, the data can merge with existing locations. That is useful for a shopping mall or exhibition, where there are many tenants and changes are managed in a spreadsheet.

The ID should remain stable. If a room is called s101 today and an editor changes it to shop-101 tomorrow, direct links, filters, CSV relationships, and SVG elements may stop matching. The store name can change as often as needed, but the technical identifier should ideally be set once and kept consistent.

The WordPress Page and Environment

Check where the map will be placed. For large layouts, it is better to use a dedicated page with a wide container rather than placing the map in a narrow column next to a widget. Confirm that the theme is not clipping content with overflow: hidden, that an aggressive optimizer is not lazy-loading scripts in a way that breaks the map, and that there is no security policy blocking the plugin's SVG, JSON, or scripts. If the map will be used inside a page builder, test it on a standard WordPress page first, then move the block into the builder layout.

Installing in WordPress and the First Check

In the WordPress version, Mapplic is installed like a standard plugin from a ZIP archive. In the admin panel, open Plugins, then Add New Plugin, choose Upload Plugin, upload the mapplic-wp.zip archive, and activate it. Another option is to extract the archive and place the folder in wp-content/plugins/, but for most sites the built-in upload flow in the admin panel is easier.

After activation, go to the Maps section and create a new map. At this stage, do not move the entire project over all at once. Create a test map with one layer and two or three locations. The purpose of the first check is to confirm that the plugin opens, the map file loads, coordinates are saved, the shortcode renders on the page, and the site theme does not break the container dimensions.

How to Insert the Map on a Page

Publishing uses a shortcode in this format:

[mapplic-map id="MAP_ID"]

Replace MAP_ID with the ID of the map you need. You can see it in the map list or in the map editor URL. Insert the shortcode into a standard WordPress block, a shortcode block, or the appropriate field in your page builder. After publishing, open the page in an incognito window or while logged in as a user without admin privileges. That way you can check not only the editor interface, but the actual map loading behavior for a real visitor.

Initial Troubleshooting Right After Insertion

If the map does not appear, do not start changing every setting at once. First, check the basics:

1. The plugin is activated, and the map has been published and saved.
2. The shortcode contains the correct ID with no extra spaces.
3. The page is not caching an older version without the shortcode.
4. The layer file is accessible by URL and is not returning an access error.
5. There is no browser console error related to a script, JSON, SVG, or image failing to load.

Only after that should you move on to behavior settings, styles, and modules. This order reduces the chance that you waste time looking for the issue in filters or popups when the map simply never loaded its base file.

SVG, Layers, and Multi-Floor Layouts

Layers are the foundation of a Mapplic map. Each layer contains an SVG, PNG, or JPG. A simple plan may only need one layer. For a shopping mall, hospital, campus, or ship, multiple layers are often necessary: floors, buildings, zones, decks, sections, or temporary layout variants. In the editor, you can reorder layers and assign each one an ID, name, file, dimensions, and switching behavior.

The most important layer setting is the correct source file dimensions. If the width and height are entered incorrectly, locations will visually drift, especially after zooming. For a multi-floor layout, all layers should use the same dimensions. Otherwise, the floor switcher will replace the background while the location coordinates begin to align to a different grid. Before adding dozens of points, confirm dimension consistency using two test locations in different corners of the map.

How the SVG Element-to-Location Link Works

In an SVG, the interactive area needs a name that can be linked to a location. Mapplic looks at elements inside a group whose name starts with MLOC-. When a direct child element of that group has a unique name and a Mapplic location exists with the same ID, that area becomes clickable. This differs from a standard marker: the user can click directly on the room, lot, or sector instead of clicking a pin.

If you are building an apartment map, the elements might use IDs such as a101, a102, a201. If it is an exhibition map, use names like booth-a1, booth-a2, booth-b1. The key point is not to tie IDs to the tenant name or a temporary participant. The place stays the same even when the content changes.

When to Use a Marker Instead of a Clickable SVG Zone

A marker is the better choice when the point matters more than the area: an information desk, entrance, ATM, stage, food point, or restroom. For rooms, lots, and booths, a clickable area is usually better because it gives users a more accurate target and clearer visual feedback. Sometimes both approaches are used together: the SVG area shows the object status, while a marker adds an icon or short label.

Do not overload the map with pins. At small zoom levels, they can overlap each other. Mapplic includes crowding and clustering modes, but that does not replace good information architecture. If the map contains too many points, distribute them across layers, groups, the directory, and filters.

Locations, Cards, Actions, and Reusable Presets

A location is the interactive unit of the map. It has a required ID plus a set of optional properties: title, about, desc, thumb, image, link, phone, hours, group, tags, coord, layer, zoom, action, popupType, preset, and custom fields. You do not need to fill in everything at once. Start with the minimum set of fields that visitors will actually see and use.

Card Content

For most sites, a useful card consists of a short name, one paragraph of description, an image or thumbnail, a contact detail, and a link to more information. The about field works well for a short line in a tooltip or directory. The desc field is better for a longer description in a popup. You can add richer content to the description, but do not turn the card into a full standalone page. If there is a lot of information, provide a short summary and link to a separate WordPress page.

Images usually follow one of two common patterns. thumb is used as a thumbnail in the directory or as a visual hint. image can be displayed in the card or gallery. If there are multiple images, make sure they do not make the popup too heavy. For a shopping mall map, a logo or storefront is enough; for a museum hall, one clear photo is enough; for a residential complex, a section rendering or apartment plan usually works well.

Click Actions

In Mapplic, you can choose an action for each location. By default, popup is usually the right choice: the visitor clicks a place and sees a card. redirect is useful when the click should immediately open a link. media works well when the main action is to display an image at full size. switch-layer helps build navigation between layers, for example when clicking a building should open the plan for the correct floor. none leaves only focus or zoom behavior without a card.

The selected action should match user expectations. If the map shows stores, it makes sense to open a card with a brief summary and a link. If the map shows apartments, it is often better to open the property page directly. If the map shows museum halls, a card with a description and image is more intuitive than an immediate redirect. Do not use a direct redirect when visitors expect to see context first.

Presets for Statuses and Repeating Types

Presets let you configure a color, style, action, popup type, and other properties once, then assign them to many locations. This is especially helpful for maps with repeating statuses: available, occupied, reserved, service, entrance, restroom, food, VIP area. If you need to change the color of the "occupied" status tomorrow, you update the preset instead of editing every location manually.

Presets also help with CSV updates. In the table, you can keep only id, title, preset, and a few meaningful content fields, while the visual logic stays in Mapplic. That way, the editor does not have to copy a color into every row and is less likely to make mistakes. One thing to remember: if CSV merging is enabled and the table row contains a value, it may override the inherited preset-based setting. After every import or update, always check several locations using different presets.

Directory, Search, and Filters Without Overload

The directory turns the map from a nice-looking layout into a practical navigation interface. In Mapplic, the directory can be sorted, shown with thumbnails, grouped by categories or first letter, placed on the left or right in horizontal mode, collapsed, shown with counters, and filtered by the active layer. For a large property, it is almost a required module: visitors should not have to guess where to look on the layout.

Search and filters work together with both the directory and the map: matching locations stay active, while the rest are visually dimmed. Text search works well for names and short descriptions. Group-based filtering is convenient when locations already belong to categories. A dropdown or set of toggles is useful when you want to filter by a custom field, such as floor, room type, status, or zone.

Groups as the Foundation of Filtering

Groups are the easiest filtering mechanism for editors to maintain. You create groups such as "Stores," "Cafes," "Services," "Parking," or "Available Apartments," assign each one a color and icon, and then attach them to locations. A Groups-type filter does not require JavaScript conditions and reads group assignments directly from the locations themselves. For most content-driven maps, that is enough.

If one location has multiple roles, for example a store belongs to both "Clothing" and "First Floor," do not try to store everything in a single group list. Separate the meaning: the group handles the category, the layer handles the floor, and a custom field handles status or other extra conditions. That keeps filters from conflicting and makes it much clearer for editors where each piece of data should be updated.

Filters Based on Custom Fields

For more precise scenarios, Mapplic uses JavaScript expression conditions. For example, a filter can keep locations where l.country === value, or show objects with a populated phone number using l.phone. It is a powerful mechanism, but it requires care: a mistake in the field name or quotation marks can make the filter return nothing.

If filters are meant for editors without technical skills, do not make them write conditions by hand. A developer or experienced administrator should create the fields and filters once, while the editor only selects values in location cards or in the CSV. For verification, open the map, enable each filter individually, then test multiple filters together. In Mapplic, filter effects accumulate, so overly strict conditions can hide everything.

Do not skip empty-result testing. The page should clearly communicate what happens when a filter finds no locations, so visitors do not assume the map is broken.

Behavior, Appearance, and Responsive Settings

Once the map loads correctly, locations open properly, and the directory helps users find the right place, you can move on to fine-tuning. In Mapplic, settings are organized by purpose: layer and map settings, CSV, search, directory, interaction, zooming, appearance, localization, legend, business hours, responsive breakpoints, and advanced options. Do not enable everything just because it is there. The map should support a specific user scenario.

Zooming and Controls

Zooming helps visitors inspect small areas. Settings such as zoom, maxZoom, padding, initArea, resetButton, zoomButtons, mouseWheel, mouseWheelShift, and closeReset control how visitors zoom the map and return to the full view. For maps with small rooms or sections, zooming is almost always helpful. For a simple layout with just a few large zones, minimal zoom may be enough.

Pay special attention to the mouse wheel. On a long page, aggressive zoom behavior can be frustrating: the user tries to scroll the page but zooms the map instead. In that case, it often makes sense to require Shift for mouse-wheel zooming or keep explicit zoom buttons visible. On a page where the map takes up the main content area, you can allow freer behavior.

Direct Links and Map State

Deeplinking means syncing the map state with the URL. When the deeplinking option is enabled, visitors can open a link that immediately focuses a specific location or applies a group. This is very useful on marketing pages: a sales team can send a link to a specific pavilion, a museum can link directly to a hall, or a real estate team can send a link to a selected apartment. But the feature depends on stable IDs. If IDs change, old links will no longer open what users expect.

In the simplest setup, deeplinking: true enables location links. For group sync, Mapplic uses an array with location and group. On a WordPress site, you do not necessarily need to write these values manually, but it helps to understand the mechanism: the map reads URL parameters on load and restores the saved state. The verification is simple: open a location, copy the address, paste it into a new window, and make sure the map opens in the same state.

Appearance and Safe CSS Adjustments

The Appearance panel controls the main color, theme, border radius, animations, and custom CSS. The main color should ideally come from the property's brand, but do not forget contrast. If the accent color is too light, the active area and buttons may disappear against the layout. Keep border radius moderate: Mapplic supports a limited range, and an overly soft interface does not always fit technical layouts.

The documentation shows that you can carefully adjust the container and tooltips in the Custom CSS field. Below is a small custom adaptation based on public CSS classes from the documentation. You can paste it into Mapplic's Custom CSS field or into the theme's additional CSS if you need to improve tooltip readability on a light-colored map. Do not edit plugin files.

/* Custom adaptation for a readable Mapplic tooltip */
.mapplic-container {
    background-color: #f5f2ea;
}

.mapplic-tooltip {
    border-radius: 4px;
    box-shadow: 0 10px 30px rgba(30, 45, 60, 0.14);
}

.mapplic-tooltip h4 {
    font-size: 20px;
    line-height: 1.25;
}

Verification: open the map, hover over several locations, compare the tooltip on light and dark areas of the layout, then check the mobile view. Rollback: remove the CSS from the field, clear the page cache, and reload the map. Always test any CSS change on a copy of the map or a draft page first, because one broad selector can affect every map on the site.

Responsive Breakpoints

Breakpoints let you change the layout as the container gets narrower: switch the map into portrait mode, change height, adjust directory width, change the number of columns, and alter the list view. In Mapplic, this matters more than the theme's general responsive behavior. A map can be technically responsive and still be frustrating to use if the directory takes up half the screen or the plan becomes too short.

The minimum test is to open the page on a wide screen, at tablet width, and in a narrow browser window. Test three actions: find a location through the directory, open the card, and close the card to return to the full view. If any of these actions requires too much scrolling, adjust the container height, portrait mode, or directory behavior.

Practical Example: A Shopping Mall Map with Floors and Categories

Let us walk through a concrete scenario. You need to publish a shopping mall map on a WordPress site: two floors, stores and services, a tenant directory, category filtering, popup cards, and direct links to specific stores. This is just one possible use case, but it shows Mapplic's strengths well: layers, locations, groups, presets, directory, search, and result verification.

Goal

The visitor should open the page, see the map, select a floor, find a store by name or category, open a card with a short description, business hours, phone number, and a link to the tenant page. The administrator should be able to maintain the store list without editing the SVG every time a tenant changes.

Preparation

Prepare two SVG files with identical dimensions: floor-1.svg and floor-2.svg. In each file, the interactive rooms should be placed inside a group called MLOC-shops or another group with the MLOC- prefix. Use stable room names such as s101, s102, and s201. Separately, prepare a table with the columns id, title, about, group, phone, hours, link, and preset.

Decide in advance which groups visitors should see. For a shopping mall, categories such as "Clothing," "Food," "Services," "Entertainment," "Home," and "Beauty" are usually enough. Do not create a separate group for every brand. The brand already appears in the location title, and the filter should help narrow the list.

Configuration Steps

1. Create a new map in Maps and upload the first-floor SVG as the first layer.
2. Add the second layer with the second-floor SVG, give the layer a clear name, and verify that its dimensions match the first layer.
3. Enable SVG element recognition or create locations manually so the location IDs match the room names.
4. Create category groups and assign colors that do not conflict with the colors of the layout itself.
5. Create presets for statuses or types, such as available, occupied, or service, if the map shows more than just active tenants.
6. Fill in several cards manually: title, short description, phone, hours, image, and link.
7. Enable the directory, search, and group filter. At first, keep the filters visible or easy to open so users immediately understand that the directory is interactive.
8. Configure zooming, the reset button, and the layer switcher. On a multi-floor map, the layer switcher should be obvious.
9. Enable deeplinking for locations if the marketing team or tenants will be sharing links to specific points.
10. Insert the shortcode on a draft page and test the full scenario from search to link click.

Result Verification

Open the page as a visitor and run five checks. First, clicking a room on the SVG opens the correct card. Second, searching by store name finds the right location and highlights it on the map. Third, category filtering leaves only the appropriate points visible and does not hide service locations that should always remain visible. Fourth, switching floors does not reset the map into a strange position or distort coordinates. Fifth, a copied link to a specific store opens that exact store in a new window.

If any check fails, go back to the specific chain of "setting - input - logic - result." For example, if a filter returns nothing, do not check the filter color first; check the group field on the locations. If clicking a room does nothing, check the SVG element ID and the location ID. If the second floor shows markers from the first floor, check the layer field on the locations.

CSV, Custom Fields, and Supporting a Large Map

When there are only a few locations, an editor can manage them directly in the Mapplic interface. When there are dozens or hundreds, manual maintenance becomes risky. CSV lets you move tabular data into a familiar format: each row is a location, each column header is a property key, and the id field is required. This works well for shopping malls, exhibitions, campuses, and real estate maps where the object list changes regularly.

CSV can be used in two ways. The first is to import rows into the map and then disconnect the source. That works well for a one-time upload. The second is to keep an external CSV connected so the map reads data from a file or published spreadsheet. In merge mode, CSV values can override fields on an existing location with the same id. That means CSV should be treated not just as a "list of names," but as the source of truth for the fields you choose to manage there.

Which Fields to Keep in CSV

A good CSV model stores dynamic data: title, short description, link, phone number, hours, group, status, and image. It is better to keep the map structure, layers, styles, presets, and behavior in Mapplic itself. That way, the designer or administrator does not lose visual settings every time the spreadsheet is updated.

Custom fields add flexibility. For example, a wheelchair_access field can be used in an accessibility filter, capacity in a room card, and status in a preset or object filter. In descriptions, you can use variables like {{ phone }} or {{ email }} so you do not have to duplicate repetitive text in every card.

Rules for Safe Data Updates

• Before a bulk import, export the current locations from Mapplic and save a copy.
• Do not change id unless you are prepared to update the SVG, direct links, filters, and related pages.
• Check CSV headers carefully: one extra space in a field name can create a new field instead of updating the existing one.
• Update 3 to 5 test rows first, then import the full file.
• After the update, check different location types: a regular store, a service point, a location without an image, and a location on another layer.

For ongoing maintenance of a large map, you need a simple operating process: who updates the table, who publishes the SVG, who checks the page, and who signs off on the result. Mapplic gives you the tool, but maintenance quality depends on data discipline. A map does not break because it has a lot of locations; it breaks because IDs, layer dimensions, and fields stop matching.

Compatibility with the Theme, Cache, Accessibility, and Security

An interactive WordPress map depends on more than just the plugin. It is affected by the theme, the page builder, script optimization, caching, SVG upload policies, user roles, and overall page size. That is why compatibility testing should be a separate implementation stage, not an afterthought right before publishing.

The Theme and the Page Container

A large map does not work well inside a narrow container. If the theme constrains content to a small column, use a page template without a sidebar or a full-width content block. Check whether the parent container hides overflow. Sometimes a popup card or control elements look clipped not because of Mapplic itself, but because of the theme CSS.

If the map is inserted through a page builder, compare its behavior on a standard WordPress page. This helps separate plugin issues from builder-container issues. In the case of conflicts, start with a simple page, then gradually add theme blocks, builder sections, and optimization features.

Cache and Script Optimization

Optimization plugins can combine, defer, or move scripts. For an interactive map, that is a risk: the map may appear blank, load without controls, or only work after a reload. If the map breaks after caching is enabled, temporarily exclude Mapplic scripts and data from aggressive optimization, clear the page and browser cache, and then re-enable optimizations one by one.

Do not draw conclusions from a single view in the admin panel. An administrator often sees the page without full caching, while a visitor gets the minified and deferred version. Test in a private window and, if possible, in another browser as well.

SVG and Security

SVG is a convenient format, but it is not just a regular image. In the WordPress ecosystem, older and lightweight Mapplic variants have had issues related to SVG and XSS, and the very idea of interactive SVG requires caution. The practical conclusion is simple: only trusted users should be allowed to upload SVG files, every file should come from a known source, and author/editor roles should not be given unnecessary access to map management.

If an outside designer prepares the map, ask for the final SVG without embedded scripts, external links, unnecessary hidden layers, or editor junk data. For Illustrator, the documentation recommends disabling the option to preserve editing capabilities and using presentation attributes for CSS properties during export. After uploading, check not only the appearance, but also the file size, group structure, and element names.

Accessibility and Keyboard Navigation

The Mapplic data schema includes an accessibility setting meant to improve keyboard and screen-reader accessibility. Even so, any interactive map remains a complex interface for part of the audience. Duplicate important information in the directory, cards, and regular page text. If the map shows service points, add a nearby list or block with key contacts. The map should improve navigation, not become the only way to access essential information.

Common Mapplic Issues and Troubleshooting

Mapplic issues are usually not about "the plugin is broken," but about a specific chain: layer file, ID, coordinates, container, filter, cache, or access rights. The best troubleshooting path is to move from the basic display to the more advanced modules.

The Map Does Not Display on the Page

Symptom: you see an empty block, the shortcode appears as plain text, or the area is completely blank. Possible causes include an incorrect ID in the shortcode, the map was not saved, the plugin is not activated, a script was blocked by an optimizer, the data file is unavailable, or the theme container has zero height.

Check: insert the shortcode on a clean draft page, clear the cache, open the page while logged out, and inspect the browser console. If everything works on a clean page, the problem is most likely in the theme, builder, or optimization layer. If it fails everywhere, go back to the map in the Maps section and verify the layer, save state, and ID.

SVG Zones Are Not Clickable

Symptom: markers work, but clickable rooms or sectors do not respond. Possible causes: the elements are not inside an MLOC- group, the element names do not match the location IDs, the elements are nested too deeply, the names do not begin with a letter, or they are duplicated.

Fix: open the SVG in a vector editor and check the group, the direct child element names, and repeated IDs. After replacing the layer file, test two or three zones again. If the map already contains many locations, test on a copy of the file first so you do not break coordinates or existing relationships.

Locations Shifted After Replacing the Map

Symptom: markers or SVG-linked areas are visually offset relative to the layout. The most common cause is that the file dimensions or layer aspect ratio changed. In Mapplic, the layer dimensions must match the actual width and height of the map, and for multi-floor layouts all layer sizes should match.

Fix: restore the original dimensions or export all layers at the same size. Check the File width and File height fields. If you used marker coordinates, do not replace the file with a cropped or stretched version unless you are also recalculating the coordinates.

Search or a Filter Hides All Points

Symptom: after selecting a category, the directory becomes empty and the map dims everything. Causes include missing group assignments on locations, a filter pointing to the wrong custom field, an error in the JavaScript condition, or multiple filters creating an overly narrow result set.

Check: enable one filter, then the next. Open the location card and inspect the group field or the custom field referenced by the condition. If you are using an expression like l.floor === value, make sure the floor field actually exists on the location and that its values match the filter options.

The Map Works Poorly After Caching Is Enabled

Symptom: everything looks fine in the admin area, but for visitors the map is blank, cards do not open, or controls stop working. The cause is often deferred loading, script combination, or stale cached HTML. Fix: temporarily disable optimization for the map page, clear the cache, then re-enable settings one by one. If one specific option breaks the map again, keep Mapplic excluded from that optimization.

Popups Look Clipped or Too Small

The cause may be the theme CSS, container dimensions, popup positioning, or card content that is simply too long. Start by shortening the description to a useful summary, test a different popupType, and then look at CSS. If a visual fix is needed, use Custom CSS rather than editing plugin files.

When to roll back a setting: if the map becomes unstable after enabling a new filter, CSV merge, custom CSS, or optimization setting, restore the previous state and test the change on a copy of the map. That is faster than trying to debug several unknown variables at once.

How to Verify the Finished Map Before Publishing

The final check should feel more like accepting a finished interface than doing a quick visual pass. Build a short visitor scenario and walk through it on the live page. If the map is for a shopping mall, find a store, apply a category, switch floors, open the card, and follow the link. If the map is for an exhibition, find a booth, verify the sponsor area, open a direct link, and make sure it still works after refreshing the page.

Minimum Checklist

• The map loads for a logged-out visitor.
• The shortcode renders the correct map, not an old test version.
• Each layer has the correct size and a clear name.
• Key locations open the correct cards.
• The directory, search, and filters do not return empty results because of data errors.
• Direct location links open the correct map state.
• The map does not break after clearing the cache and reloading the page.
• On a narrow screen, the user can open, read, and close a card.
• Important information is duplicated in text or in the directory if the map is a complex interactive element.

For large maps, it helps to define several "control points": the first and last location in the directory, one location on every layer, one location without an image, one location with a link, and one location from each group. After a bulk CSV or SVG update, check those points specifically. That makes it much easier to catch coordinate drift, lost group assignments, or card errors.

SEO and Indexing of Map Content

An interactive map improves user behavior, but it should not be the only place where important text exists. If a store, hall, or property has meaningful information, it is better to give it its own page or at least a text list near the map. That helps search engines, users with accessibility limitations, and visitors whose scripts did not load. Mapplic works best as a visual navigation layer, while WordPress should remain the source of indexable content.

When CodeCanyon Mapplic Is the Right Choice

CodeCanyon Mapplic is worth using if the map on the page needs to be a working navigation tool rather than just an illustration. You have your own layout, data-rich locations, clear categories, a need for search or direct links, and a site built on WordPress. In that case, the plugin helps you build an interface around the property: the map layer, clickable areas, cards, directory, filters, styles, and a verifiable shortcode-based publication flow.

Before implementation, do not skip SVG preparation, stable IDs, a test map, theme container checks, and a data update workflow. These things sound less exciting than "interactive map," but they are what determine whether the map will still be maintainable a month later. If your use case is limited to a few simple hotspot areas, a lighter tool may be enough. If you need city geography, routing, and large address datasets, choose a dedicated mapping platform instead.

If, after reviewing the scenarios, you see that Mapplic fits your use case, prepare the source layout, build a draft map, and only then move to production publishing. To test it on your own site, you can go to the CodeCanyon Mapplic download, install the ZIP archive in WordPress, and follow the workflow described above from one layer and a couple of locations to a full map with a directory and filters.

The final decision should be practical: the map should speed up the search for the right point, give visitors context, and remain manageable for the site team. When those conditions are met, Mapplic turns a product or property page into a clear interactive reference, rather than just adding another attractive block to the site.

Final Check of the Interactive Map Before Publishing

Before you let a Mapplic page be indexed and start sharing it with users, it is worth doing a separate final review specifically from a visitor's perspective. In the admin area, the map may look correct, but on the live page different things matter: does the floor plan fit within the available width, do tooltips open without overlapping nearby elements, does the object list get hidden under the theme header, does search still work after script minification, and does cache interfere with updated JSON map data? This kind of review is especially important for shopping malls, exhibitions, campuses, museums, office layouts, and location directories, where a single error can make the entire navigation experience feel untrustworthy.

Check the Map Layer and Clickable Areas

Open the page with the map in a regular browser window, then click several SVG areas, markers, or rooms one by one. For each point, verify three outcomes: the area is visually highlighted, the popup card shows the correct title and description, and the link or button inside the card goes where the editor expects. If the object has its own location identifier, it should match what is used in the Mapplic settings and in the object list. The most common editorial mistake here is that a polished SVG has already been uploaded, but the layer or element ID does not match the linked location; visually, the map looks finished, but the required area does not respond to clicks.

Test the Directory, Search, and Filters with Real Queries

If the map uses a directory, search, or categories, do not stop after testing a single sample object. Enter a short query, part of a name, a word from the description, and a query typed with the wrong keyboard layout if your audience often makes that mistake. Then enable a category filter and make sure only the appropriate points remain in the list, while the map does not keep showing an old active location as selected. For large layouts, it is especially important to test the empty-result state: the visitor should understand that no objects were found, rather than seeing a frozen list or an outdated card. After changing categories, clear the page cache and optimizer cache, because users typically see the built frontend page, not the Mapplic editor itself.

Check the WordPress Theme Integration

The shortcode or map block should be tested in the same page template where it will actually be published. A wide map may conflict with a sidebar, a sticky header, lazy loading, container overflow settings, or aggressive JavaScript optimization. If the map is meant to be the main working tool on the page, give it enough open space and test its behavior on a mobile screen: zooming, scrolling, opening a card, and returning to the list. If the issue only appears on the frontend and not in the Mapplic editor, first disable script combining and deferred loading for that page, then check for a theme or page builder conflict.

• After editing the SVG - recheck the link between element IDs and locations, and confirm the active click state.
• After importing or bulk-editing points - check several objects from the beginning, middle, and end of the list, not just the first item.
• After enabling cache - open the page in a private window and confirm that visitors see the latest labels, filters, and popup cards.
• After changing the WordPress theme - verify the map container height, touch gesture behavior, and the absence of horizontal page scrolling.

This final pass takes less time than tracking down an error after launch. It also helps you decide whether it makes sense to move on immediately to downloading and testing Mapplic on a separate copy of the site: if the project truly needs clickable areas, an object list, search, and multiple navigation levels, this plugin should be evaluated through a real workflow using your own SVG or floor plan, not just a screenshot.