Not working on IE about datamaps

[markmarkoh]

It technically should be working on IE9+. I have a browserstack account, let me play around for a little bit.

It definitely won't work on IE <= 8.

[colinmo]

There's a part of the code that refers to a parentNode that doesn't exist in IE9.
-> i=n[0][0].parentElement (Line 21:186170)
which then causes an error later when it tries to append (I'm assuming it's trying to append the on-hover border/ country highlight)
-> i.appendChild(n[0][0]) (Line 21:186525).

I've wrapped the append in a check to ensure i is set, and it's working on IE9 for me (well, it's not highlighting, but it's also not crashing)
-> if(!typeof(i)=='undefined'){i.appendChild(n[0][0])}

I'm sure there's a better fix; but this gets things working until then.

[markmarkoh]

Good eye @colinmo, I updated that to use 'parentNode' instead of 'parentElement' which is a bit friendlier.

Hopefully that stops the crashing. I can't seem to get 'mouseout' to fire when using hover. I'll keep looking for a fix in the meantime.

[paulovpereira]

Guys, I came across the same problem and looking up in the internet I found out this thread at d3's Google group:

https://groups.google.com/forum/#!searchin/d3-js/mouseout/d3-js/OqD9_puVTfg/CHAnVnRCqnAJ

One of the members suggested to detect if its Internet Explorer and don't use the remove/append to bring a element from the svg to the front. Apparently the mouseover event handler of datamaps' code (line 157) is doing this:

          var parentEl = $this[0][0].parentElement;
          var el = $this[0][0];
          $this.remove();
          parentEl.appendChild(el);

The workaround that I suggest you to do is check if it's not IE before entering this block of code that adds a country border highlight(I don't think its really necessary to be honest). So:

      if (!$('html').is('.ie')) {
          var parentEl = $this[0][0].parentElement;
          var el = $this[0][0];
          $this.remove();
          parentEl.appendChild(el);
      }

Edit: It's still kinda buggy if you move the mouse too fast and collide it with the tooltip box, but it's better than "erasing" or 'coloring" the countries with the mouseover.

[markmarkoh]

Thanks for the comments/research everybody. I went ahead an implemented a test for IE before I try the "moveToFront" in pull request #20

I tested it in IE9 and it's working. I'd recommend against a highlightBorderWidth of > 1 for IE.

[juliocastrop]

Hi guys, can you please let me know what exactly should I update or what file should I fix to apply the edits that you mention above? I noticed that the main page of the DataMaps https://datamaps.github.io/ has been fixed and it's working perfect on IE 7++ but I couldn't make it make it work, I appreciate your help!
Julio

[paulovpereira]

Just re-download the lastest version of Datamaps at http://datamaps.github.io/

I did this and now its working fine (at least the world version, I didn't try the usa datamap).

[markmarkoh]

@juliocastrop , if you are still experiencing an error with the newest build, is it possible to send me the URL for me to take a look at?

[juliocastrop]

Many thanks @markmarkoh and @paulovpereira finally I got it working on IE with the USA map! take a look of my test version http://htgsolutions.com/Projects/DataMaps/prototype2.html now I just have a question, is there any option to import the data from an external JSON file?, what I'm trying to do is to get Data for different periods of time so on a dropdown menu any time that is selected an option the map should update the data.
Thanks a lot for your help and support! :)

[markmarkoh]

Looks great!

If you'd like to use the legend, save the return value from new Datamap to var map, so var map = new Datamap.... Right now there is an error because you are calling map.legend(); but map is undefined.

There doesn't exist a way to update the choropleth colors yet, but redrawing should be really fast. To get things from ajax, you'll probably want to put the new Datamap call in a function that takes a data parameter, and on updateMap make a D3 ajax call to your data, and pass the results to that new function.

So:

     function updateMap(selectControl) {
        d3.json("/data/" + selectControl, function(error, json) { 
                if ( error ) return;
                drawMap(data);
           });  
         }

and drawMap would look something like:

function drawMap(data) {
  var map = new Datamap({fills: {}, scope: 'usa', data: data, ...other options...});
   map.legend();
}

And to kick things off:

   updateMap("Period1");

[juliocastrop]

Thanks @markmarkoh I'm trying to implement your suggestion but getting some errors... can you please take a look and give me and advice?

http://htgsolutions.com/Projects/DataMaps/datamaps_prototype.html

thanks!

[weweje]

Using last datamaps version, and MouseOut doesn't reset countries to original in IE edge ( 11 )
Working fine in IE 10 mode.
So my workaround so far had been adding a

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE10">

meta inside the page head.