OSTips-Create a Fabrik Map Visualization in Joomla

Are you using Fabrik with Joomla? Are you familiar with the Fabrik Map Visualization?

Ok, Let’s say you have a whole list of people/things or a membership list and there are addresses from those lists that you want to illustrate on a map. How can we do that?

It’s super easy with a Fabrik Visualization, and I’m going to show you how.

Let’s go!

“Hi, this OSTips from OSTraining and I’m Robbie Adair.

So a client request that I get quite often is this:

“I have a Fabrik list (be it people, equipment locations, or office locations, etc), but I want to show this list on a map because there are addresses. How do I take this list information and show it on a visualization of a map?”

1. We’re going to need a Google API key for the maps (I’m going to show you where we’re going to install that.
2. We’ve got to set up our Fabrik visualization to connect to that existing list so that you can take your list and plot them on a map.

You can see that we already have a Joomla website with a Fabrik list set up on it. This is a member list for a car club, so you can see we have the following information:

1. first name
2. last name
3. type of membership (if they’re a pro member or not)
4. type of car 
5. year of the car
6. full address 
7. a map

Let’s take a look at the back end of Joomla and learn how we create a map visualization. 

• login to back end of site
• click Components/Fabrik
• click Lists

If we look at Fabrik the first thing I’m going to point out to you is we have a list, and this list has all of the elements on it that we just saw on the front end of the website (First Name, Last Name, etc).  

• click Elements

Here you see the Names of all the elements that we have.  Note: The map that we saw on the front end is actually a googlemap plug-in named “map”.

• click map link

This is the map element “Details” page.  You see we have a Label, a Name which is the column name in the database table. We have the Plug-in type and this is key.  

• select the googlemap from the “Plug-in” dropdown

• scroll down the page

Because you’ve selected googlemap, you’re going to get some additional settings tabs. 

• click Geocoding tab
• select Use elements from “Enable Geocode” dropdown

By default this is set to No, but we want to geocode on the fly with the elements. 

Since we’ve said we’re going to use elements, we have to associate the elements with what they are by making selections from the corresponding dropdowns. 

1. Address 1= Street
2. City = City
3. State/Region = State
4. Zip/Postal Code = Zip Code

We have a Country field as well as a “Trigger geocode with” option. Here we get to select how we want the geocoding to occur. Do we want to have a button that says “geocode” after we’ve entered these in, or do we want to do it on the fly as we type these? We’re going to:

• choose As you type
• save and close that element

---

Now we’ve got our map set up, but it will NOT geocode unless we have a Google maps API key.

• go and set up an account to get a Google Maps API key

---

After you have your key code:

• return to Fabrik 
• click Options tab (in upper right corner)
• click Global tab 
• paste in your key code into the “Google maps API key” field
• save

That’s all you have to do to make it work.  Now let’s take a look at what we just set up with this element.

• go to Members page
• login to the front end
• click Add a new member 
• fill in the Member section

When we get to the “Member Address” section, we see the map showing up at the bottom.  What we want to do is watch this map for geocoding as we fill in the blanks.

For example,  if we start with “Country”, you’ll see that it locates the country.  As we continue to type in an “Address”, it will geocode to that address.  You can always zoom in just to make sure.  So we were actually able to geocode this address “as you type” with our Google API key. 

• save this record
• return to the front end of your site

Now I have a map on each individual record, but what if I want to see all members on one map? I need to make a Visualization!

---

 Make a Visualization

It was key that we have the geocode element already set up the googlemaps element.

• go to Fabrik >> Visualizations
• click New 
• type in name for Label (I named mine: member map)
• select the googlemap from the Plug-in drop down 

Now you’ll notice more options down below. First thing we’re going to do is:

• select our Member database from the “List” dropdown 
• click Save & Close button

Top In order to actually see this on the front end, we need to make a menu item.

• go to Menus >> Top
• click New button
• fill in Menu Title
• select Fabrik >> Visualization for “Menu Item Type”
• select Member Map from the “Select Instance” dropdown
• click Save & Close
• return to the front end of your site

We now have a new menu item called “Member Map”. If we click on that link, we’ll see our map. It needs a little work, but at least we know the visualizatin is actually working.  If I try to click on these pins, nothing happens, but I am actually seeing the pin codes for all of the members on my map. So that’s good.

---

Let’s go to the back end and change some of these settings to make the map function better. 

• open up the Member Map Visualization
• click Select button on “Pre-filters”
• click + button on pop up

We are going to put an and boolean here.

• select AND
• select Pro Member
• select EQUALS for the Condition
• type N for the Value
• select Public for Access
• click Close button

What we just did here is we just said only show the members that are not pro members and the reason we did that is because we want this to sort one way.

---

We’re going to add a second set of pins.

• click Add button
• change “N” to Y for the Value
• click close button

This will signify my pro members on the map, so let’s make them look different visually:

• select different graphic file from Icon dropdown (I previously uploaded and chose green-pin-50.png)
• click Save button
• return to front end of site

You’ll see that what we’ve done is we now have pro members marked in green and regular non-pro members marked in red.  So now we immediately have a visualization there that shows us the difference.

---

The next thing we want to do is change the look of our map a little bit.

• go to Map Visualization
• scroll down to Options section
• click Options tab
• scroll down to Map width 
• type 100% (so map takes up the entire width of space available)
• change Map height to 400 pixels
• click Save button

---

Let’s make it so that initially the map is zoomed out enough to show all of the pins created.

• go to Map Visualization
• scroll down to Options section
• click Options tab
• toggle Fit Bounds to “Yes”

Take a look at the front end. Voila!

I want to point out that we had filters on our Member List (Type of Car & Year of Car) and these same filters carried through to the Member Map. That means we could select “Infinity” from the dropdown and the map will reset to show ONLY members who have an Infiniti.  Recall the new member that we added? They were in Austin.  And if we zoom in on the map, we can see that there is a pin dropped in Austin. We also know that they are a pro member because of the pin color. Still though, if we try to click on one of these pins, it doesn’t tell us anything.  Let’s fix that really quickly.

---

Add information to text bubbles:

• go to Map Visualization
• scroll down to Options section
• click Data tab
• type in elements (year_of_car for example) and/or html code that you wish to see on the front end in the Bubble Template field

Don’t forget: we actually have two sets of pins (1 for members, and 1 for pro members)

• scroll down the page
• fill in the second Bubble template field too
• click Save
• return to the front end of the site 
• refresh the page

If we click on the green pin in Austin, we’ll see Donald Duck, 2015 infinity.  The pins that are not pro members are also showing information because we put that same Bubble template there as well.

---

So key things to remember:

1. You need to get a Google API key so that your map visualization can work
2. You’ve got to have that geocode element on your list that gives us the coordinates for the map to know where to place the pins
3. Don’t forget that you need to make a menu item that points to your specific Fabrik Visualization, so that it shows up on the front end of your Joomla website

Okay that’s it. I hope this has been very helpful. 

I’m Robbie Adair and this has been another OStips from OSTraining.”

---