Display Time & Date On World Map OnHover Using jQuery

by

This is useful plugin to display current date and time on word map onhover for specific country. As you hover on specific county on map then it’ll display current time of that country userful to display current time on map.
alt text


Display Time & Date On Word Map OnHover Using jQuery

Libraries

Include following libraries on page.

HTML

Create World Map using SVG using following code.





  gridtolerance="10"
     guidetolerance="10"
     inkscape:pageopacity="0"
     inkscape:pageshadow="2"
     inkscape:window-width="1920"
     inkscape:window-height="1137"
     id="namedview231"
     showgrid="false"
     inkscape:zoom="1.144"
     inkscape:cx="593.00732"
     inkscape:cy="460.46398"
     inkscape:window-x="1192"
     inkscape:window-y="118"
     inkscape:window-maximized="1"
     inkscape:current-layer="svg2" />
  
  
  
    
      
        
        
      
    
    
      
        image/svg+xml
        
        
      
    
  


  
  
  

  ... and so on



JS

Use following javascript to enable world map timezone.

	// $("#BD").tooltip({
	//     'container': 'body',
	//     'placement': 'bottom',
	//     'title': 'Bangladesh'
	// }); // this works!


	$(document).ready(function(){



      $(".country").hover(function(){

        var gmt_country = $(this).attr("id");
        // alert(gmt_country);
        var options = {
            format:'%A, %d %B %I:%M:%S %P',
            timeNotation: '12h',
            am_pm: true,
            utc:true,
            utc_offset: gmt_country
          };
          $('.jclock').jclock(options);
          
          var country_time = $(".jclock").text();

          // alert(country_time);

          $(this).attr("data-content", country_time);
  
      }); 


		  $('[data-toggle="popover"]').popover({ trigger: "hover" }); 


	});

See live demo and download source code.

DEMO | DOWNLOAD

Visit official github repository for more information and follow for future updates. Don’t forget to read license for using this plugin in your projects.


Published by Rohit