Question

Here is my problem, i have a scale of colors for different countries. When I select a country, its color change and I don't want to.

I just want to use the stroke attribute (without the fill attribute) to display selected regions.

Problem is that the default color for fill is "yellow". I tried to set the fill attribute for selected region to "none" but it erases my current color when selected.

Have you guys a way to solve this issue?

        $('#worldMap').vectorMap({
        map: 'world_mill_en',
        series: {
            regions: [{
                scale: ['#C1E712', '#5F7209'],
                values: countryHitCounts,
            }]
        },
        regionStyle: {
            selected: {
                fill: <= is there a keyword to not change the color when selected??
                stroke: 'red',
                "stroke-width": 1,
            },
        },
        regionsSelectable: true,
        selectedRegions: countrySelected,
        onRegionSelected: function (event, code, isSelected, selectedRegions) {
               //some code...
        },
    });

EDIT: in the minify js code source file, I changed the default style for selected region. selected:{fill:"yellow"} by selected:{} It works but if you have a better solution without changing the source file, I take it.

No correct solution

OTHER TIPS

I ran into the same problem as well, what seemed to work for me was to override the selected fill with an invalid hex code. ex:

regionStyle: {
            selected: {
                fill: '#Z34FF9'
            }
        },

This seemed to register it as an override, but not actually apply it, leaving my original color.

You juste have to prevent the default action of the click :

,
onRegionClick: function(event, code){
    event.preventDefault();
    // your "some code" of region selected
}

Norrec's answer did not work for me, but I can override the class defaults just before creating the map. No source modification needed!

jvm.Map.defaultParams.regionStyle.selected = {};
map = new jvm.Map({
    map: 'world_mill',
    container: jQuery('#world-map'),
    regionStyle: {
        initial: {
            fill: "#F6F6F6",
        },
      selected: {
        stroke: '#FF00FF',
        "stroke-width": 0.5,
      }
    },
}
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top