Search code examples
javascriptleafletmarkers

leaflet-dvf markers won't render in IE11

I unfortunately need to have a leaflet-dvf app that uses Chart Markers that needs to also work in IE 11. It works fine in Chrome and Firefox. The markers example here doesn't render in IE 11 either:

http://humangeo.github.io/leaflet-dvf/examples/html/markers.html

Is there a workaround ? I tried added the meta X-UA-Compatible IE=edge to my app but that doesn't seem to help.

Solution

  • The fact it doesn't work in IE is because the custom SVG markers are an experimental feature (it's written in source code), and the error comes from

    var children = gradient.children;
var childLength = children.length; // Cannot read property length of undefined, line 2739 of the file

    So the only solution at the moment is to modify yourself the source code. The gradient is just a gradient SVG element.

    I guess that's because IE does not support children property on DOM elements, but instead you should try to use the childNodes property.

    var children = gradient.childNodes;
var childLength = children.length;

    I can't test it right now but it might do the trick, or perhaps you will go around these step and find a further issue with IE. Just note that childNodes is different from children because it returns all the nodes of an element, and not just the elements of it, so the length will differ.

    See here.

    If you don't want to get your hands dirty by debugging the code step by step to make it work on IE (even if I think it's just a little effort to do), use a DOM Shim like this and it will get rid of the issues you face.