Interactive Maps – Carlos Moreira

Building maps with COVID-19 data in WordPress

Carlos Moreira on March 26, 2020

US heatmap with covid-19 cases at the end of March

Recently a lot of users have started using Interactive Geo Maps plugin to create interactive maps with data from the new coronavirus (covid-19).

Here are some screenshots of maps created using the plugin:

US map divided by states with COVID-19 data — US Map

World map with clusters of covid-19 confirmed cases — World Map

These images have data updated on March 25th 2020. You can click the images to open the interactive version of each map.

Sometimes it might be tricky to get the data you need correctly formatted, unless you plan to add the data manually. So in each article there are some tips on how to get the data, sometimes automatically, to populate your maps. Since the plugin allows you to write custom javascript to manipulate the data used by the map, we can use this to fetch external content and format it to be compatible with the map. There’s some reliable data sources out there, which are made available for research and educational purposes, so if your project fits, you can use those data sources.

The data repository by Johns Hopkins CSSE is one of those examples. They have been doing amazing work collecting the data and making it available in this public repository. They provide data for all the world and some more detailed data for specific countries like the US, which allows us to create a US specific map. They mention they might also do this at county level, which would allow us to even create maps for individual states with county information.

The example maps linked above, contain some javascript code to exemplify how you can get that data. Remember to credit the source and help if possible.

The maps are able to have markers with different sizes and colours, heatmaps created automatically based on available data, click actions and custom tooltip content, automatically populated with the available data.

The plugin also has a free version, but it’s limited in what you can do. It’s not possible to have markers with different sizes, read from external data or colour regions in different colours, but you can create a simple map with the information about the affected areas for any country.

Feel free to contact me if you plan to make a similar map and have any particular question.

Interactive Geo Maps

Try it for 7 Days

Get Plugin

Interactive Maps in Elementor Page Builder

Carlos Moreira on May 3, 2018

Elementor Page builder is one of the most popular WordPress plugins of it’s type. It has tons of widgets available, but you might need something different for your project. If you need to create an interactive map of the world or of any country, but need something different than Google Maps, you might want to try the Interactive World Maps plugin. These are some examples of maps created with this plugin.

All Countries

Map Markers

US Map

The plugin is fully compatible with the Elementor Page Builder. After you create your map you can easily add it to your page using the Shortcode widget. Below we’ll explain how you can do this with some very simple steps.

1) Install the Plugin

The plugin is for sale exclusively on Envato Market for only $29 with 6 months support included and all future updates. Once you have the plugin zip file, you can install through the Plugins > Add New > Upload interface in your administration. Once you have the plugin installed you’ll see the new ‘Interactive Maps’ menu entry in your administration menu.

2) Build your Map

The plugin comes with more than 300 maps, where you can colour regions or add markers. Both regions and markers can be interactive, displaying tooltips on hover and perform actions on click, like opening a new page or display information on a lightbox or next to the map. Follow the onscreen instructions and create the map to fit your needs. There’s a video tutorial available for beginners also.

Once you have your map saved, you’ll have a unique shortcode. That shortcode will be used to add the map to your page.

3) Add the Map to your Elementor page

The current version of the plugin will not add a new map widget to Elementor builder. However you can use the map shortcode on the existing Shortcode Widget. Just add the shortcode widget to the place on the page where you want the map to display and add the map shortcode there. The preview will not display the map immediately, but once you save your page and preview it, you should see your map.

And that’s it. You can create as many maps as you want and add them into different shortcode widgets. You can also add the map shortcode together with normal text in a text editor, but the Elementor preview will not display the map placeholder, just the shortcode itself, but once published, the map will also display.

If you have any question about Elementor or the Interactive World Maps plugin leave a comment and I’ll try my best to help.

Get Interactive World Maps plugin for only $29

One time fee. All future updates included and 6 months support.

Get Plugin

Interactive US Map on your Squarespace website

Carlos Moreira on January 8, 2018

Squarespace is one of the most popular site builders available, it has definitely become one of the best tools to create attractive websites with a professional look.

