Add methods for highlighting and selecting areas programmatically #33

merged 7 commits into from Nov 22, 2012


None yet

6 participants

dflemstr commented Aug 9, 2012

This adds a few methods that allow code to select or highlight areas, instead of just via mouse input. This has required some extensive internal changes to realise, but there doesn't seem to be any issues as of now.

$('#mymap').vectorMap('select', 'us'); // selects the United States
$('#mymap').vectorMap('deselect', 'us'); // deselects the United States
$('#mymap').vectorMap('highlight', 'us'); // highlights ("hovers over") the United States
$('#mymap').vectorMap('unhighlight', 'us'); // unhighlights ("mouseouts") the United States

My use-case for this change is that I want to have a list of important countries beside the map, and when a list entry is selected or hovered, the relevant map country should reflect the change.

It is now also possible to call any map method directly via e.g. $('#mymap').vectorMap('setColors', 'us', '#000');. It made the most sense to expose the new APIs like this.

The first commit is format fixes that Emacs did automatically when I loaded the file (e.g. converting tabs to spaces for indentation etc.). I would recommend that this commit is included, but it is of course possible to cherry-pick it out if you prefer inconsistent indentation.

dflemstr commented Aug 9, 2012

This fixes #16 and #17 by the way.

Also, I added commits that fix two other bugs. Those bugs were not created by me; I just fixed them while implementing the other stuff.

dflemstr commented Aug 9, 2012

Two new pieces of functionality added.

First, an 'isSelected' method that checks whether a country is selected, e.g.:

$('#mymap').vectorMap('isSelected', 'us'); // returns true or false

Secondly, event nodes for selection:

$('#mymap').vectorMap({ onSelected: function(event, code) {}, onDeselected: function(event, code) {} });

Would like to use this version, but I'm getting an error:

Uncaught TypeError: Cannot set property 'currentFillColor' of undefined

Does it work when selecting individual states as well instead of the entire US? e.g. $('#mymap').vectorMap('select', 'TX');

dflemstr commented Sep 4, 2012

I only tested the code with the world map, but it should of course work perfectly with another map.

You also need to use correct capitalization, ie "tx" and not "TX".

@dflemstr dflemstr closed this Sep 4, 2012
@dflemstr dflemstr reopened this Sep 4, 2012


I'm actually having trouble getting any of these methods to work properly with a copy of the US map. The error is:

Uncaught TypeError: Cannot read property 'width' of undefined

It looks like the error is happening with the line "this.defaultWidth = mapData.width;" line in your WorldMap function.

The code I am using, and please let me know if you need more clarification, is:

               //check to see if the hovered over element is in the array.  If yes, change the color.  If not, don't do anything 
          onRegionOver: function(element, code, region) {
            if (state_array.indexOf(code.toUpperCase()) != -1) {
                $("#vmap").vectorMap('setColors', code, '#DDD');
            } else {
                return false;


dflemstr commented Nov 6, 2012

Could you please post a minimal example that fails with the same error to I really don't see what the problem could be. A thing that could be the reason: Check that code is lower case. The map contains lower case state names, and the code must match the case of the map node names. The fact that you're storing upper-case codes in state_array is a worrying sign.


Nice work, thank you! Do you have a quick method to deselect everything without having to track the previous selection?

$('#map').vectorMap('deselect'); // Deselect all countries
@manifestinteractive manifestinteractive merged commit b94bf7d into manifestinteractive:stable Nov 22, 2012

mvattuone did you get to fix the "Uncaught TypeError: Cannot read property 'width' of undefined" ? i am having the same problem, i've tried lowercase and uppercase and nothing

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment