I want to make a clickable world map like this :

I want to attach to my website (that is currently in development) , a world map that will be displayed on the whole screen (not just only in a window) . I have in mind a very clear ideea and vision about how it should look,but I don't know what should I star learning to make it happen, I will write a short description : -I want it to display the whole world map on first appeareance (plain 2D).

-When you hover over a region I want it to outline the continents .

-On click to zoom in the specific continent clicked .

-Again on hover to show the countries .

-On click to zoom in the specific country clicked.

-On "country view" to show the cities as (bullets) according to their real POSITION .

-The possibility to enter the website from the country/city overview.

-Content loaded on the homepage(of the website not the map) according to the selection of the user on the world map .

I an new to JavaScript , I've learned a little bit of Jquery and know basic stuff about js(beginer stuff) , can someone please tell me how can I build it : What specific part of JS should I use ? JSON,AJAX,Jquery,AngularJS,Nodejs,Gulp ? Or there are other langauages that I should learn in order to make my vision a reality .

PS: I can make the designe in CSS,but I was thinking, how do I make the boundries of a continent/country/city in CSS, it's possible? Or there is another way . Please if you want to help me , post a complex response so I can start on learing how to do it ! Thanks in advance