This app for Windows Phone 7 gives you access to all the latest and greatest from the devhammer, right on your phone! Includes blog feed, Twitter updates, and Community Megaphone events! You can download the app at: http://bit.ly/devhammerapp.

What Does it Do?

The jWorldMaps jQuery plugin makes it easy to show visitors to your site who's visiting, and where in the world they're coming from. It's simple to implement, requiring just a div tag, a reference to the jWorldMaps script library (and jQuery, of course), and a single line of initialization script. The result is a thumbnail map of your WorldMaps account (get one here), which expands to show a more detailed view on mouseover:

Using the Plugin

Using the jWorldMaps plugin is simple, and requires only a few steps:

1. Add a <script> reference to the jQuery library. jWorldMaps supports jQuery version 1.4 or newer:
   
   

      1: <script type="text/javascript" 

      2:     src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.6.1.js"></script>

   
   Note: 2 perf tips…first, as shown above, use a CDN-hosted version of jQuery to improve performance, and second, where possible, locate scripts towards the bottom of the page to avoid blocking downloads of other elements.
2. Add a reference to the jWorldMaps plugin:
   

      1: <script type="text/javascript" 

      2:     src="[path on your site]/jWorldMaps-1.0.min.js"></script>

   (you'll need to download a copy of the plugin script library and reference your local copy, or you can reference the CDN version instead):
   

      1: <script type="text/javascript" 

      2:     src="http://cdn.myworldmaps.net/scripts/jWorldMaps-1.0.min.js"></script>

3. Add the following initialization code, somewhere after the two script library references, replacing "YOUR-WORLDMAP-ID with the WorldMaps Map ID for the specific account/map you wish to display:
   

      1: <script type="text/javascript">

      2:     $("#wmContainer").jWorldMaps({

      3:         worldMapId : "YOUR-WORLDMAP-ID"

      4:     });

      5: </script>

4. You can optionally add initialization parameters for any of the options listed below, for example to disable tracking if you simply wish to display the map, rather than using it to track hits to your site (useful if you're already using the single-pixel tracking WorldMaps offers), or to turn off the mouseover animation, or to animate from right-to-left if you wish to place the map on the right side of your page rather than the left. You can also modify the initial and hover widths of the images (keeping in mind that this may impact the sharpness of the displayed image) to suit your needs. Here's an example:

      1: <script type="text/javascript">

      2:     $("#wmContainer").jWorldMaps({

      3:         worldMapId : "YOUR-WORLDMAP-ID",

      4:         initialWidth: 250,

      5:         tracking: false,

      6:         animateTo: "left"

      7:     });

      8: </script>

Plugin Options

Here are the initialization options available for use with the plugin:

We hope you'll find the jWorldMaps plugin a convenient way to show off your visitors in a fun and dynamic way. If you have suggestions or feedback on the plugin, please drop me a note.

Writing your own Plugin

If you're interested in seeing how this plugin was written, I have an article up on the Script Junkie website that walks through the basics of plugin authoring and shows how the jWorldmaps plugin is put together. You can find the article at:

http://bit.ly/jWorldmaps

If you're looking for slides and/or source code from my talks at local user groups, or from previous MSDN Roadshow tours, take a look at the MSDN Code Gallery site for Mid-Atlantic. Lots of good stuff there.