Knowledge Base - Advanced templating

Template for the map

Template

Geocode Factory is based on a template and placeholder system. To use it you need to disable the Auto-template option (see above). Each used placeholder will be remplaced by the needed control into the frontend. As example the placeholder {radius_form} will be replaced by the radius form itself. The placeholders are alway between braces { } .

map-template-editor

Near the template text area, you can see a button that give you the list of allowed placeholders.

Main content placeholders

{map}

The main placeholder is for the map itself. In the template textarea, remove all existing text (by default there is a sample template), and simply write {map} or insert it from the wizzard.

{number}

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

HTML code

HTML code is allowed, then as you can see the possibilities are infinites! As sample a basic template can be:

There is {number} makers on this map:<br />
{map}

And this will return this result:

gf_23_tuto2_02

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

Localisation and radius

{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.

{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 "Geocode Factory 5 advanced features" for more detailled instruction about this feature.

google-map-route-display

{radius_form}

Replaced by a radius form. You can place it where you want around the map. The content of the distance list box is defined in the map editor and the radius form itself can be customised, see above chapter.

google-map-radius-search

{near_me}

Wll 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 selectors

If you link mutliple markersets to your map, the frontend user can hide/show the markers from each different markerset. For example you can have one markerset that contains the profiles of your user community based on Community Builder, and a lot of markerset based on Sobipro (Hotels, Restaurants, Bars, ...), and the frontend user can select exactely what he want to see (Profiles + bars + hotels, ... or Hotels + bars, ...). There is multiple method to draw theses selectors. Of course you can also do not allow users to select the markersets.

Tip: the _1 {xxx_1} version of the control is the same as the main but it will select and load by default the first markerset only in place of all loaded markersets. This is useful if you have big numbers of markers. you can create a empty markerset (without any marker), and name it '-Select-' or 'choose' and move it at the top of the list of markersets for this map. Then your map will be loaded without any marker once one markerset is selected. This is available for all markerset selector : {selector_1}, {toggle_selector_1}, ...

selector method 1

{selector}

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 option named -All- is added in the list that display all markersets at same time.

In this sample we have 2 markersets: Offline members and Online memebers.

gf_23_tuto2_05

{multi_selector}

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.

{toggle_selector}

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.

{toggle_selector_icon}

Same as before, but add's the markerset image before the text. The image can be controled via CSS.

checkbox selector google map

In the above sample, we have simply set a width for each checkbox and text to have a good alignment, and set the markerset image at a smaller size. The icons are the same as the map. This is the CSS customisation to add to the map manager (see following chapter):

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

Marker selector

This kind of controls allows the frontend user to select the map markers by clicking them into a side-list. This list of markers can be write as list. Additionally you can control the sidebar's design (see following chapter). 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 bellow samples, are the same but uses the simple list and the template

google-map-sidebar-simple  google-map-sidebar-template

Of course if you have a big amount of markers this list will be long.

{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.

{sidelists}

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

 

Applies To

Geocode Factory 5