Maps not displaying without 'getElementById'

[arnm]

I'm writing an AngularJS directive around your maps but the maps won't show up correctly.

code:

angular.module('app')
  .directive('scChoroplethWorldMap', function() {

    function link(scope, element, attrs) {

      element[0].style.position = 'relative';
      element[0].style.width = 500 + 'px';
      element[0].style.height = 300 + 'px';

      var choropleth = new Datamap({
        element: element[0],
        projection: 'mercator',
        fills: {
          defaultFill: "#ABDDA4",
          authorHasTraveledTo: "#fa0fa0"
        },
        data: {
          USA: {
            fillKey: "authorHasTraveledTo"
          },
          JPN: {
            fillKey: "authorHasTraveledTo"
          },
          ITA: {
            fillKey: "authorHasTraveledTo"
          },
          CRI: {
            fillKey: "authorHasTraveledTo"
          },
          KOR: {
            fillKey: "authorHasTraveledTo"
          },
          DEU: {
            fillKey: "authorHasTraveledTo"
          },
        }
      });

    }

    return {
      restrict: 'E',
      link: link,
      scope: {
        data: '&'
      }
    };

  });

As you can see I have defined the dimensions of the container before rendering the map but it still does not show correctly.

However the map does show when the element attribute is "document.getElementById('someid')". But it does not work with element[0] even though they are the same object. The svg gets populated but it does not show the map.

[markmarkoh]

I'm not familiar with angular, can you console.log(element[0])?

Can you send any console errors that are being reported?

[jagomf]

Any progress in this issue from any side? I am also interested in a datamaps directive for Angular.

[markmarkoh]

If somebody can get me a sample (jsbin, jsfiddle, .zip archive) of it not working with angular, I'd love to tinker with it and figure out how to get it working. I have some angular engineers at work I can consult.

I just have 0 experience with angular.

[jagomf]

I have tried to reproduce @arnm environment in this Plunker. As you can see, nothing is displayed.

Hope it helps. Since AngularJS is the current reference in webapps, I think it would be quite interesting to get this going.

[markmarkoh]

I'm seeing Angular errors even when I remove all DataMaps calls, so I don't believe DataMaps is the issue here... @jagomf

[markmarkoh]

@jagomf thanks for the Plunker link.

I updated the library to optionally take width/height parameters, since that seems to be the issue here.

Here is another Plunker that shows it all working now.

cc @arnm

[jagomf]

Country tags (on hover) seem to be showing far away down...

[markmarkoh]

I updated the Plunker to set 'display: block' on the containing element which fixes the hover position.