Knowledge Base - Advanced templating

 

Template Bubble

Introduction

When a user clicks on a marker a bubble is loaded. This bubble is loaded dynamically when it's clicked, and not saved into the page HTML code. The content of this bubble is defined globaly in each markerset for all markers loaded by this markerset.

This content is defined and based on a template model and it work like the map template. You can edit this template on the markerset editor page.

The loaded bubble is generated by Google Maps and is a part of the Google API, therefore, the basic size of the bubble is defined by Google. We included a back-end parameter in the markerset editor to set a width.

Template

As well as the map template you can use HTML to define the bubble, and you can use placeholders. There is 2 types of placeholders: common placeholders and component placeholders. Like the map template, you find a wizzard button that shows you the list of available placeholders.

jQuery tabs are supported in bubble as well. This is an advanced feature, and you will find a sample template into the placeholer generator. 

Important: Do not forget to select the markerset type (pattern), and save at least one time the markerset to have the correct list of placeholders.

Multibubble

In several cases markers have exactely the same position, for example doctors that are in a hospital will all have the same street/number, and then the same coordinates, this should result all markers on same place, and only one is clickable.

If you enable the clustering in map setting, and set the map maximum zoom at same value like the clustering maximum zoom, the multibubble is displayed when, at maximum zoom you click a cluster. This feature allows you to have all bubble displayed in one unique bubble. .

multi-bubble

Common placeholders

Placeholder that you will find in each case, for all markerset type, regardless the used Gateway (except the Google place gateway).

{title}

This placeholder will be replaced by the title of the current marker. Is the same text like the marker tooltip. If the source extension of the current marker contains a title (typically for the directories components), this value is used. In other case you can choise what field is used to define the title (typically in profile component where you can select the name, username, or any other field).

{id}

Numeric value thet represent the ID of the entry/event/profile represented by the current marker. This value can be very usefull to create custom urls.

{link}

Replaced by the url pointing on the current entry/profile/event. Important: this placeholder does not generate a link, but only draw the URL itself, you are responsible write the html anchor like <a href="/{link}">{title}</a>

{distance}

Will be replaced by a numeric value that represent the distance to the center point of radius. If there is not radius search performed (or no radius set in backend), then a simple '-' is displayed.

{waysearch}

This placeholder will be replaced by a form, that will invite the user to enter a start point, and it will return the pathway to get to the current marker. As start point, the user is allowed  to enter any address, or click an icon to fetch he's position (this last option need to be enabled in settings). This feature require the map placeholder {route} and to be enabled in map settings (see above).

Componenent placeholders

Here is not possible to detail each placeholder, because they are dependant your configuration. As example if you have a Mosets Tree directory designed for a hotel directory you will have fields related to hotels (field_wifi, field_sea_view, ...) or if you have a Jomsocial community you will have field about profiles (field_age, field_gender, ...). The returned valude depends the value of the entry/profile, and the component store method.

Each supported (by default the basic fields types, you can each type if you enable the 'use all fields' option in configuration) core or custom field can be used as placeholder.  Some samples (you wil not see theses fields, this depend your your installation):

{field_age}

Typical text field type values. If your template contains a code like : 'Age: {field_age} years old', you wil see this result: 'Age: 26 years old'.

{field_wifi}

Typical checkbox field type value. Here the resuling value depends how the extension store the value. It can be yes/no, 0/1, ... Then you have mutiple solutions to display the value:

  • If the returned value Yes/No is applicable for you, then simply use the 'Wifi available: {field_wifi}' syntax, to have this result: 'Wifi available: Yes'.
  • You also can have more advanced soltions: using the resulting value to display an image: 'Wifi available: <img src="/images/tick_{field_wifi}.png">' syntax to have a tick based list of options. Of course you will need to have these images: tick_0.png, tick_1.png or tick_yes.png, ... or your_value.png.
  • Another option is to use the value to generate CSS like: <span class="boolean_{field_wifi}">Wifi available</span>. Then you should have CSS styles ready like .boolean_yes{color:green;dsplay:block;} and .boolean_yes{dsplay:none;}.

Just some example, you are free to use your own method.

{field_choices}

Typicaly a mutiple selector list or multiple checkbox. Here is depend the extension, but usualy the returned value, is a list of each value, separated by comas.

{field_images_idx}

In some component there is more than one images, in this case we provide more placeholders, like {image_idx_1}, {image_idx_2}, {image_idx_n}, or {image_idx_1_BIG}, {image_idx_1_MED}, ... In this case the returned value is the path on the image, you need to place the placeholder in a image tag: <img src="/{image_idx_1}" />.

If you are usgin the {image_idx_4} placeholder, and one entry does not have an image, then the returned value is 'media/com_geofactory/assets/blank.png', this is a 1 pixel white image. You can replaced this pixel by a 'no photo' logo named blank.png.

Content plugins

By default the joomla! content plugins are not parsed in bubble, but you are free to enable them in the component configuration.

 

Applies To

Geocode Factory 5