Search code examples
d3.jsdatamaps

Empty arc in Datamaps


When attempting to draw arcs on a map from Datamaps, as shown here: https://datamaps.github.io/

I get an empty arc, using the following code and shown here: http://jsfiddle.net/yausern/qbgewhss/1/

var map = new Datamap(
    {
        element: document.getElementById('container'),
        fills: {
            defaultFill: "#ABDDA4",
            win: '#0fa0fa'
        },
        data: {
            'CHN': { fillKey: 'win' },
            'SWE': { fillKey: 'win' },

        }
    }
);
map.arc(
    [
        {
            origin: 'CHN',
            destination: 'SWE',
            options: {
                strokeWidth: 2,
                strokeColor: 'rgba(100, 10, 200, 0.4)',
                greatArc: true
            }

        }
    ],
    {
        strokeWidth: 1, arcSharpness: 1.4
    }

)

What am I missing here?


Solution

  • It works when using the high resolution version found here: https://raw.githubusercontent.com/markmarkoh/datamaps/master/dist/datamaps.world.hires.min.js

    I do not get this to work in JSFiddle though, getting the following error message in the console:

    Refused to execute script from 'https://raw.githubusercontent.com/markmarkoh/datamaps/master/dist/datamaps.world.hires.min.js' because its MIME type ('text/plain') is not executable, and strict MIME type checking is enabled.

    When I download the script and refer to it locally, it works when using Python 3's http.server