Point of Interest

A simple Point of Interest tool solution for MODx Revolution.

Point of Interest allows you to generate locations for your google maps based on data from MODX.This can be based resources or data from a CMP.Point of Interest is easy to use and the javascript is extendable for your own use.

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

            ]

        ]

    ]

]

Initial content