Linky Map documentation

Introduction

Linky Map is a Joomla extension that manage vector maps based on Google geochart. Create your custom vector map, all the world, countries, regions included.

Linky-map-joomla-vector-map

 

I. LINKY MAP INSTALL

1.1 Install

Our component is Joomla 3.x compatible. All the features and 3rd party integrations are included in all memberships.
In order to install our component you have to download the extension .zip file and use standard Joomla installer.

image7

 

Then click on Browse > Upload and Install button, component, modules and plugins will be installed activated by default.

 

1.2 Update & automatic updater

In order to update the extension you can install a new version over the old one by downloading the ZIP file from JoomUnited or use the automatic updater (recommended).

linky-update

 

The automatic updater, which push the update notification, is embedded in the Joomla extension you've installed. So you'll get notified like any other extension in the dashboard or using the menu: Extension > Manage > Update menu.

 

Login to your account to update

You need to login to your JoomUnited account to update all your JoomUnited Joomla extensions. In order to login access the main configuration of the component then click on the Live update tab. At the bottom, you'll find a login button. 

image10

 

Enter your JoomUnited credentials, the same you use to login here @ www.joomunited.com

image11

 

The button will turn orange, congrats! you can now update all the JoomUnited extensions on this website! If your membership is expired you'll get a renew link and a text that explain that.

image12

 

Note: one single login will allow you to update all the JoomUnited extensions (regarding your membership). Login won't expire unless you disconnect it. 

 

II. LINKY MAP REGION AND MARKER MAPS

2.1 Create a region map

A region map fills entire regions (typically countries or country region) with colors corresponding to the values that you’ve chosen. In order to create a region map, from the menu Components > Linky Map > Click on the appropriate button named Add New Region 

region-marker-buttons


To start editing a region map, first define a title for your map and a region to display. When a region is selected, you’ll have a preview above the form with the colored regions. 

image7

 

Note: if you change the region map, regions already customized may not fit to the new map!


Map preview for the Europe selection:

image9


 

In order to add a region you have 2 solutions, using ISO code from Wikipedia (link generated in the component) or using predictive search.

For Wikipedia ISO code, just click on the link and take a reference from the region table.

image10

 

Ex. FR for France. If you want to use our predictive search, just type the region name in the region field. You selection will be automatically transformed in ISO code.

image11

 

The title and description added to your region will be displayed in a tooltip by default. You can also choose to display the information as an HTML sidebar.
Here's the example of the UK Scotland region:

colored-region-vector

 

You can also add a link for the region and a color.

image13

 

Finally your fist region is added to the region map, you can edit all information or delete it if needed.

image14

 

Note: location are saved ONLY when you click on the standard Joomla save button (top of your screen)

 

2.2 Create a marker map

A marker map display specific location, it can be any address, with custom color. In order to create a marker map click on the appropriate button Add New Marker.

region-marker-buttons


To start editing a marker map, add a title then use the field Marker to start enter your location. Based on Google when you'll type your address you'll get some suggestions.

marker-vector-map

A map preview is always available in real time at the bottom os the map edition fields.



Then hit save and your location will be added to a table like for the region map.

marker-table

 

You can also add a custom link for the location that will be followed on click.

decription-and-link

 

Note: Locations are ONLY saved when you click on the standard Joomla save button (top of your screen).

 

2.3 Configuration of the vector maps

Each vector map have its own configuration and can configured in its own way.

settings-vector-map

 

  • Action: Open location custom links in the same/new window/HML side bar/Modal box.
  • Background: Add a custom image background to the map
  • Border color: the border color that separate countries, regions... on the map
  • Border width: the border color that separate countries, regions... width
  • Map border color: the border color of the map
  • Inactive region color: the color of the map regions not configured (no color assigned)
  • Region Hover color: The color of the regions on mouse hover
  • Marker size: The marker point size in pixels
  • Enable tooltip: Display/Hide tooltips descriptions
  • Max Width/Height: The map size defined bellow apples or not. Width and height can also be fixed even if the map is responsive by default
  • Status: Publication status
  • Language: The map language


III. DISPLAY VECTOR MAP ON FRONTEND

In order to display your location on frontend you can use:

  • A menu to display locations search or single location
  • A module to display a search field
  • A content plugin to display single location

 

3.1 Display a map using a menu

Please go in the Joomla menu manager and add a “linky map” element. 

linky-map-menu

Select a map you’ve created to display the map from the menu. 

map-selection


3.2 Using the module

A Linky map module is installed with the component but not activated by default, go on the module manager and open the module with type:
“LINKYMAP-Map module”

image25


From the module settings you can setup the map to load and force a map size (by default it'll take 100% width).

image26



Display module on frontend:

image27

 

 

3.3 Using the content plugin

You can add a map in any text editor using the editor button. The content plugin allows you to call a map in an article with a visual lightbox.

map-from-editor-button

On button click, lightbox will be displayed then click on the title to insert the map in your text editor.

image30

 

If you want to add a map in a custom Joomla custom HTML module, make sure the "Prepare content" module setting is set to YES