X
Think Differently. Think Visually. Receive weekly expert tips on becoming a better visual
commmunicator, right in your inbox.


Please leave this field empty.

We’re stingy and don’t share emails with anyone.
Nayomi Chibana

Written by: Nayomi Chibana

October 28, 2016

How to Create an Interactive Map with Visme [New Feature]

create interactive map blog post header

Visme is constantly rolling out new features to help users create better visual content, and part of that effort is a new interactive map feature that has plenty of useful applications for communicators of all types.

For example, you can visualize geographic data in the form of:

  • A social and demographic trends map (e.g.: statistics on population, area, race, language, crime, divorce, homicide, etc.)
  • A comparative global map (e.g.: the happiest countries in the world, the most empathetic nations, etc.)
  •  A regional trends map (e.g.: countries with the highest rate of urban growth in South America; ethnic makeup of countries in Asia, etc.)

According to DemandGen Report, 91% of B2B buyers prefer interactive pieces to static ones. Through the very act of clicking, scrolling, dragging or hovering, audiences are already engaging with your content and, therefore, more likely to stick around longer.

Take, for instance, the electoral map below (based on SurveyMonkey data) created with Visme. It quickly catches the eye and entices viewers to engage with the content by clicking and hovering over each of the different states.

(Click on the Maximize button to the lower right of the map to see the full-screen version.)

In this short tutorial, we show you how you can quickly and easily create your own interactive maps with this do-it-yourself visual content creation tool.

(You can also watch the video tutorial below to get started.)

 

Video: How to Create an Interactive Map

1 Create a new project.

charts and data widgets tool

If you haven’t already created a free Visme account, you can quickly do so by signing up with your name and email at www.visme.co. You’ll be prompted to give a name to your project and then choose the type of content you want to create: presentation, infographic, banner, etc.

Since the canvas size of Visme’s presentation slides are already sized according to widescreen dimensions (1366 x 768) and your maps will most likely have a horizontal orientation, you can choose the Presentation option and then select any one of the dozens of templates available.

Next, click on the Charts and Data Widgets icon found on the toolbar on the left side of your screen, as seen above, and then select the Maps option.

 

2 Select a country or region.

map engine visme

After clicking on the Map feature icon, you’ll see this pop-up window appear on your screen.

You can then search for any country by either typing its name in the search bar at the top right or scrolling through the list. Under the Regions tab, you can also visualize major world regions, such as Africa or Asia.

Once you’ve selected your country or region, you can then click on the Edit This Map option in the middle of your map preview to insert your data.

 

3 Insert data.
insert-map-data-visme

Now comes the part where you insert your data. You’ll see that each state or country’s area is shown by default under the Map Data tab. You can either choose to display this column or eliminate this information by simply right clicking over any cell in the column and then choosing the Remove This Column option.

Next, you can insert our own information by clicking on the Add More Data option and then pasting your information from Excel or Google Sheets into the column. You can add as many columns of information as needed, just make sure to rename your column with an appropriate title by clicking on the cell and typing in the name.

Before you copy data from Excel or Google Sheets, make sure it is ordered according to the appearance of each country or state in Visme’s Map Data spreadsheet.

 

4 Change the color of individual states.

change color states visme map engine

In cases where you want to change the color of individual states, you can also click on the swatch under the Color column and choose previously used palettes under the My Colors tab or apply any of Visme’s 50 color combinations under the Presets tab.

 

5 Modify style and data settings.

map settings visme

Under the Map Settings tab, you’ll find several options that will allow you to further customize the way you visualize your data.

 

Style Settings

For example, you can choose a global map color (although the local colors you defined in the previous step will override this setting), or you can show borders between states or provinces and set a color for them.

You can also activate the Show Caption on Hover option so that when the cursor moves over any state, the data inserted in the previous step is displayed. In order to create contrast with your global map color, you can choose a light or dark colored caption.

 

Data Settings

Next, you can display the data inserted under the Map Data tab by activating the Area Value Map setting. Once you do this, other options will appear, such as a drop down menu with the names of all the columns of data your created in Step 3. Here, you can choose which column of data you’d like to visualize.

