Accesing the component in the administrator

After the installation of iMaps you can access the component using the top menu in the administrator. Go to Components >> iMaps

The first time you load this page you will find an empty list, but when you add some maps you will see a list like this one

List of mapsIn this list there are four fields displayed:

  • Status: Published or Unpublished
  • Title: Custom name of the map
  • Shortcode: This shortcode is used by the content plugin. If you paste it in an article, module or a third party component, the content plugin will replace the shortcode with the map
  • Id: Unique id of the map

Create your first map

If you are in the list view, you can create a new map using the New green button in the left corner of this page. You can also create a new map using the top menu of the administrator Components >> iMaps >> Add map

The following form will be loaded

Create your first map

This form has five main areas:

  • Title: The title of the map
  • Map settings: Main configuration o the map, like Region to display, background color, responsive, interactivity, etc.
  • Preview: A preview of your map. This preview is automatically updated which each change in the map settings or if you add a new region
  • Add your regions. Simple mode: You can add your regions to display one by one with this mode
  • Add your regions. Advanced mode: This is a textarea where you can write or paste a multiline string with all your regions. You can use it too for importing & exporting your maps.

Map settings explained

Let's see summary of each configuration parameters for your map

  • Region to display: Dropdown list where you can choose your map. Check the complete list of available maps
  • Display mode: There are three display modes. Regions, Markers and Markers with Coordinates [Link to demos]
  • Active region action: You can choose what will happen if some clicks in a region. The options are: Open url (same window), Open url (new window), Alert message, Custom action. If you select custom action, a textarea will be displayed and you can add Javascript code to create your custom action.
  • Enable responsive: If you check this option, you will create a responsive map. If not checked you will see two new fields for fixed Height and Width.
  • Width: Width of the map. Only visible is responsive isn't enabled.
  • Height: Height of the map. Only visible is responsive isn't enabled.
  • Keep aspect ratio: Check it if you want to Keep the aspec ratio of the map. This will avoid a distorted map if the width and height aren't correct.
  • Background color: Background color of the map.
  • Inactive Region color: Color for the inactive regions
  • Map border width: With of the map border
  • Map border color: color of the map border
  • Interactivity enable: If you check it, the regions will be highlighted when you put your mouse on and if you click the action will be executed.
  • Interactivity show tooltip: If you check it, the tooltip of the region will be displayed when you put your mouse on
  • Tooltip text color: Text color of your tooltip content
  • Markers size: If you have choose display mode markers, you can set the size of the markers.

Add your first regions

It's time to add your firsts region. Let's do it with an example.

We are going to create a map to show the Unemployment statistics of Europe. Here you have a screenshot of the map. Use this map settings in your map. One you have setup your map, we'll show you how to add your regions.

Europe - Unemployment statistics

Add your first regions using simple mode

Go to Add you regions >> Simple mode tab and click on the button Add place. A modal box will be displayed. The yellow box will give you some help information to fill the fields.

Add you region. Modal box

 

For each region you have the following fields:

  • Region code: This is the most important field. This field is used to select the region to Display. For example if you cant to display Spain in your map, the region code is ES, IT for Italy or FR for France. In the screenshot you can see the different region codes for the countries in Europe. In the yellow box, you will get some help for gettint this codes. You can check the complete list of region codes here
  • Title: Title to display in the tooltip
  • Tooltip text: Text to display in the tooltip
  • Action value: Url to open, message to display in the alert box or custom value for the custom action.
  • Color: Color for the region

Add your first regions using advanced mode

Go to Add you regions >> Advanced mode tab. You will see a textarea. If you have add some region using simple mode, you will see your region here. If you didn't add any region, it will be empty.

Advanced mode

If you copy&paste the following text, your map will be generated with the same regions as the example. You can create your regions using this text mode if it's easier for your.

 

