Knowledge Base - Advanced Map Templating

Map template

Step by step procedure

You can manage all template options for the frontend map. The main thing to understand is that we are working with placeholder variables.

The main placeholder is for the map itself. In the "Layout" tab of the map manager, you find the "Component template" textarea. Remove all existing texts (by default there is a sample template), and simply write [map] in the text area.

 

gf_23_tuto2_01

Note 1 : You can insert each placeholder by clicking on it under the template area.
Note 2 : This is not a comprehensive list of map shortcuts. Please see current version of Geocode Factory for options.

In frontend you will see a google map with controls according the backend parameters. Now we can edit the template to add an introductory text before the map, and insert a line-break:

google-map-tempalte

Note: Pressing enter or return between each line is only cosmetic. You must use HTML code within this area to force a line break.

Typing "[map]" will have the same result as clicking on the shortcut below the template area. Any valid HTML code can be used here.

It's possible to display the actual number of displayed markers anywhere above or below the map by using the [number] placeholder :

google-map-tempalte

gf_23_tuto2_02

Once you understand the basic process, you will be ready to use advanced templating.

Placeholders controls description

There are many possible map controls available. These controls allow your frontend users to interact with the map. You can even use multiple placeholders on the same map if appropriate.

Content placeholders

[map]

Mandatory. Will be replaced by the map itself.

[number]

Is replaced by the number of markers displayed on the map. For example: "We have [number] members". will return We have 564 members..

[route]

Will be replaced by a DIV element that will display the directions. It also contains a dropdown where you can select the type of directions you prefer: driving or walking. Please read the article on "Route Planning" for more detail on this feature.

google-map-route-display

Localisation / Radius Search Form

[radius_form]

Replaced by a radius form. You can place it where you want around the map. It's also possible to enter it the "dataform" module. The content of the distance list box is defined in the map editor.

google-map-radius-search

[locate_me]

Will be replaced by a button. When users click on the button, the map will be centered on the user's position and draw a little "X" on the center. This features requier user's acceptance (regarding privacy), and browser compatibility.

[save_me]

Will be replaced by a button. When users click on the button, current position of the users (browser position's) is saved. This features requires user acceptance (regarding privacy), and browser compatibility. Will only work if a profile component is used such as CB or Jomsocial.

[reset_me]

Will be replaced by a button. When users click on the button, it will reset the user's position to the address set in his CB or Jomsocial profile even if the address was previously changed based on browser position. Will only work if a profile component is used (ie: Community Builder or Jomsocial).

[near_me] 

Will be replaced by a button. When users click on the button, it will show the markers near the user's browser position. The radius is the current selected radius in the frontend distance list, or if there is no form, the first distance of the list is used (even if not visible).

Markerset selector

[selector] and [selector_1]

This control draws a dropdown list containing all markersets assigned to the currently loaded map. When users select an item of the list, the corresponding markerset is loaded on the map and additionaly an aoption named -All- that display all markersets at same time.

The [selector_1] version of the control is a version that selects and loads by default the first markerset only in place of "-All-". Useful if you have big numbers of markers.

[multi_selector] and [multi_selector_1]

This control draw a listbox containing all markersets of the loaded map. When users select one or more items of the list, the corresponding markerset is loaded on the map. Additionaly a markerset named -All- is added that displays all markersets at same time.

The [multi_selector_1] version of the control is a version that select and load by default the first markerset only in place of all. Useful if you have big numbers of markers.

[toggle_selector] and [toggle_selector_1]

This control draws a list of checkboxes based on all markersets of the loaded map. When users check one or more checkbox of the list, the corresponding markerset is loaded on the map. Additionaly a markerset named -All- is added that displays all markersets at same time.

The [toggle_selector_1] version of the control is a version that is checked and loads by default the first markerset only in place of -All-. Useful if you have large numbers of markers.

[toggle_selector_icon] and [toggle_selector_icon_1]

Same as before, but add's the markerset image before the text. The image can be controled via CSS. In thie following sample image, we have simply set a width for each checkbox and text to have a good alignment, and set the markerset image at a lsmall size. The icons are the same as the map. This is the CSS modification :

.gf_toggeler_item { width:400px; }
.gf_toggeler_item img { width:16px; }

checkbox selector google map

Marker selector

[sidebar]

The side list allows you to display the list of any markers of the map. For each markerset a new list is created, this means that if you have one markerset for user's profiles, and 5 other for different directory categories, you will have 6 lists displayed. By default the list contains the entry name and the distance to center if the radius option was used. The list is sorted by distance if the radius option is used and alphabetically if it is not used.

google-map-sidebar-simple

Additionally you can control the sidebar's design. To do this this, go into the markerset editor, and you will see a 'Sidebar template' tab. You can work in here exactly like with the bubble template. The same sample as above, but with styles :

google-map-sidebar-template

[sidelists]

It's the same as sidebar, but displayed as dropdownlist. Can be useful if you create a store locator for example.

Advanced templating

Follow this example to see a practical application of control usage. First we want to insert a list of markers for the map. To do this we need to 'split' the main body. In this sample we use a table, but you can use divs (like in the sample template). To insert the marker's list, add the [sidebar] placeholder:

google-map-tempalte

The markers of the 2 markersets are mixed in this list. If you click on an item of the list, the map will be centered on the marker, and the bubble will be opened.

gf_23_tuto2_03

Note : the distance provided is from the center of the radius point used. You can use the backend radius or if a frontend radius is provided this will be used.

Geocode Factory provides a second placeholder to show markers [sidelists], but by markerset, and it will create one list for each markerset.

gf_23_tuto2_04

Or another placeholder for a combo mode [selector] or [multi_selector].

gf_23_tuto2_05

Interacting the map

We can mix many placeholders, to create an interactive map. At first we can continue editing the template to add a radius search control.

google-map-tempalte

Take a look at the resulting map. Now, you can enter an address (city, country, ...) and the markers will be filtered.

gf_23_tuto2_06

We can refine this further by using a radius search. In the backend set the center of the map on "All markers", this will automaticaly zoom in to the radius result. You can already set the draw radius to Yes, to draw a circle.

gf_23_tuto2_07

Note 1 : the click to get radius option will search the markers in the given radius arround the point where the user has clicked.

Note 2 : You can add the distance from center radius in the bubble.

The "reset map" button will reset the map to the same state as when it was first loaded.

Advanced interacting the map

Geocode Factory provide also some tools to interact with the user's position.

google-map-tempalte

The current user position is now marked with a blue cross. This cross is draggable, and if you click on the Save pos button, the position of the cross will be save as user position in the user profile. A click on the Reset pos button will retrieve the user's position from their address (in the profile). The locate me button will try to find the user's browser position.

gf_23_tuto2_08

Note : you can change the blue cross to a custom image by replacing the following file: components/com_geocode_factory/assets/images/locate_me.gif

Geocode Factory can do many things! It will help your users if you provide some basic documentation about the configuration of your maps and how to use whatever controls you implement.

Applies To

Geocode Factory 3