What this solution does
The xlogic.markup module provides a visual editor for creating interactive areas on images directly within the 1C-Bitrix administrative panel. It allows users to select rectangular, circular, and arbitrary areas, assign them colors, names, and descriptions, and link clicks to URLs or infoblock cards. The resulting map is displayed on the site using a dedicated component.
The module is suitable for the following tasks:
Real estate and developers: interactive master plans for cottage settlements, floor plans for new buildings, and business center schemes. Color coding allows clients to immediately see the status of plots or apartments: available, reserved, or sold.
Shopping centers and exhibitions: schemes showing the location of pavilions, stores, and food courts.
Car dealerships and service centers: interactive diagrams of vehicle components. Hovering over a part displays a tooltip with its name and a link to the spare parts catalog.
Educational and reference projects: visualization of diagrams, plans, and infographics with explanations.
Online stores: exploded views of products with part labels.
Key capabilities include the creation of three shape types: rectangle, circle or ellipse, and arbitrary polygon.
Interactive areas and labels
The editor supports dragging areas, resizing them, and adjusting polygon points. Each area can be configured with a specific color, name, and description.
Canvas controls include scaling (zoom and reset), alignment, and snapping to a grid. The interface provides undo and redo actions, object duplication, and layer management.
Clicking an area can open a link, navigate to an element, section, or trading point of an information block, or trigger a modal window.
On the website, the map displays tooltips, names, hover-only visibility modes, and a legend table.
Publishing the map is performed using the xlogic:markup.map component (recommended) or via the shortcode #code#.
The map automatically adapts to browser window resizing and when the source file is replaced. Copying the map within the list is supported.
General iT can connect “Interactive areas and markers”, configure it and verify the integration with the existing website.