Vector Map

This is powered by a Premium Plugin called Mapplic available in Codecanyon, Pages customers are free to use it

Maplic Documentation is available in your "Pages" package

For Information and support, please refer

AngularJS users

The original plugin does not come with support for AngularJS. Please follow the following steps to make it compatible

Step One

Include the mapplic ocLazyLoad module in your dependency list of router config. Please refer to AngularJS guide for more

Step two

Apply plugin using ui-jq directive and pass options to ui-options (For more, please refer to 'Auto-initialized jQuery Plugins')

<div id="mapplic" ui-jq="mapplic" ui-options="{
            source: 'assets/js/api/countries.json',
            height: '100%',
            search: false,
            sidebar: false,
            minimap: true,
            locations: true,
            deeplinking: false,
            fullscreen: true,
            hovertip: false,
            maxscale: 4,
            animate: true
        }"></div>

Step three

Define a directive to bind click events to mapplic pins. The following example will zoom into a user clicked location

angular.module('app')
    .directive('mapplicPin', function($compile) {
        return {
            restrict: 'C',
            link: function(scope, el, attrs) {
                $('body').on('click', '.mapplic-pin', function(e) {
                    e.preventDefault();
                    var location = $(e.target).data('location');
                    $('#mapplic').data().mapplic.goToLocation(location, 800);
                });
            }
        };
    });