Documentation

HelloMaps

HelloMaps is a professional and innovative component, the only one that allows the integration of Google Maps inside of Joomla! and Third-Party extensions. You can then integrate HelloMaps, through the use of its numerous plugins, at any time with the components used in your site.

Easy to set up in less than 5 minutes, you can customize each map through many features and options available depending on your needs.
This section is intended for customers who want help on iconfiguration of HelloMaps.

HelloMaps Installation

1. In the Joomla administration navigate to Extensions → Extension Manager.

2. Upload file & install the package pkg_hellomaps_.zip

3. If the installation is successful, the following screen appears
(the installation may take a little longer than expected because through the installation package is extracted several plugins)

HelloMaps

Ok, Well Done.

4. Now you have to configure the component, plugins required, and install the locators if necessary for your project.
The locators for Joomla Articles and Users are installed automatically. The others are to be installed later.

Now Follow the next guide “Plugins Configuration”

Plugin Configuration

As example scenario suppose we want to see geolocalize Joomla Articles:

First you must enable plugins:

 

Enable The Article locator

Note: If you want to set up hellomaps for the following components:
JomSocial Event, JomSocial Users, EasySocial Members
you can skip this step (a) because they do not need the locators.

Go in Extensions → Plugin Manager and search for “Content – HelloMaps”
http://yoursite.com/administrator/index.php?option=com_plugins&view=plugins
This content plugin have not params so you can only enable!

Once enabled in your articles will appear locator with the ability to set a location for the single article.
Type address in Article Geocoding Fields and Drag the Marker if you want.
Then click to save content.

HelloMaps

Now as normal joomla article you can insert image,
so that you will see it in the HelloMaps view in the infowindows, in the sidebar and as an marker.
To insert image in Joomla Articles go in “Images and Links” Tab.

At this point, this step is complete and location information and images are available in the database for retrieval by the HelloMaps component or module.
Now you have to install the plugin for displaying all markers of the Joomla Articles as shown in the next point.

 

Enable & Configure the HelloMaps plugin for Articles

Go to Extensions → Plugin Manager and apply filter to “HelloMaps”, then you can see the list of HelloMaps Plugins
http://yoursite.com/administrator/index.php?option=com_plugins&view=plugins&filter_folder=hellomaps
to show and customize the appearance of the markers on the map for each plugin.

HelloMaps

Click to HelloMaps Articles to configure.
See the Image:

HelloMaps

Explanation of the parameters

To understand what areas affects the configuration see the layout concept hellomaps

HelloMaps

and applied to final layout

HelloMaps

Joomla Articles Plugin Params

    • Show in Sidebar
      as the first parameter you choose whether to enable the sidebar to view this plugin.
      When set to “No”, will disable the search, the filters, and the results for this plugin in the sidebar.
    • Tab Title
      change default tab title as you wish.
    • Show Search
      enable/Disable Search Field.
    • Search Fields
      each plugin has different search fields depending on the component to be geolocalize and second fields permits.
      At the moment, the search value only works with TEXT fields type. For Example article plugin allow search trought fields “Title, IntroText, Fulltext, Name, Username”.Insert at least one field if you enable the search to avoid conflict and for better query performance!
    • Show Filters
      Enable or Disable filters for users.
      In the case of the articles plugin allow you to use the filters to the content categories.
      In this way the user can specify on the map to view one or more categories simultaneously.
    • Articles Categories Filters
      Now here you can specify which categories to allow filtering.
    • Marker Icon Type
      changes the appearance of the markers.
      3 possible choices are available primarily:a) by Avatar or Image
      automaticallyusesthe main imageof Article, Event orUserb) by Categories or Filter Type
      in this mode you can assign different marker icon for each categories / filter for your markers.c) by Custom Image
      Upload your custom image / icon and apply this to all markers
    • Marker Width
    • Marker Height
    • Enable Sidebar Details
      enable / disable themain informations of Articles in the sidebar (title, image, text, link, extra fields).Also by component configuration explained after you can assign also mouse event to this position,
      and if you move your mouse over it highlights the marker in the map.
    • Details Extra Fields
      clicking on arrow icons leftArrowrightArrow on the sidebar content it will show/hide other the extra field that you have inserted.
      Use only TEXT extra fields.
    • Show Notice Box Area
      Display Point 6. Looks at the previous image.
      It display notice text for this plugin if component configuration allow this.
    • Notice Box Area Text
      You can insert Html Text using the editor.
    • Enable Markers Infowindows
      Enable the box when user click on marker icon. Default is Yes
    • Display Markers Counter Result
      Display Point 7. Looks at the previous image.
      For this plugin it show the number of Articles CORRECTLY geolocated.
      Mean that load not the number of Joomla Articles, but the number of articles that have a valid stored coordinates in database (latitude and longitude).
    • Visible Area Restrictions
      If it is enabled, plugin will only search and count markers in the visible area of the map.
      So, when you click on search button it only search in the visible area and will make the markers centered closed to that range.
      On the other hand, when you disable, it does not apply visible area restriction. So, it centers markers based on full maps.

 

