Point of Interest

Initial release

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',

            ]

        ]

    ]

]