Combine list form and GoogleMap visualization

F

FilMar

Member
I have created a list with some adresses and coordinates.
I have a list and detail form.
I also created a visualisation with google map that shows all the adresses on a map.

I like to have the list form incorporated in the visualisation (outro?) so that I see the map and the list of addresses on the same screen. Is that possible?

Many thanks in advance,

Greetings,

Filip
 
The way I do this is ...

In the Intro for the list, include the map viz with a content plugin. In this example, my map viz has an ID of 5.

Code: 
{fabrik view=visualization id=5}

Make sure the Fabrik content plugin is enabled in J!, and that in the advanced list settings, Process Joomla Plugins is set to Yes. Then you should see the map viz above the list.

To get the map to update when you apply filters in the list, create a ./components/com_fabrik/js/viz_5.js file (use your list ID), with ...

Code: 
requirejs(['fab/fabrik'], function() {
    Fabrik.addEvent('fabrik.list.update', function(list, data) {
        var viz = Fabrik.getBlock('visualization_5');
        if (viz) {
            viz.update();
        }
    });
});

You should then be able to filter the list, and the map will update to show the same selection as the list.

-- hugh
 
Great,

I knew that it must be easy to do. I tried already the first part (Visualisation in the list form) and that works like a charm.

The second part is less needed (normally the list doesn't change so much) but I will try that tomorrow also.

Many thanks,

Filip
 
The second part is only needed if you are using filtering for any of your elements.

In my test case for this setup, I have a filter on "US State", for a list of photos I have taken on my travels. So filtering on the state then just shows that state's locations on the list and map, with the picture in the popup bubble template. Also a filter on a tags element ('urban', 'rural', 'beach', etc).

-- hugh
 
@hugh: Everything works great like that. The visualisation in the outro of the list. I added also the javascript so the visualisation shows only the filtered items, great.

Now I was wondering, is there a way that, when you hover over a line in the list, the pin in the visualisation is also 'selected'/animated so you have a feedback also on the map ?

Many thanks in advance,

Filip
 
Probably, but that's not something I've done before, so would require some actual work to figure out, which comes under subscription support.

-- hugh
 
Filip - I am currently exploring how to use googlemaps and so I have some understanding of how googlemaps works.

The first thing you will need is a way to trigger a mouseover event on the row. If you are happy to use a button, the PHP list plugin does seem to provide what you need to trigger Javascript to run. If you want to create a mouseover event, then it may be possible using the Php Event list plugin, but you would really have to experiment because the documentation for this is a bit short.

One you have a mouseover event trigger, then you will need write javascvript to extract the information from the list row that you need to identify the googlemaps marker and then use the googlemaps api to find the marker and then create an animation on it.

So I think it is possible, but will require some reasonable Javascript programming skills and if you want mouseovers rather than a button press some Php skills to use the Php events plugin to get the javascript triggers onto the page.
 
Sophist,

Thanks, but I think my level of Javascript programming is not that high. I have already troubles finding out how Fabrik things work. Now I have other priorities.

Greetings,

Filip
 
@hugh: I have a little issue.

I have the list with the localisations and in the outro I have the vizualisation. I have also added the javascript to filter the vizualisation as I filter the list.

When I create a menu Item on the list everything works fine.

Now, to have the look and feel the same I created an article with only a placeholder to the list and adapted the menu like that.

When I call the menu I have my list of locations and also the googlemap vizualisation as before. Only, when I filter my locations, the filter works fine on the list, but doesn't filter the vizualisation any more...

Greetings,

Filip
 
Again, not something I can help with in Community support. I have a suspicion I know what the problem might be, which is to do with how we identify the 'context' for filters, which changes when lists are in a content plugin. But I'd have to set up a test case and debug it ... which is subscription support territory.

-- hugh
 
I just tested, and I can't replicate this. I've added ...

Code: 
{fabrik view=list listid=54}

... to an article. I have the filters displaying in the list, with the viz (ID 5) in the list intro. When I re-filter the list, the AJAX filtering runs, the 'fabrik.list.update' event in my viz_5.js fires, and the viz updates with the new filtered selection.

Do you have your list set to AJAX-ified, so the filtering happens with an AJAX call rather than reloading the page?

Can you point me at your page?

-- hugh
 
hugh,

The page is: https://wjbc.kofide.be/circusschool/locaties

It is a list with a filter and the visualisation is in the footer of the list: {fabrik view=visualization id=1}

I have also a js file (vis_1.js)
JavaScript: 
requirejs(['fab/fabrik'], function() {
    Fabrik.addEvent('fabrik.list.update', function(list, data) {
        var viz = Fabrik.getBlock('visualization_1');
        if (viz) {
            viz.update();
        }
    });
});

as you proposed before.

The list was not AJAX-ified but there is no change when I set AJAX

When I load the list via a menu everything works as espected.
Now that I call the list via an article the filter doesn't work in the googlemap (it still shows all markers)

when you look here (https://wjbc.kofide.be/locaties-list) you have the list directly (but wrong CSS) here the filter works as expected.

A further nice thing to have would be that the corresponding marker on the map jumps when you hover over a line of the list.

Thanks in advance,

Filip
 
I'm not sure what you mean by "link the search terms to the list".

I need someone to give me the exact steps to replicate the issue.

-- hugh
 
You must log in or register to reply here.

Useful links

  • Create a Fabrik Account (Downloads)
  • Create a Forum Account
  • Fabrik Wiki
  • Fabrik 4 Changelog /Install /Upgrade
    • We are in need of some funding.
    More details.

    Thank you.

    Members online

    Total: 63 (members: 5, guests: 58)
    Back
    Top