Search code examples
javascriptjvectormap

Is there a way to use "fill" AND "stroke" as attribute for regions scale colors?


I'm using jVectorMap v1.1 and I've got this relevant piece of code:

var america = "#d84148";
var europe = "#0060d0";
var africa = "#44984d";
var asia = "#e3a430";
var oceania = "#2ecdd0";

series: {
    regions: [{
        values: data['colours'],
        scale: {
            "America" : america,
            "Europe" : europe,
            "Africa" : africa,
            "Asia" : asia,
            "Oceania" : oceania
        },
        normalizeFunction: 'linear',
        attribute: 'fill'
    }]
}

The vector data I got is the world_mill_en from naturalearth.com and it contains a 1px separation for each country, that act as that country's borders. The application I'm building must show the continents as a whole, therefore no borders are allowed.

On attribute I can only set fill or stroke as parameters, and I can set a solid color for the borders while using fill.

I would like to know if it's possible to use fill AND stroke at the same time as attribute. Or if there's a way of setting the region's stroke to have the same color as it's respective region. ie.

if (stroke == "none") 
{
    stroke = "that region's colour"
}

Solution

  • After searching through various examples, I came across my solution at this link:

    https://github.com/bjornd/jvectormap/blob/master/tests/markers.html

    All I needed to do was:

    var america = "#d84148";
    var europe = "#0060d0";
    var africa = "#44984d";
    var asia = "#e3a430";
    var oceania = "#2ecdd0";
    
    series: {
        regions: [{
            values: data['colours'],
            scale: {
                "America" : america,
                "Europe" : europe,
                "Africa" : africa,
                "Asia" : asia,
                "Oceania" : oceania
            },
            normalizeFunction: 'linear',
            attribute: 'fill'
        }, {
            values: data['colours'],
            scale: {
                "America" : america,
                "Europe" : europe,
                "Africa" : africa,
                "Asia" : asia,
                "Oceania" : oceania
            },
            normalizeFunction: 'linear',
            attribute: 'stroke'
        }]
    }
    

    So that's it, problem solved. Replicate the whole section inside region array, including curly brackets, changing the fill to stroke.