Interactive SVG map (objects on images)

What this solution does

The Interactive Map module converts static images, plans, and diagrams into clickable website elements. A visual editor allows users to highlight areas, assign colors, and add tooltips and links.

This tool optimizes spatial data visualization by replacing text lists with an interactive plan. It suits real estate applications, including master plans for housing estates, floor plans for new buildings, and business center schemes with color-coded status indicators for plots or apartments. It is effective for shopping centers and exhibitions, enabling navigation through pavilions, stores, and food courts with links to detailed descriptions. Auto dealers and service centers benefit from interactive vehicle diagrams that display part names and links to parts catalogs on hover.

Interactive SVG Map (Objects on Images)

The module includes a built-in visual editor that allows coordinate mapping on images without involving programmers. Within the Bitrix administrative panel, users can simply upload an image and outline required areas using polygons, circles, or rectangles.

The status color coding feature enables assigning distinct fill and stroke colors to each zone. This allows for a clear visual representation of object statuses: green indicates "available," yellow indicates "booked," and red indicates "sold."

Informative tooltips display a pop-up window containing the object name, price, or brief description when the cursor hovers over a selected area.

The solution is fully responsive: the map automatically adjusts to window size, displays correctly, and scales smoothly on screens of any dimension, from large monitors to mobile phones.

The module is fully optimized for touch screens. On mobile devices, areas are easily tapped with a finger without false triggers.

The module enables the creation of interactive SVG maps by placing clickable objects on images. The setup process is designed to be intuitive for content managers without requiring specialized technical skills.

To create a new map, navigate to Services → SVG Maps → Map List in the admin menu and click the Add Map button. Enter a map name, such as 'Site Plan' or 'Mall Floor Plan', and upload an image in JPG, PNG, or WebP format.

Once the image is loaded, a visual editor appears. Three marking tools are available: freehand drawing, polygon creation, and point placement. Use the mouse to outline specific areas or place markers at required locations.

When adding an object, a configuration panel opens immediately. Here you can set a name that appears in the tooltip on hover, specify a destination link, choose the fill color for the area, or adjust the size of the added points.

5. Site placement. After saving the map, its unique identifier will appear in the list. Navigate to the desired page on your site, open the Bitrix visual editor, and add the standard goodsol:imagemap component. In the component settings, specify the obtained ID. The interactive map will immediately appear on the page and be ready for interaction with visitors.

General iT can install “Interactive SVG map (objects on images)”, configure its settings and verify its operation in the existing project.