A contact page or just any descriptive web page is much more useful with a map. A post about your favorite places for Chinese food is much easier to understand with a map full of pinpoints. A travel blog is that much more fun when you (and you readers) can see at a glance all the places you’ve been. It even becomes more useful if you add an animated map on a web page to give users a vivid description of the place or location.
One of the most powerful WordPress plugins useful in creating awesome animated maps is the Supply Chains Interactive plugin by wpicode.com. It is a complete set of tools to setup a map, create charts or infographics for your supply chain. This article will give you a step by step guideline on how to create an animated map with this amazing plugin.
To get started, download this plugin from wpicode.com website and install it on your website. On the dashboard, you will see an added Supply Chains menu item. Click on the added menu item. This action will open the supply chains admin page and also reveal 3 other sub-menu; Add New, Shortcodes and Settings. On the admin page, you will see several demo chains which you can choose to edit or delete them and create your own chain. For this article, we are going to create an animated map from scratch, therefore, click on the Add New button just below the demo chains or on the Supply Chain sub-menus on the dashboard.
This action will open the Create New Chain page. You will see two fields which you will be required to fill. We have the Name(title) field which is the name of your new supply chain and the Description field which which will be displayed on your animated map. After you are done click on the Save Supply Chain button
After the new chain has been saved, just below it you will see the map settings section which helps you create and edit your map. There are a couple of map options that you are better off setting up right after you create your supply chain. On the right side of the page, you will see the map options settings. Select your region and country.
The Display resolution has three options: Countries, Provinces and Metros. According to the resolution borders are drawn on your map. Not all countries/regions support certain resolution.If the country you select is not available or resolution is wrong, Google charts will display a message just under the title. Please adjust your map settings until this message disappears.
After you are done setting the map options, click on the save supply chain button and scroll to the edit chain items section below.
By default there is no item on the map and you need to create a new item. Before you start adding new items, there are few things that you need to consider.
- Think about what constitutes your supply chain? Retailers, Suppliers, Manufactures?
- Think about the order in which there is movement, for example Supplier > Manufacturer > Retailer.
- In other words, all suppliers will have an order number of 1, the manufacturer will be 2 and the retailers 3.
- Make a list of what items you need to add before you start adding them.
Click on the Add New Item button. You will see a number of fields which you will be required to fill. On the right side you can see the Add New Item box with the following options:
1. Name – the name of the organization, title of some strategy item or simply a location
of a supply chain item
2. Description – description of the company, location or phone of the item
3. Icon – a Font Awesome icon to be displayed, look up the name of the icon you want
and enter it here
4. Order number – this is of crucial importance for the supply chain, enter a number
(integer) that shows the order of this item in the supply chain
5. Link – the link of the item, on the map the link is displayed with the name(title)
6. Target – the target attribute of the link, use _blank to open in new window, leave
empty if not needed
7. Image – upload an image for this item, this is not shown on a map but is displayed
on the other layouts
Click on Save & Add Another and repeat the steps until you enter all your items. As you add these chain items, you will see a blue dot on the map with the title you gave to the item. You can position each dot by just dragging it around on the map. Now, on the map options you will see a added item, the Line Options. This will help you create links between the dots that are on the map. You can adjust the degree and the width of this lines by altering the values on the Line Options. You should end up with something close to this;
When you are done with setting up everything, click on the Save Supply Chain button. Now its time to intergrate this map with our web pages or posts.
Click on the shortcode menu item on the dashboard. This will open the shortcode generator window. You will see a number of options which will be required to fill. On the layout tab, you will see a number of options, choose the map layout. On the select chain dropdown menu, choose the title which you named your new chain. On the select theme dropdown menu, choose the color that you want your layout to have. Then we have the Replay tab, Information Box tab and the Play button tab which can either choose to hide or show.
When you are done setting everything up, you should see the generated shortcode below. Copy the shortcode and embed it in your web page or post. To get the Supply Chain Plugin and use it on your website, download it from wpicode.com website.