Highmaps Demo using directive

author(s): Jayesh Chandrapal

HTML

<script src="https://code.highcharts.com/maps/highmaps.js"></script>
<script src="https://code.highcharts.com/maps/modules/data.js"></script>
<script src="https://code.highcharts.com/maps/modules/drilldown.js"></script>
<script src="https://code.highcharts.com/mapdata/countries/us/us-all.js"></script>
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.min.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

(function() {
  'use strict';

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

  app.controller('mainCtrl', function($scope, DB) {
    $scope.mydata = DB.getStatesData();
    $scope.mapconfigured = {};
    $scope.display = function()
    {
      
    }
    });

  app.directive('myMap', function(DB,$timeout) {
    return {
      restrict: 'EA',
      template: '<div class="chart"></div>',
      replace: true,
      scope: {
        mydata: '=',
        header: '=',
        mapconfigured:'=',
      },
      link: function(scope, elem, attrs) {
        var data = {
          core: Highcharts.geojson(Highcharts.maps['countries/us/us-all']),
          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 = 'countries/us/' + e.point.drilldown + '-all',
                    // Handle error, the timeout is cleared on success
                    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
                  chart.showLoading('<i class="icon-spinner icon-spin icon-3x"></i>');
                  
                  // Load the drilldown map
                  $.getScript('https://code.highcharts.com/mapdata/' + mapKey + '.js', function() {

                    data.core = Highcharts.geojson(Highcharts.maps[mapKey]);
                   ...