World Map is a Joomla module that displays an interactive SVG world map from https://www.cssscript.com/animated-accessible-modal-pure-javascript-micromodal/ and author micromodal.
Select countries from the module settings and optionally add tooltip text for each selected country.
The module is intended for use cases such as showing service areas, office locations, partner countries, delivery coverage, project presence, or any other country-based information.
The map does not load demo or sample data. It is displayed only when at least one country has been added in the module settings.
Main Features
- Interactive SVG world map.
- Country selection from the Joomla module settings.
- Optional custom tooltip text per country.
- Translatable country names through Joomla language files.
- Custom map background color.
- Custom active country color.
- Custom no-data country color.
- Custom tooltip background and text colors.
- Optional flags in tooltips.
- Hover or click tooltip behavior.
- Zoom, pan, continent selector, and interaction controls.
- Separate desktop and mobile map height settings.
Basic Settings
Map title
Optional title displayed above the map.
Leave empty if you do not want a visible title.
Map height
Controls the normal/desktop height of the map container.
Accepted values are CSS size values such as:
520px, 60vh, 32rem, 100%
Mobile map height
Optional height used on mobile screens up to approximately `767px` wide.
Accepted values are CSS size values such as:
520px, 60vh, 32rem, 100%
This is useful when the desktop map height is too large for mobile screens.
Countries
Repeatable list of countries that should be active on the map.
Each row contains:
- Country: Selects the country that should be active on the map.
- Text: Optional tooltip text for that country.
A country can be active even if the text field is empty. In that case, the tooltip can show only the country name.
If no countries are added, the module outputs no map.
Display Settings
Background color
Sets the background color of the map area.
Data color
Sets the color used for countries that have been selected in the **Countries** list.
All selected countries use this same color.
No data color
Sets the color used for countries that have not been selected in the **Countries** list.
If left empty or invalid, the module uses a safe fallback color internally.
Tooltip background color
Sets the background color of the tooltip box.
Tooltip text color
Sets the text color inside the tooltip.
Flag type
Controls how country flags appear inside tooltips.
Available options:
- Image: Displays SVG flag images. This uses an external flag image source.
- Emoji: Displays emoji flags where supported by the browser/device.
Hide flag
When enabled, the tooltip does not display a country flag.
Use this if you want a cleaner text-only tooltip or if you do not want external flag images.
Hide tooltips without data
When enabled, countries that are not selected in the **Countries** list remain visible on the map, but they do not show tooltips.
Selected countries still remain active. If a selected country has no custom text, its tooltip can show only the country name.
Show tooltips
Enables or disables tooltips globally.
If disabled, country hover/click tooltips are not shown.
Tooltip trigger
Controls how tooltips are opened.
Available options:
- Hover: Tooltip appears when the pointer is over a country.
- Click: Tooltip appears after clicking/tapping a country.
Persistent tooltips
Comma-separated list of country codes that should have persistent labels/tooltips visible on the map.
Example: GR,CY,DE
This means Greece, Cyprus, and Germany can display persistent labels instead of only showing information on hover/click.
Leave this field empty if you only want normal hover/click tooltips.
Interaction Settings
Allow interaction
Enables or disables map interaction.
When enabled, users can interact with the map according to the zoom and pan settings.
Show continent selector
Shows or hides the continent selector control.
This lets users quickly focus on a continent.
Show zoom reset
Shows or hides the zoom reset button.
When enabled, users can return the map to its initial zoom and pan position.
Zoom buttons position
Controls where the zoom buttons appear.
Available options: Top left, Top right, Bottom left, Bottom right
Mouse wheel zoom
Enables or disables zooming with the mouse wheel.
Require key for mouse wheel zoom
When enabled, the user must hold the required modifier key while using the mouse wheel to zoom.
This helps prevent accidental page scroll hijacking.
Double-click zoom
Enables or disables zooming by double-clicking the map.
Reset zoom on resize
When enabled, the map resets its zoom/pan state when the browser or container size changes.
Advanced Settings
Minimum zoom
Lowest allowed zoom level.
Maximum zoom
Highest allowed zoom level.
Initial zoom
Initial zoom level when the map loads.
A value close to `1` shows the full world map.
Initial pan X
Initial horizontal map offset.
Use this only when you also use a higher initial zoom and want to focus on a specific region.
Initial pan Y
Initial vertical map offset.
Use this only when you also use a higher initial zoom and want to focus on a specific region.
Zoom sensitivity
Controls how sensitive zooming feels.
Lower values make zooming slower. Higher values make zooming faster.
Module class
Standard Joomla module class suffix.
Use this if you want to apply custom template styling to this specific module instance.
Notes
- The module does not display a map until at least one country is selected.
- Tooltip text is optional.
- Selected countries are treated as active even when their tooltip text is empty.
- Countries that are not selected remain visible as part of the world map.
- The module uses plain text for custom tooltip content, not raw HTML.
- If Flag type is set to Image, flag images are loaded from an external flag image source.
- If you want to avoid external flag images, use Emoji or enable Hide flag.
Installation
1. Go to Joomla Administrator → System → Install → Extensions.
2. Upload and install `mod_world_map_final.zip`.
3. Go to Content → Site Modules.
4. Open or create the World Map module.
5. Select a template position.
6. Assign the module to the desired menu items.
7. Add at least one country under Basic → Countries.
8. Publish the module.