BLACK FRIDAY: 50% OFF all Pro plans
Pro from $18 a year or $60 lifetime, no code needed
Ends Cyber Monday, 30 Nov. Lock in the price today
Get 50% Off
Guide

Country Map Pro

How to set up and style the Country Map widget in Elementor.

Country Map draws a world map where the countries you choose get their own color, tooltip, info panel and link. You can also group countries, add markers by coordinates and show a legend. The map data ships with the plugin, so nothing is loaded from an outside service.

Part of: Bright Addons Pro.

Set it up

  1. Drag Country Map onto the page and open Countries.

  2. Add a row per country in Highlighted Countries: pick the Country, a Color and type the Title and Text.

  3. Optional: add Groups in Country Groups and Markers with Latitude and Longitude.

  4. In Click and Hover, choose what On Click does and set the Info Panel Position and the Tooltip.

  5. In View and Zoom, set Show to Whole world, Zoom to a region or Zoom to the highlighted countries.

  6. Switch on Show a Legend if you want one, then set the land, country, marker and panel styles in the Style tab.

Content options

Countries

Option What it does
Highlighted Countries The list of countries with their own color and content.
Country The country to highlight.
Color The fill color of this country.
Hover Color The color while the pointer is over it.
Title Shown in the tooltip and the info panel. Empty uses the name of the country.
Text The text for the tooltip and info panel.
Image An image for the info panel.
Link The address this country links to.
Button Text Text of the info panel button for this country.
On Click What a click on this country does, or the same as the map.

Country Groups

Option What it does
Groups The list of groups.
Group Name The name shown in the legend.
Countries The countries of the group.
Color The color of every country in the group.
Text Shown for every country of the group, under its name.
Link A link for every country of the group.

Markers

Option What it does
Markers The list of markers.
Label The name of the marker.
Latitude A number from -90 to 90. North is positive.
Longitude A number from -180 to 180. East is positive.
Style Dot, Pin, Ring or Icon.
Pulse Animation Adds a pulse around the marker.
Show Labels on the Map Prints the marker labels next to the markers.

Click and Hover

Option What it does
On Click Open the info panel, open it with a button, follow the link, or nothing (tooltip only).
Info Panel Position Over the map at the country, right of the map, left of the map or below it.
Text Before a Country Is Chosen The text of the empty info panel.
Tooltip For every country and marker, only highlighted countries and markers, or off.
Tooltip Content Title and text, or title only.
Other Countries Do Not React Countries that are not highlighted keep their color on hover and show no tooltip.

View and Zoom

Option What it does
Show Whole world, a region, or the highlighted countries.
Region The region to zoom to, such as Europe or Asia.
Space Around (%) Room left around the countries the map zooms to.
Zoom Buttons Adds zoom in and zoom out buttons.
Reset Button Adds a button that goes back to the start view.
Drag to Move Lets visitors move the map.
Pinch to Zoom on Touch Screens Lets visitors zoom with two fingers.
Zoom With the Mouse Wheel Off, with Ctrl or Cmd held down, or always.
Closest Zoom How far visitors can zoom in.

Map Options

Option What it does
Dots for Very Small Countries Gives countries such as Singapore, Malta or Monaco a dot so they can be clicked.
Country Borders Draws the lines between countries.
Ocean Color The color behind the land.
Entrance Effect The highlighted countries get their color one after another when the map scrolls into view.
Label for Screen Readers The name of the map that screen readers announce.

Legend

Option What it does
Show a Legend Adds a legend to the map.
Entries Highlighted countries or country groups.
Position Left of the map, right of the map or below it.
Include the Markers Adds the markers to the legend.
Hide on Phones Hides the legend on phones.
Bright Addons Pro

Unlock this and 79 more Pro widgets

One license gives you every Pro widget, all 10 extensions, the Theme Builder and priority support. From $18 a year, with a 14-day money-back guarantee.

Style options

These sections are in the Style tab.

  • Map Box

    Widest size, Alignment, Map Shape, background and border.

  • Land and Highlighted Countries

    fill and border colors of normal and highlighted countries.

  • Small Country Dots and Markers

    size and colors for normal, hover and selected, the marker Shadow and Labels.

  • Tooltip

    box, Title and Text styles.

  • Info Panel, Info Panel Button and Info Panel Close Button

    box, Padding, text styles, image Height, button colors and sizes.

  • Legend

    Heading, Items, colors per state, Border Radius and Padding.

  • Zoom Buttons

    Direction, size and colors.

Map data

The country shapes are a file inside Bright Addons Pro and load from your own site. No outside map service is used. Made with Natural Earth. Free vector and raster map data at naturalearthdata.com.

Tips

  • On touch screens the first tap opens the info panel, which then holds the button to the link.

  • A country without a link opens its info panel, even when On Click is set to Follow the link.

  • A group entry in the legend lights up its countries and dims the rest. A country entry opens that country.

  • On phones the legend always sits below the map.

Questions and answers

Does the map load anything from another site?

No. The country shapes are a file inside the plugin and load from your own site. No outside map service is used.

Where does the map data come from?

The map data is made with Natural Earth, a free public domain map dataset.

Can each country link to a page?

Yes. Add the address in Link and set On Click to Follow the link, for the map or for that country only.

Can I show only one continent?

Yes. Set Show to Zoom to a region and pick the Region, or choose Zoom to the highlighted countries.

Need more help?

Check the troubleshooting guide, or contact support with the page address and what you expected to happen.

Troubleshooting guide
All guides