markmarkoh/datamaps

xmlns attribute missing | Adding a download button

SamuelMarks opened this issue · 0 comments

I wanted users to be able to easily down the map as an SVG, so I added this:

<button onclick="downloadSVG()">Download SVG</button>
function downloadSVG() {
    const container = document.getElementById('container');

    // Remove `div`s so we don't get an:
    //  `error on line 2 at column 377566: Extra content at the end of the document`
    for (const item of container.getElementsByTagName('div'))
        item.remove();

    // Add `xmlns` attribute to resolve this error:
    // `This XML file does not appear to have any style information associated with it.
    // The document tree is shown below.`
    container.getElementsByTagName('svg')[0]
             .setAttribute('xmlns', 'http://www.w3.org/2000/svg');

    const blob = new Blob([`
        <!--?xml version="1.0" encoding="utf-8"?-->\n${container.innerHTML}`
    ]);

    const element = document.createElement('a');
    element.href = window.URL.createObjectURL(blob);
    element.download = 'map.svg';
    element.id = 'downloader';
    element.click();
    element.remove();
}

Might be worth having a convenience function for this. At the very least I see no disadvantage in you adding the xmlns attribute.