Maps in not displaying (angularJs directive, controller)

Question

I m trying to create angular directive for highmaps.

Below is my code

var myMapDirectives = angular.module('MapDirectives', ['myMapControllers']);

    // Directive
    myMapDirectives.directive('myMap', function($http) {
        console.log("In my-Map directive");

        return {
            restrict: 'EAC',
            template: '<div></div>',
            replace: true,
            controller: 'myMapController',
            scope: {
                widget: '='
            },
            link: function(scope, iElement, iAttrs) {
                console.log("In my-map link function.", scope, iElement, iAttrs);                                      

                var chart;
                var process = function(){
                   var defaultOptions = {
                        chart: {
                            renderTo: iElement[0]
                        },
                    };
                    var widget = angular.extend(defaultOptions, scope.widget);
                    chart = new Highcharts.Map(widget);
                };
                process();
                scope.$watch("widget.series", function(loading){
                    process();
                });
                scope.$watch("widget.loading", function(loading){
                    if(!chart){
                        return;
                    }
                    if(loading){
                        chart.showLoading();
                    } else {
                        chart.hideLoading();
                    }                    
                });                                    
            }
        };
    });

The controller is bit large as I put all the JSON data in mapData attribute.

Here my code is available Highmaps Directive & Controller.

The problem Map is not displaying.

(I follow this link to create the directive Plunker )

score 0 · Answer 1 · answered Feb 02 '15 at 11:19

     <!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>Worldmap with AngularJS</title>
  <meta name="description" content="">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
  <script src="http://code.highcharts.com/maps/highmaps.js"></script>

  <script src="angular/angular.js"></script>
  <script src="angular/angular-sanitize.js"></script>
  <script src="scripts/app.js"></script>
  <link rel="stylesheet" href="css/map.css">
</head>

<body ng-app="app">
  <div ng-controller="highMapController" class="" style="width:1000px;height:500px;margin:auto;">
      <high-map widget="mapConfig" id="container">{{mapConfig}}</high-map>
  </div>
</body>

</html>


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

    // Highmap Directive
app.directive('highMap', function($http) {

    return {
        restrict: 'EAC',
        template: '<div></div>',
        replace: true,
        controller: 'myMapController',
        scope: {
            widget: '='
        },
        link: function(scope, element, attr) {                                 
            var chart;
            var process = function(){
               var defaultOptions = {
                    chart: {
                        renderTo: element[0]
                    },
                };
                var widget = angular.extend(true, {}, defaultOptions, scope.widget);
                chart = new Highcharts.Map(widget);
            };

            process();

            scope.$watch("widget", function(loading){
                process();
            });                                   
        }
    };
});

//Highmap controller 

app.controller('highMapController', ['$scope', '$http',
    function ($scope, $http) {
     var mapGeoJSON = get data from("http//http://code.highcharts.com/mapdata/custom/world.js")
     var data =[]
     var mapGeoJSONFeature = mapGeoJSON.features

angular.forEach(mapGeoJSONFeature, function(feature, index) {
          data.push({
                    key: feature.properties['hc-key'],
                    value: index
                    });
        });

        $scope.mapConfig = new Highcharts.Map({
                 chart: {
                        renderTo: 'container',
                        type: 'map',
                        height: 900,
                        weight: 800,
                        backgroundColor: "#eee"
                    },
                title: {
                            text: "World Map"
                        },

                mapNavigation: {
                    enabled: true
                },

                colorAxis: {
                    min: 0,
                    stops: [
                        [0, '#EFEFFF'],
                        [0.5, Highcharts.getOptions().colors[0]],
                        [1, Highcharts.Color(Highcharts.getOptions().colors[0]).brighten(-0.5).get()]
                    ]
                },

                legend: {
                    layout: 'vertical',
                    align: 'left',
                    verticalAlign: 'bottom'
                },

                series: [{
                    data: data,
                    mapData: mapGeoJSON,
                    joinBy: ['hc-key', 'key'],
                    name: 'Random data',
                    states: {
                        hover: {
                            color: Highcharts.getOptions().colors[2]
                        }
                    },
                     dataLabels: {
                        enabled: false
                    }
                }]
            });

    }]);![My map result page][1]


  [1]: https://i.stack.imgur.com/a36tp.png

First i want to say thanks to you. Here i have modified your code and get the results. Please check the code. — Elayaraja Dev, Feb 02 '15 at 11:23

Maps in not displaying (angularJs directive, controller)

1 Answers1