Final Considerations

at this point you have seen how to install and configure any locators where they serve,
and configured plugins hellomaps to customize the appearance of the markers on the map for each component from geolocalize.

Now according to your project, enable and configure the other plugins. After continues with the component configuration in next chapter.

 

Component Configuration

In the Joomla administration go to Extensions → Components → HelloMaps

 

Dashboard View

This is the Dashboard where at top show the number of ALL markers geolocated for each plugin enabled as in plugin configuration guide.

HelloMaps

Configuration View

First click on the button “Configuration” link in the left sidebar or menù.
This screen and divided by 4 tab.

Let’s see the Tabs:

 

Layout:

1.Sidebar
2.Search
3.Contents
4.Notice
5.Results
6.Infolink

Map:

1.Map Type
2.Clustering
3.Infowindows
4.Dimensions
5.Events Enabled
6.Initialize

Toolbar & Buttons:

1.Buttons Enabled
2.Mobile Buttons

Jquery Settings:

1.Jquery Settings

Take note that the overall configuration of the component overrides in some cases individual parameters of individual plugins

 

SideBar:

1. Enable/Disable
if enabled show the left or right sidebar.
if disabled override all plugin settings and not display any plugin tab
2. Load Open
if closed only show vertical buttons
3. Sidebar Position
Left or Right
4. Width
set min to 350 at least (no need to append pixel)

HelloMaps

 

HelloMaps

Search

1. Enable/Disable
if enabled show the search field that allow to search component fields setted from plugin params
2. Enable Radius Search
Allow to search/filter markers by area or address and by miles. See image

 

Sidebar Contents:

1. Enable/Disable
if enabled show main informations of plugin in the sidebar (title, image, text, link, extra fields, etc…).
Changes depending on the type of plugin tab.
Take a look of this image to find contents div.

HelloMaps

 

Notices Box

HelloMaps

 

1. Enable/Disable
show or hide this box area.
2. Type Global or by Plugin
Displays an HTML text defined by the site administrator as global type or refers to the active tab of the plugin in use.
a) by Global
show the same notice box with the component notice text in all map tabs,
else if
b) by Plugins
you can set different notice text for each hellomaps plugins.
You can change this text go to administrator -> plugins manager -> hellomaps plugins.
So, when users click on different sidebar title tabs, the notice box will change.

3. Notice Position
Left or Right
4. Notice Html Text
Html text for Global type option

 

Results Counters:

HelloMaps

1. Enable/Disable
Shows the total number of markers, the markers shown on the map depending on the zoom or the search results
2. Type Global or by Plugin
3. Results Position
Top or Bottom

 

Infolink:

HelloMaps

1. Enable/Disable
insert custom link in the map to fixed bottom positions (bottom-right)
2. Link
insert url here

 

Map Type:

1. Enable Satellite
2. Enable Terrain
3. Enable Street
Points 1,2,3 – Choose to enable this type of views for maps.
4. Default
set the type of the default map when the site load.

HelloMaps

 

HelloMaps

Clustering:

1. Enable Cluster
some applications are required to display a large number of locations or markers.
HelloMaps use the MarkerClusterer grid-based library to group markers neighbors and also according to the zoom level.
Useful if you have a large number of markers that creates confusion and to optimize the speed of the map.

2. Custom Cluster Image
choose your custom icon in transparency for all levels of zoom.

 

InfoWindows:

 

HelloMaps
1. Enable Infowindow
Enable the box when user click on marker icon. Default is Yes
2. Width & Height
Set the dimensions for this infowindows box.

HelloMaps

Map Dimensions:

1. Width & Height
set the dimensions for this map.
You can use also percentage

Map Events Enabled:

There are 3 possible events for the map.

1. Mouse Scroll Zoom
when enabled users can zoom map also using the mouse, else to zoom they need to use the “minus (-)” and “plus (+)” buttons on the sidebar to zoom the map.
2. Marker Mouse Over
when enabled if user go over some marker in the map (except for the cluster image), hellomaps highlights the short information for this marker in the sidebar, bringing the content between the top and without opening the infowindow with the click of a mouse.
3. Sidebar Mouse Over
on the contrary: when enabled if user go over some sidebar content, hellomaps animates and moves the corresponding marker in the map.

 

Initialize Map:

At this point you choose the options of initial loading of the map.

1. AutoCenter Markers
when map load, if this is enabled, the zoom settings and the map are automatically adjusted to display and center all the markers. If markers are so many, in some cases, this process may take longer.
2. Center on User Position
when map load, causes the browser asks to show the location of the user and centers the map on this result, if user agree by pressing the button “allow”.
3. Default Latitude & Longitude
If the params “AutoCenter Markers” is set to “No”, here you can insert your default coordinates to fit markers based on this and center map in a specific location.
To retrieve the latitude and longitude i suggest you to use this tool: www.latlong.net

