How to determine if a point belongs to a region in jvectormap?

Question

Is there any way to determine that a given point (either [x,y] or [latitude, longitude]) is a member of a jvectormap region?

I already know how to convert them from one format to another, but I can't figure out how this would be approachable.

Answer 1

Let say you created a map like in the jVectorMap samples, in a div called "world-map".

Inside your div, jVectorMap will put another div which has class "jvectormap-container", inside this container you will find the svg and inside the svg there are all the region paths.

My example is in plain javascript, but you can find this paths with whichever method you like, for example with jQuery selectors, and so on.

You should search the paths starting with the div you created specially for the map you want to search inside, because you can have more than just one jVectorMap in a page.

In my example, i use the onmousemove event to display the region code and the underlying x,y coordinates.

var paths = document.getElementById("world-map").firstElementChild.firstElementChild.getElementsByTagName("g")[0];

paths.onmousemove=function(e){
    var path = document.elementFromPoint(e.clientX,e.clientY);
    console.log('Region: ' + path.getAttribute("data-code") + ' at point: ' + e.clientX + ','+ e.clientY);
};

Pay just only attention, if the point you are searching for is relative at 0,0 e.g. leftmost,topmost corner of the map, you should then add this element offset, just look at the console log of my sample - or better, provide a code sample ;-)