jWorldMaps jQuery Plugin

0
0
3.9k

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:

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.

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>

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>
```
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>
```