HelloMaps

 

Toolbar Buttons:

Choose default buttons to show on the sidebar

HelloMaps

 

1. Zoom IN/OUT
the icons (+) and (-) for the map zoom
2. User Position
the browser ask for user current position
3. Street View
the “man” icon that enable google street view.
by pressing this in some area in max level zoom it show the real google images if avaiables.
4. List View
Reduce or Increase in Vertical mode the sidebar
5. Settings
with this option users can filter the markers based on the plugin by enabling/disabling their set of markers.
6. Expand/Collapse Sidebar
View Toolbar Horizontal or Vertical
7. Full Screen
Enable Full screen button. So uses by pressing this can use this mode.

Display the Map by the component

What I will show you now is how to load the map by creating a menu link that calls the component.
But in the next chapter you will also see how to use a module and how to customize it further.
You are free to choose which method to use based on your needs.

a) Now in the Joomla administration go to Menù → Your Menù → Add New Menù Item
b) In the Menù Item Type select HelloMaps → HelloMap.
c) There are not other params to configure for HelloMaps. The options are those that we configured earlier.
d) you can see direct link by typing www.yoursitename.com/index.php?option=com_hellomaps

Notice:

Via the menu link you can configure a map with the default options, and that loads all plugins at once,
while through the use of the module for HelloMaps installed in the package we see in the next driving you can use and duplicate the module to have maps with configurations and views different. In some ways a more flexible method.

Module Configuration

Here we will not explain how to set up a joomla module for displaying it in a position of your template.
This now seems pretty obvious even for those beginning with Joomla.

What is shown in this guide module is primarily:

1. the ability to set which set of markers related to the plugin to show the map
2. set the parameters of the module

In the Joomla administration go to Extensions → Module Manager and search HelloMaps

HelloMaps

Main Settings

1. Choose Plugins
when you click on this field you can select a list of hellomaps plugins that you have enabled in Extensions → Plugin Manager -> HelloMaps Plugins.
In this way, for example, you can choose to show only the marker of some plugins for this module for example jomsocial and jevent, or only the articles, or easysocial and k2 or ALL, ect …
If you want so, you can duplicate this module and select other plugins and assign this in other page…

2. Use Settings by Component or Module
if you set by Component you don’t need to see other params tabs because it takes the global configuration for component,
else if you set by Module you can ovverride as you want for this module only.
As see the tabs of the parameters are equal to those of the component and that is:
Layout Settings Tab – Map Settings Tab – Toolbar & Buttons Settings.
For the explanation of these module parameters see the options on the previous guide for component as they have the same meaning.

Note: the only global parameter managed by the component is just the radius search.

 

3. Default Map Type
Street – Terrain – Satellite – Hybrid on module load

4. Map Dimensions
width and height. You can use for example percentage width 100%.

At this point there is nothing else. You can view HelloMaps in your site.

 

 

Access over SSL (HTTPS)

If you want to use the SSL protocol on our HelloMaps Locator, you must follow these simple steps.

In this example, we will use HelloMapsUser Locator for Joomla! (you can apply these changes to all HelloMaps Locator)

HelloMaps

To begin, open the plugin folder
HelloMaps

Open SubFolder “fields”

HelloMaps

Open the file “locator.php”

Now, find this string: http://maps.google.com/maps/api/js?sensor=true
and replace with: https://maps-api-ssl.google.com/maps/api/js?v=3.2&sensor=false
Done. Save and close.

if you use HelloMap Locator for K2, the procedure is similar:
Open the file “hellomapslocatorfork2.php”
[root]/plugins/k2/hellomapslocatorfork2/hellompaslocatorfork2.php
Find this string: http://maps.google.com/maps/api/js?sensor=true
and replace with: https://maps-api-ssl.google.com/maps/api/js?v=3.2&sensor=false
Find this string: http://maps.google.com/maps/api/js?sensor=false&v=3.exp
and replace with: https://maps.google.com/maps/api/js?sensor=false&v=3.exp
Done. Save and close.

 

 

Multilanguage

If you have problems of multi language you must follow these simple steps.
In this example, we will use HelloMaps AdsManager Plugin (you can apply these changes to all HelloMaps Plugins)
Open the file [root]\plugins\hellomaps\adsmanager\adsmanager.php

Now, find this string: $language->load(‘plg_hellomaps_adsmanager’, JPATH_ADMINISTRATOR, $language->getName(), true);
and replace with: $language->load(‘plg_hellomaps_adsmanager’, JPATH_ADMINISTRATOR, $language->getTag(), true);
Done. Save and close.

If you have other question contact us.