Point of Interest

Package Description

Initial release

**Free Extra** This is a free extra and the code is publicly available for you to change. The extra is being actively maintained and you're free to put in pull requests which match our roadmap. Please create an issue if the pull request differs from the roadmap so we can make sure we're on the same page. Need help? Approach our support desk for paid premium support.

Usage/Installation Instructions

The Point of Interest packges comes with a snippet and a javascript library and has the following requirements

- Google Maps javascript library with valid API Key- Jquery

Include the following files to your page or into your minified files:

• /assets/components/poi/css/web/poi.css
• /assets/components/poi/js/web/poi.js

The snippet has the following parameters:

• snippet = The snippet you use to fetch data from modx, needs to return an array. The POI connector will process this to JSON
• tpl     = The template for showing on frontend, can be chunkname, @INLINE or @FILE
• usePdoTools = Use PdoTools for processing if set to true, which also allowed fenom if set to active, default is false
• usePdoElementsPath = Use the system setting pdotools_elements_path if set to true, default set to false which uses core/components/poi/

The snippet call

Or if you prefer fenom:

{'!PoiMaps' | snippet : [

    'snippet'       => 'customPoiSnippet',

    'usePdoTools'   => true,

    'tpl'           => '@FILE elements/chunks/maps.chunk.tpl',

]}

Below we have a preview of the custom snippet and of the array we except to retrieve for processing.

The javascript

$('.google-maps').Poi({

    zoom        : 15,

    view        : 'roadmap',

    markerIcons : {

        marker1     : '/assets/img/marker1.png',

        marker2     : '/assets/img/marker2.png'

    }

});

or if you wish to trigger it after an event:

var $poi = $('.google-maps').Poi();

$('form').on('submit', function () {

    $poi.trigger('load.poi', {

        'search' : $(this).find('input').val();

    });

});

For context support add the following parameter or data attribute to the container:

$('.google-maps').Poi({    context : 'mgr'}); 

Translations

$.extend($.fn.Poi.lexicons, {

        error_google_maps   : 'Translation',

        legend              : 'Translation'

});

Sample of custom snippet & array

$resources = [];

$criteria = $modx->newQuery('modResource');

$criteria->where([

    'template'  => 5,

    'published' => 1,

    'deleted'   => 0

]);

if (isset($_GET['search']) && !empty($_GET['search'])) {

    $criteria->where([

        'pagetitle:LIKE' => '%' . $_GET['search'] . '%'

    ]);

}

$criteria->sortby('pagetitle', 'ASC');

foreach ($modx->getCollection('modResource', $criteria) as $resource) {

    $data = [

        'id'        => 'resource-' . $resource->get('id'),

        'title'     => $resource->get('pagetitle'),

        'address'   => $resource->getTVValue('poiAddress'),

        'zipcode'   => $resource->getTVValue('poiZipcode'),

        'city'      => $resource->getTVValue('poiCity')

    ];

    $data['info'] = $modx->getChunk('poiInfoWindow', array_merge($data, $resource->toArray()));

    $resources[] = $data;

}

return [

    [

        'key'       => 'resources',

        'name'      => 'Pagina\'s',

        'markers'   => $resources

    ]

];

This returns the following data:

[

    [

        'key'       => 'categorie-1',

        'name'      => 'Categorie 1 name',

        'icon'      => 'marker1', // A link to a marker for all markers in this category can be absolute or relative. This can also be a key that refers to the POI JavaScript `markerIcons` setting. Not required

        'markers'   => [

            [

                'title'     => 'Title',

                'address'   => 'De Akker 2a',

                'zipcode'   => '9865 BV',

                'city'      => 'Opende',

                'lat'       => '53.170979', // Latitude. Not required, empty then the Lat / Lng is determined based on GeoCoding and the address (this is 1 request per address for the Google Maps key)

                'lng'       => '6.197780', // Longtitude. Not required, empty then the Lat / Lng is determined based on GeoCoding and the address (this is 1 request per address for the Google Maps key)

                'icon'      => 'marker2', // Same as category icon, but specifically for this marker. Not required

                'info'      => 'This HTML text is displayed in the info window' // Not required

            ], [

                'title'     => Title',

                'address'   => 'De Appelhof 666',

                'zipcode'   => '0000 AH',

                'city'      => 'Appelboomparadijs',

            ]

        ]

    ]

]