Is it possibile to make a selection of regions completely non interactive?

[masiorama]

Hello, I need to create a map of Europe with only a few countries that are supposed to be interactive, while the rest of the continent has to be completely non interactive (no hover, no click, no disable of a selected region etc...).
I played with onRegionSelect, onRegionClick and onRegionOver assigning preventDefault() to my array of non interactive country-codes, but this is not the way, I guess.

Any suggestion?

[manifestinteractive]

Would something like this help?

https://github.com/manifestinteractive/jqvmap/blob/master/examples/usa.html

It's an example I put together a while ago. I basically makes it so there are no visual changes possible for the map just by setting colors to null for hover and select and pre-populating colors for regions of interest.

[masiorama]

Partially. I need change of color on hover for the selected region.

As you can see from the gif attached I almost got it by myself but still I have a boring problem: when I click one of the non-interactive nation, the previously selected legit country seems to lose focus, but clicking again to make it have focus again actually re-disable it, and you have to click again to make it orange colored.

As you can see instead the tooltip works as expected (thanks to the usage of preventDefault())

My js code is this:

$(document).ready(function () {
    var activeNations = new Array('it', 'de');

    jQuery('#vmap').vectorMap({
        map: 'europe_en',
        backgroundColor: 'transparent',
        borderOpacity: 0.01,
        borderWidth: 2,
        borderColor: '#000',
        color: '#cecdcd',
        colors: {
            'it': '#1d1d1b',
            'de': '#1d1d1b',
            //'gb': '#1d1d1b'
        },
        enableZoom: false,
        hoverColor: '#f46b49',
        hoverOpacity: null,
        normalizeFunction: 'linear',
        selectedColor: '#f46b49',
        selectedRegions: ['it'],
        showTooltip: true,
        onRegionOver: function (event, code, region) {
            if (activeNations.indexOf(code) === -1) {
                event.preventDefault();
            }
        },
        onRegionClick: function (element, code, region) {
            if (activeNations.indexOf(code) > -1) {
                // dom interaction outside the map
                // ...
            } else {
                element.preventDefault();
            }
        },
        onRegionSelect: function (event, code, region) {
            event.preventDefault();
        },
        onLabelShow: function (event, label, code)
        {
            if (activeNations.indexOf(code) > -1) {
                switch (code) {
                    case 'it':
                        label.text('Italia');
                        break;
                    case 'de':
                        label.text('Germania');
                        break;
                }
            } else {
                event.preventDefault();
            }
        }
    });
});

I know that with this code I'm faking many things (like the hover color for non-interactive nations: they are changing to the exact same color they had before, so it seems no change at all), but it is almost the things I want to achieve from the user point of view.

I guess the cleaner way should be to allow the adding of an array of completely non-interactive countries via configuration, to allow globally the map to be partially just graphics around the interactive part.

Something like:

...
selectedRegions: ['it'],
nonInteractiveRegions: ['gb','nl'],
... 

I hope I explained myself well enough, thanks for any comment. :-)

[manifestinteractive]

Not sure if it helps, but you can also control pretty much everything with jQuery ...

Could you try something like this ?

$(document).ready(function () {
    var activeNations = new Array('it', 'de');
    var lastSelected = null;

Then later ...

onRegionClick: function (element, code, region) {
    if (activeNations.indexOf(code) > -1) {

        // reset old lastSelected to default #cecdcd color
        if(lastSelected){
            jQuery('#vmap').vectorMap( 'set', 'colors', { lastSelected: '#cecdcd' });
        }

        // update lastSelected after changing the old lastSelected back
        lastSelected = code;
    } else {
        // use lastSelected to manually set color to #f46b49
        jQuery('#vmap').vectorMap( 'set', 'colors', { lastSelected: '#f46b49' });
        element.preventDefault();
    }
}

That would make it so the last region you selected that is in the activeNations array gets stored, and if you click another region outside that is NOT in activeNations, it basically resets the color to selected for whatever you last picked.

[masiorama]

It helps indeed, and I was trying that path right now in a very similar way (lol).

It is a workaround (I dislike the changing and restoring of all the colors), but effective.

If you think that many could benefit from a new feature like I suggested, maybe I could look into it in the next days and help a bit. Otherwise I will just be content with this approach for this small project o'mine.

Thank you very much for your assistance and for your job. :)

[manifestinteractive]

Glad that was helpful. I do like your idea and it could be useful to many. This specific issue though is tied to that preventDefault. While technically it's work ( no js events for the click on THAT region fire ) there is a coupling to the other regions that needs to be smarter if a preventDefault is present.

Logically losing focus on last selected should only happen if you click on something that is not preventing clicks. But since these regions aren't really communicating the default deserting happens on all regions regardless if the one you click on is disabled with a preventDefault.

I think a real fix would be to wrap the method that deselect's all regions with a target check that looks if that target is preventing default behavior. If so, exit.

That would fix a lot of issues for people. Technically it's not the preventDefault on the region casing this to happen, it's a core component issue.

Time to dig into the code :)

[manifestinteractive]

@masiorama I just pushed a new branch you might want to check out. I will only be committing stable builds here, but this is the first push that specifically addresses this issue. It should now be WAY easier to handle this kind of interaction.

https://github.com/manifestinteractive/jqvmap/tree/v1.5.0_prerelease

Fixes issue #197 by preventing map colors from being reset unless they should. While the preventDafult behavior was technically working ( not allowing clicks on THAT region ) it was failing to communicate to the other regions that nothing should be done. Code was updated to not reset colors on map if preventDefault was detected. Also added a new example file on how specifically handle inactive regions.

Sample Code:

jQuery(document).ready(function () {

  // Store currentRegion
  var currentRegion = 'fl';

  // List of Regions we'll let clicks through for
  var enabledRegions = ['mo', 'fl', 'or'];

  jQuery('#vmap').vectorMap({
    map: 'usa_en',
    enableZoom: true,
    showTooltip: false,
    selectedColor: '#333333',
    selectedRegions: ['fl'],
    hoverColor: null,
    colors: {
      mo: '#C9DFAF',
      fl: '#C9DFAF',
      or: '#C9DFAF'
    },
    onRegionClick: function(event, code, region){

      // Check if this is an Enabled Region, and not the current selected one ( prevents no regions from being selected )
      if(enabledRegions.indexOf(code) === -1 || currentRegion === code){

        // Not an Enabled Region
        event.preventDefault();

      } else {

        // Enabled Region. Update Newly Selected Region.
        currentRegion = code;

      }
    },
    onLabelShow: function(event, label, code){
      if(enabledRegions.indexOf(code) === -1){
        event.preventDefault();
      }
    }
  });
});

[masiorama]

Good, thank you very much! :)

[manifestinteractive]

This is now in the latest master branch ( tag v1.5.0 )

[ghost]

how to set regions in coordinates ??