Map Charts

✅

Link to the plugin page: https://zeroqode.com/plugin/map-charts-plugin-for-bubble--1588616840542x584071926349390300

Demo to preview the plugin:

✅

Live Demo: https://zeroqode-demo-20.bubbleapps.io/map_charts?utm_source=zeroqode&utm_medium=referral&utm_campaign=btn_demo_plugin

✅

Bubble Editor: https://bubble.io/page?version=live&id=zeroqode-demo-20&name=map_charts&tab=Design&type=page

Introduction

The Map Charts plugin provides an interactive geographic map that includes all countries and major cities worldwide. Users can hover over a region (country, state, or city), and the selected area will change color while detailed information becomes visible. It’s a no-code solution for building interactive data visualizations, analytics dashboards, or educational projects in Bubble.

Key Features

Title	Description	Type
Background color	Sets the background color of the entire map.	Color
Country color	Sets the default color for each country. Can be set dynamically (e.g., using another plugin or database value).	Сolor (optional)
Tooltip text style	Selects the font style for the tooltip text. Available options: normal, italic, oblique.	Dropdown
Tooltip text color	Sets the text color displayed in the tooltip.	Color
Transparency	Controls map opacity - from `0.0` (fully transparent) to `1.0` (fully opaque).	Number
Font Saturation	Adjusts the saturation intensity of map text and labels.	Number
Tooltip background	Sets the background color of the tooltip container.	Color
Country border color	Sets the border color outline for each country.	Color
Clear fill styles	Removes any previously applied fill styles and resets color behavior.	Checkbox (yes/no)
Color on hover	Sets the highlight color that appears when a user hovers over a country.	Color
Show info table	Enables or disables the information table display when hovering over a region.	Checkbox (yes/no)
Tooltip full info	Toggles whether full country information is displayed inside the tooltip when hovering.	Checkbox (yes/no)

Title	Description	Type
Name	Returns the official name of the selected country or region.	Text
Native Name	Returns the country’s name in its native/local language.	Text
Phone	Returns the international dialing code for the selected country.	Number
Continent	Shows the continent where the selected country is located (e.g., Africa, Europe).	Text
Capital	Returns the name of the capital city.	Text
Currency	Displays the currency used in the selected country (e.g., USD, NGN, EUR).	Text
Languages	Returns a list of languages officially spoken in the country.	Text
Flag	Returns a URL link or identifier for the country’s official flag.	Text

Title	Description
Map is clicked	Triggered when a user clicks on any country, city, or region on the map. You can use this event in workflows to display detailed information, update elements, or run other actions based on the selected region.

Map Charts

Demo to preview the plugin:

Introduction

How to setup

Step 1 – Install the Plugin

Step 2 – Add the Plugin Element to Your Page

Step 3 – Configure Properties

Plugin Element Properties - Map charts

Fields

Exposed states

Element Events

Changelogs

Update 18.07.25 - Version 1.24.0

Update 17.06.25 - Version 1.23.0

Update 14.05.25 - Version 1.22.0

Update 14.05.25 - Version 1.21.0

Update 28.01.25 - Version 1.20.0

Update 16.01.25 - Version 1.19.0

Update 23.07.24 - Version 1.18.0

Update 13.06.24 - Version 1.17.0

Update 09.04.24 - Version 1.16.0

Update 19.10.23 - Version 1.15.0

Update 15.09.23 - Version 1.14.0

Update 12.09.23 - Version 1.13.0

Update 06.09.23 - Version 1.12.0

Update 11.07.23 - Version 1.11.0

Update 19.06.23 - Version 1.10.0

Update 23.02.23 - Version 1.9.0

Update 22.02.23 - Version 1.8.0

Update 16.07.21 - Version 1.7.0

Update 12.07.21 - Version 1.6.0

Update 18.02.21 - Version 1.5.0

Update 08.05.20 - Version 1.4.0

Update 05.05.20 - Version 1.3.0

Update 05.05.20 - Version 1.2.0

Update 21.04.20 - Version 1.1.0

Update 10.04.20 - Version 1.0.0