Many business owners or even bloggers will need to add an interactive map of the United States of America to their website to showcase locations across the country or information that varies from state to state. The Interactive Maps Generator script that I developed a while back, allows you to generate a US map divided by states using the Google Geochart API.

The steps are simple:

Get the Interactive Maps Generator
Build the US Map following the on-screen instructions
Copy the Embed Code
Place it on an Embed Content block on your SquareSpace website
Save your changes

You can embed the map on your squarespace website easily once you’ve built it. The script costs $16 and you can create as many maps as you want for your website. It includes not only the map for the US, but also for all other countries in the world.

Example Map

US Map

Using the Interactive Maps Generator

Once you have the script (get it here), unzip the file and open the index.html file on your browser. Make sure you unzip the file and not open it directly from inside the zipped file, the script won’t work this way. Once you have the generator working follow the onscreen instructions to create your map. The first step will be to select ‘United States of America – States’ in the ‘Region to display’ option. You should then see the US map below in the preview. Follow the onscreen instructions to build your map. To colour states, use the ISO-3166-2:US codes.

You’ll be able to colour states or add markers to specific locations. If you use markers we advise you to add a Google Maps API Key in the generator. There will be options on how to get one.

Get the Embed Code

Once your map is ready, you’ll just need to copy the content of the ‘Javascript Embed Code’ box to place it on your squarespace site. Make sure you select all the content of the box, so all the necessary code is copied.

Interactive Maps Generator Screen

Paste the Embed Code

In your squarespace website, go to the edit screen of the page where you want to place the map and click the ‘+’ button to add a content block (More information on how to add blocks). Select the ‘Embed’ option.

The embed screen will only show a field to add a URL, but you can click the < / > button to add the code directly. Once you click that button a new screen will display, with a bigger text area where you should place the code you copied from the generator.

Save your changes

Once you save these changes, you should see the map on your page. You now have a US map on your squarespace website! You can get the map generator script on Envato Market. It will work on most modern browsers, no need to install any new software.

WordPress Maps

If you’re looking for a similar but much more flexible solution for WordPress, I strongly advise you to check out Interactive Geo Maps WordPress plugin.

World Map on Divi

Carlos Moreira on November 17, 2017

There are several reasons why you might want to have a world map on your Divi powered website. The builder already includes a great module that allows you to add a map generated by Google Maps to your page. However you might be looking to add something more simple, more stylized, that fits your design.

I have developed a plugin called Interactive World Maps that is 100% compatible with Divi and allows you to add a map to your page using a different technology, also from Google, that generates interactive vector maps. You can colour countries, link them to specific pages, add information that will display on tooltips or on lightboxes and even add markers to specific locations. Here’s an example of how a map can look like:

All Countries

Although the plugin doesn’t add a new module to the Divi Builder, it works with shortcodes, so you can add it in any module that accepts text. Here’s how to add the map to your Divi page:

1) Install the Plugin

You can get the plugin for only $21 with 6 months support included and all future updates. Once you have the plugin zip file, you can install it like through the Plugins > Add New > Upload interface in your administration. Once you have the plugin installed you’ll see the new ‘Interactive Maps’ menu entry in your administration menu.

2) Build Your Map

On the plugin’s website, you’ll find some instructions and even a video on how to build your first map. Depending on what you want to achieve, you’ll need to do different things. But basically you should read the instructions on screen so you know what you need to do.

3) Add Shortcode to your Page

Once you save your map, you’ll have access to a shortcode with this format:

show-map id=’X’

You can place this bit of text in any module from the Divi Builder that accepts text. Most likely you’ll end up adding it on the Text Module. Simply copy the shortcode and add it inside the text module, in the text editor. Once you save your page and preview it, you should see your map.

When the responsive mode is enabled for the maps, they will be as big as the container where they are placed. If you place them inside a full width row, then the map should take the full width also, creating a full screen map.

Feel free to ask any questions below on the comments.

If you have already purchased the plugin and you need support, please contact me through the support page on Envato Market.

Get this plugin for only $21 one time fee.

6 months support included and all future updates

Get Plugin