Apps & Code
Here's a list of apps, plugins, and code that I've written which you may find useful:
Community Megaphone for Windows 8
This app for Windows 8 lets you easily find and share great developer and IT pro events throughout the US. Integration with Windows 8 Search and Share make it simple to find events that interest you, and share them with any app you choose. Also integrates with the Maps app to provide event location and directions. You can find out more about the app here.
Color Matcher for Windows 8
This simple matching game can be used to help teach kids colors. It provides a random set of color tiles, onto which you drag the matching color name. The app supports the Windows 8 Share feature to tell friends about the app, as well as snapped view. The app shows how easy it is to build a simple game using Scirra's Construct 2 game development tool. You can find out more about the app here.
Color Matcher for Windows Phone
This simple matching game can be used to help teach kids colors. It provides a random set of color tiles, onto which you drag the matching color name. The app shows how easy it is to build a simple game using Scirra's Construct 2 game development tool, and easily target both Windows 8 and Windows Phone. You can find out more about the app here.
DevHammer for Windows Phone
This app for Windows Phone 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.
jWorldMaps jQuery Plugin
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:
- 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:
(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="[path on your site]/jWorldMaps-1.0.min.js"></script>
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>
Plugin Options
Here are the initialization options available for use with the plugin:
| Option (default) | Purpose | Syntax | Tips |
| initialWidth (200) | Default width of map | initialWidth: 250 | |
| hoverWidth (450) | Width of map when moused over | hoverWidth: 600 | |
| animate (true) | Boolean – enables/disables mouseover animation | animate: true | false | A value of false will display only the thumbnail map for the configured map ID. |
| worldMapId (user-supplied) | Tells the plugin which map to render/track | worldMapId = "[value]" | You can get this value from the My Account page at http://www.myworldmaps.net/ |
| tracking (true) | Boolean – enables/disables tracking via a tracking pixel for the configured map account | tracking: true | false | |
| trackingOnly (false) | Boolean – enables/disables embedding only the tracking pixel for the configured map account | trackingOnly: true | false | Use this in places where you don't want to display a map, but still want to count visits for your site |
| animateTo ("right") | Direction of mouseover animation | animateTo: "right" | "left" |
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: