Highmaps Demo using directive

author(s): Jayesh Chandrapal

by Sajeetharan Sinnathurai

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/proj4js/2.2.2/proj4.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/maps/modules/map.js"></script>
<script src="https://code.highcharts.com/maps/modules/data.js"></script>
<script src="http://code.highcharts.com/maps/modules/drilldown.js"></script>
<script src="https://code.highcharts.com/mapdata/countries/us/us-all.j"></script>
<script src="http://code.highcharts.com/mapdata/custom/world-continents.js"></script>
<script src="http://code.highcharts.com/mapdata/custom/asia.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<script src="http://code.highcharts.com/mapdata/custom/oceania.js"></script>
<script src="http://code.highcharts.com/mapdata/custom/oceania.js"></script>
<script src="http://code.highcharts.com/mapdata/custom/europe.js"></script>
<script src="http://code.highcharts.com/mapdata/custom/north-america.js"></script>
<script src="http://code.highcharts.com/mapdata/custom/north-america.js"></script>
<script src="http://code.highcharts.com/mapdata/custom/south-america.js"></script>
<script src="http://code.highcharts.com/mapdata/custom/south-america.js"></script>
<script src="https://code.highcharts.com/mapdata/countries/us/us-all.js"></script>
<div ng-app="app" ng-controller="mainCtrl">
  <my-map mapconfigured="mapconfigured" mydata="mydata" header="'Highmap Demo'"></my-map>
  <button ng-click="display()">
   AFTER CONFIGUATION
  </button>
</div>

CSS

.chart {
  height: 400px;
  min-width: 310px;
  max-width: 800px;
  margin: 0 auto;
  border: 1px solid silver;
}

JavaScript

var app = angular.module('app', []);

  app.controller('mainCtrl', function($scope, DB) {
    $scope.mydata = DB.getContinentData();
    $scope.mapconfigured = {};
    $scope.display = function()
    {
      alert($scope.mapconfigured);
      console.log($scope.mapconfigured);
    }
    });

 app.directive('myMap', function(DB, $timeout) {

     return {
         restrict: 'E',
         template: '<div class="chart"></div>',
         replace: true,
       
         scope: {
             mydata: '=',
             header: '=',
             mapconfigured: '=',
         },
         link: function(scope, elem, attrs) {
             var data = {
                 core: Highcharts.geojson(Highcharts.maps['custom/world-continents']),
                 mydata: scope.mydata
             };


             var small = $('#container').width() < 400;

             // Set drilldown pointers
             $.each(data.core, function(i) {
                 this.drilldown = this.properties['hc-key'];
             });

             var mapConfig = {
                 chart: {
                     events: {
                         drilldown: function(e) {

                             if (!e.seriesOptions) {
                                 var chart = this,
                                     mapKey = 'custom/world-continents/' + e.point.drilldown  ,
                                      fail = setTimeout(function() {
                                         if (!Highcharts.maps[mapKey]) {
                                             chart.showLoading('<i class="icon-frown"></i> Failed loading ' + e.point.name);

                                             fail = setTimeout(function() {
                                                 chart.hideLoading();
                                             }, 1000);
                                         }
                                     }, 3000);

                                 // Show the spinner
                                ...