The SVG Map widget is one of the best Google map widgets. The SVG map can display Regions, Countries, or any other Geographical data. You can show a tooltip or modal when a region/country is clicked or navigate to a different page or section of the website.
This document will explain the customizations of the widget.
Inserting SVG Map Widget
Use the search bar of the Elementor editor page, search by typing SVG Map, and then the widget will appear on the menu. Just Drag it and Drop it on the page.
Default View of the SVG Map
The Word Map with a geographical area Tooltip on the screen is the default view of the widget.
Content Tab Explore
The content tab contains the basic controls of any widget. You can change the default layout using these options one by one. So let’s start with our direction.
Map Settings
Go to Content > Map Settings
In the Map Settings section, first, you can select the Continent which will be shown on the map. You can choose from the pre-defined continents here (i.e., Asia, Africa, America, Australia, World, etc.).
This demonstration will have the Word(Default) option selected.
With the Display Type option, you can go with soft Visualization (auto color range and color selectors) and Custom (specific region color setting) map display as you wish.
Additional Settings customization
Below, you can see a switcher named Show Legend. When enabled, the map will show a legend bar. You can make the legend counter numbers Bold and Italic if you enable the two switchers. Also, you can set the Font size.
The legend bar can show between minimum and maximum values.
You can select Tooltip Trigger ( Focus, Selection, and None) here. When you select Focus, then hovering over the Geographical area will show the information as a tooltip.
You can also set the Font Size for the tooltip. Also, you can use the Bold & Italic switchers to show the font in bold Style or italic style.
Add Regions
Go to Content > Regions
In the Regions section, you can see a default Region is showing. You can add as many items as you want. Just click on the “+ ADD ITEM”
Each item will let you Select Country from the pre-defined options. You may customize the Country Name also. Then assign the Active region Color.
Then you can edit the Tooltip Content field (text and numbers). If you like, you can set the Link for the specific region. When visitors click on the Region, it will open a new tab on the browser to that target link.
By following these, you can add as many items as you want and show how many countries you want.
Customization with Style Tab
The Style Tab contains the basic options to change the default appearances of any widget. Here we will make an interactive design by using the style tab.
Make the Map Style
Go to Style > Map Style
In this Map style section, you can customize the Width and Height of this Map. Then customize the Color, Legend Color, Background Color, Inactive Region Color, and Border Color.
Tooltip Stylization
Go to Style > Tooltip
Here, you can set the Tooltip Height and Width. You can customize the Text Color and Background Color also.
Just like that, you can make the SVG Map more interactive and awesome.
Video Assist
The SVG Map widget tutorial video coming soon. Please check the demo page for examples.
Thanks for being with us.
