regionStyle Object Set the styles for the map’s regions. Each region or marker has four states: initial (default state), hover (when the mouse cursor is over the region or marker), selected (when region or marker is selected), selectedHover (when the mouse cursor is over the region or marker and it’s selected simultaneously). Styles could be set for each of this states. Default value for that parameter is:
Being an object, it’s only a matter of setting its properties, like the stackoverflow post explains. But, even like that, we’re not talking about a one-off setting, we’re still accounting for a general style.
The html is kept clean, no need for id values in the list of countries.
The link text has to match the country’s international name.
The findRegion function uses this text to find the key for the region property/object and return it.
Then, the key is used to set the region hover on and off: mapObj.regions[cntrycode].element.setHovered(true/false).
Or is that just in case more sibling anchors were added later?
The only thing missing that I notice the OP asked for is for the country name to get highlighted when the map is hovered. I assume you would need to match the country name with the text in the html list (the reverse procedure of what you have already done) but that is a little beyond me.
Even though this isn’t my thread thanks for taking the time to produce this and hope that it was spurred on by my rubbish attempt
About the :first-child. Yes, in my markers project I had grouped regions, something like countries and then counties. Hovering over the first <a> would highlight the entire country, hovering over the next would highlight only the county. But for this example, :first-child is not relevant and could be omitted.
Controlling the reverse it’s pretty easy, using the jvectormap’s exposed API this time, onRegionOver and onRegionOut, even easier since there is no need to look for country code, country name is already available for the hovered region. As far as I’m concerned, since jvectormap displays region labels on hover, it’s not required, but if the OP really wants it and can’t get it, I will do this also.
And yours is an honest attempt, so please stop diminishing your effort!
Controlling the reverse it’s pretty easy, using the jvectormap’s exposed API this time, onRegionOver and onRegionOut, even easier since there is no need to look for country code, country name is already available for the hovered region. As far as I’m concerned, since jvectormap displays region labels on hover, it’s not required, but if the OP really wants it and can’t get it, I will do this also.
Yes I did think duplicating it was a little unnecessary as the labels are already there on the map.
I hope the OP returns and sees the great work you’ve put into this.
And yours is an honest attempt, so please stop diminishing your effort!
Thanks, I don’t feel so bad now. I’m at that stage with js/jquery where a little knowledge is a dangerous thing (I must get my nose out of CSS a bit more often like this and learn something new.)
On the other hand, I have installed you solution provided by myty, and it is great.
Just in the last moment I have found out that the regions highlight on hovering the list elements but not viceversa as in the Paul’s script, and it was something essential as a way to locate countries both by hovering names and areas on the map.
but locating by highlighting a link in a list, that’s something I’ve not seen in the wild.
The reason I did it was to give people with language confusion additional help. Especially if someone decided countries or whatever they may be must be listed alphabetically for some reason.
The idea is to show a map and a list of countries.
Hovering the list, the regions would highlight or change their color. Ok so far.
But imagine people with a basic knowledge of geography, or someone fiddling with the map of Africa or South Asia, asking her/himself which will be this or that region.
It would be very interesting a map with such a feature. You hover the regions and the list element highlight to provide the name.
Certainly the application provides a label system, but given the list already on the map, it is better to use it that include other element (the labels) with means duplicate the country names.
But the way, it is not my idea, I have seen the effect somewhere.
Nothing wrong with alphabetical, though for example countries in Dutch are in a different alphabetical order than countries in English, while the physical position of the country on the map doesn’t change. A Dutch person may know they want Duitsland, but not know where Germany is on a map.
And what’s language confusion?
As andresb mentioned. When people want to choose a country for something, some people know the WHERE but maybe not the spelling: a Russian speaker who knows geography can find Germany on the map, but not know where it is on the written list.
So I like my maps to react both ways: hover over the name, highlight the country. Hover over the country, highlight the name in the list. It basically allows the user to choose the method that works best for them, while also allowing them to see how they could use the other method.
My father-in-law thought my maps would be fun for his geography students, if I had made them larger and added factoids or interesting things or the name of the country in multiple languages or something. But I was making them for a simple geographical selector and never did anything more with them.
