Combine list form and GoogleMap visualization

Discussion in 'Community' started by FilMar, Dec 7, 2017 at 8:21 PM.

  1. FilMar

    FilMar New Member

    Level: Community
    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
     
  2. cheesegrits

    cheesegrits Support Gopher Staff Member

    Level: Professional
    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 (Text):

    {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 (Text):

    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
     
  3. FilMar

    FilMar New Member

    Level: Community
    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
     
  4. cheesegrits

    cheesegrits Support Gopher Staff Member

    Level: Professional
    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
     

Share This Page