ES,Spain,22.7%,https://en.wikipedia.org/wiki/Spain,#ff0000;
FR,France,10.5%,https://en.wikipedia.org/wiki/France,#0033ff;
DE,Germany,4.7%,https://en.wikipedia.org/wiki/Germany,#fff70f;
IT,Italy,12.4%,https://en.wikipedia.org/wiki/Italy,#2ba100;
GB,United Kingdom,5.4%,https://en.wikipedia.org/wiki/United_Kingdom,#e529f2;
IE,Ireland,9.4%,https://en.wikipedia.org/wiki/Republic_of_Ireland,#f0a330;
PT,Portugal,13.0%,https://en.wikipedia.org/wiki/Portugal,#3e7a3c;
NL,Netherlands,7.0%,https://en.wikipedia.org/wiki/Netherlands,#fa7532;
BE,Belgium,8.5%,https://en.wikipedia.org/wiki/Belgium,#a30000;
LU,Luxembourg,5.7%,https://en.wikipedia.org/wiki/Luxembourg,#8fd2ff;
CZ,Czech Republic,5.9%,https://en.wikipedia.org/wiki/Czech_Republic,#ff0a0a;
HU,Hungary,7.3%,https://en.wikipedia.org/wiki/Hungary,#349630;
SK,Slovakia,12.1%,https://en.wikipedia.org/wiki/Slovakia,#597beb;
RO,Romania,6.9%,https://en.wikipedia.org/wiki/Romania,#d9d200;
BG,Bulgaria,10.1%,https://en.wikipedia.org/wiki/Bulgaria,#027523;
PL,Poland,7.9%,https://en.wikipedia.org/wiki/Poland,#9c36a3;
AT,Austria,5.7%,https://en.wikipedia.org/wiki/Austria,#40ebe5;
CY,Cyprus,15.6%,https://en.wikipedia.org/wiki/Cyprus,#d17907;
HR,Croatia,17.5%,https://en.wikipedia.org/wiki/Croatia,#db2c40;
DK,Denmark,6.3%,https://en.wikipedia.org/wiki/Denmark,#e0243a;
SI,Slovenia,9.3%,https://en.wikipedia.org/wiki/Slovenia,#3e96d1;
EE,Estonia,6.1%,https://en.wikipedia.org/wiki/Estonia,#75c8ff;
FI,Finland,9.4%,https://en.wikipedia.org/wiki/Finland,#4e72c2;
GR,Greece,25.6%,https://en.wikipedia.org/wiki/Greece,#08379c;
LV,Latvia,9.7%,https://en.wikipedia.org/wiki/Latvia,#ab2846;
LT,Lithuania,8.9%,https://en.wikipedia.org/wiki/Lithuania,#266b14;
MT,Malta,5.7%,https://en.wikipedia.org/wiki/Malta,#db1818;
SE,Sweden,7.8%,https://en.wikipedia.org/wiki/Sweden,#ffd900;

Display your map

You can display your map in a Joomla article, a module or in a third party extension. Our content plugin will replace this shortcode with your map.

There are two ways for adding your map to your content.

  • Using the shortcode
  • Using the Insert Map Button in your editor

Using the shortcode

Once you have save your map, you will see a notice message with the shortcode of your new map. This shortcode is also in the list of you maps in Components >> iMaps.  This shortcode should looks like this [imaps id=XXX] where XXX is the id number of your map.

Using the Insert Map Button

In your content editor, you will see a button called Insert Map. If you can't see this button, go to Extensions >> Plugin Manager and check if the plugin Button - Imaps is Enabled. By default this plugin is installed and enabled when you install iMaps package. 

When you click in this button, a modal box will be opened and you will be able to choose the map you want to include in your content. This will add the shortcode of this map.

For Joomla 3.5+

Insert imap in Joomla 3.5+

 

For previous versions

 

Imaps editor button 

Troubleshooting

If you are using a Custom HTML module to display the map, you have to enable the option "Prepare Content" in the advanced tab of the module. This option allow this module to use content plugins.

If the map isn't loading and you see the shortcode as plain text, maybe the content plugin isn't enabled. Go to the Extension Manager >> Plugin Manager and check if the plugin Content - Imaps is enabled. By default this plugin is installed and enabled when you install iMaps package. 

 

 

About Hispanialabs

Newsletter