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
Mapplic SupportAngularJS 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);
});
}
};
});