If you’re dealing with numerical data, you can visualize the range of values in your data set through a corresponding range of colors. To do this, simply choose a Start and End color under the Area Value Colors setting, and the Map Engine will automatically assign a hue within this color range to each of your data points.

Also, you can activate the Show Legend option to display the colors that correspond with each range of values. From the drop-down menu, you can choose whether to display it to the right, left, top or bottom of the map. Depending on your background color, you can also choose to make the color of your Legend Text dark or light.

If your information is textual, not numerical, apply a color to each individual state in accordance with its category, following the instructions outlined in the previous step.

 

6 Publish and share your map.

interactive map preview mode

Finally, you’re ready to publish and share your interactive map with the rest of the world. To make sure everything’s in place, first click on the Preview button at the top of your screen.

Once you’re satisfied with your project, simply click on the Publish button at the top of your screen and click the View button to open your project in another tab in your browser. You can then share this URL with anyone so they can view your project from anywhere.

If you want to embed your project on your site or blog, simply click on the Publish button and then select the Embed tab. Under this option, you’ll see a responsive embed code which you can copy and then paste into your site or blog’s HTML viewer. This will allow viewers to interact with your content from a mobile device as well.

Under the Share tab, click on the Private option to password protect your project.

 

Your Turn

What did you create with Visme’s new interactive map feature?

We’d love to hear about your experience, or if you’d like to share your project with us, don’t hesitate to contact us through the comments section below.

90% of all information transmitted to our brains is visual.
People remember...
Become a more effective visual communicator. With Visme, you can create, share or download your visuals with no design training. It's free! Take a tour.



We’re stingy and don’t share emails with anyone.

About the Author

Nayomi Chibana is a journalist and writer for Visme’s Visual Learning Center. Besides researching trends in visual communication and next-generation storytelling, she’s passionate about data-driven content.

10 responses to “How to Create an Interactive Map with Visme [New Feature]”

  1. […] This is a comprehensive type of graphics that relies on geographical interpretations. Its main aim is to synthesize the data that describe a real area such as a country, city, or neighborhood. There are several ways to unlock the potential of planar visualization that can even lead to interactive maps. […]

  2. Dan says:

    Can these be adapted to use for an office locator and used both in presentations as well as embedded on our website? I need a map widget that we can tie to external address data (or at least an Excel spreadsheet) in order to keep our office locations current (we have 240 offices).

    • Hi Dan, good question. Visme’s interactive maps can be embedded on your website and also used in presentations. Regarding your question on syncing live data on an Excel sheet, this is on our agenda for future release. For now, you can visualize all data on Visme’s map engine spreadsheet.

  3. MO says:

    Is there a way to use this tool, but with a smaller geographic area such as a city boundary?

  4. […] “How to Create an Interactive Map with Visme“ […]

  5. […] How to Create an Interactive Map with Visme | Visual Learning Center by Visme […]

  6. Vaggelis says:

    Hi,
    The map tool is amazing!
    I would like to be able to set some areas “inactive” so that they do not show the caption on mouse hover.
    For example, in a project I have data only for certain areas of the world, and I want to show the caption on hover only for them.
    Currently I’ve set the “show caption on hover” to false and placed some “pins” in the countries which have data. Each pin is linked to a pop-up element with the data for the relevant country.

    • Hi, glad you’ve enjoyed using the map tool. Currently, you can simply “hide” certain countries but not deactivate the hover-over option for captions when they are visible. The solution to this would be, as you’ve suggested, creating pop-ups with the captions. If you have any other questions or requests, please contact https://support.visme.co/

  7. Rowena says:

    What’s up, its nice piece of writing on thee topic of msdia print,we
    all understand media is a fantastic source of data.

Leave a Reply

Your email address will not be published. Required fields are marked *

Create Better Visual Content

Want to access these new features now? Start creating engaging content within minutes with our easy drag-and-drop software. Access 100+ beautiful templates, 100+ free fonts and millions of images and icons right now.