SpryMap - click and drag javascript map widget

Over the past few days, I’ve been hard at work on SpryMap. SpryMap is a super lightweight (2.8 KB), dependency free Javascript widget that turns any HTML element into a Google Maps-like click and drag window. I’ve taken the theory behind my jQuery click and drag map here and souped it up, making it better in every way. Let’s look more in depth at the changes made:

  • Removed the jQuery dependency – Sure, I know, lots of people love it, but the fact is we sometimes sacrifice a bit of performance for convenience when using jQuery. Considering that the things for which I plan to use SpryMap are core page features, it’s important to me that it’s ultra-quick and always responsive .
  • Added features - When using this script, you’re given full control over how you want the map to act. What coordinates do you want it to start at? Do you want it to animate to a stop, or stop immediately when the user releases the mouse? Do you want the dragging to stop when an edge is hit? Would you like soup or salad with that? SpryMap aims to give you full control over how it acts.
  • Gave it an easy to use interface - No, really, it’s pretty darn easy. See the code below to see how to use it.
// Instantiate the widget when you want it to turned into a map,
// probably in the window.onload or $(document).ready() function.

// Default parameters are listed as the parameters below
var map = new SpryMap({
   // The ID of the element being transformed into a map
   id : "",
   // The width of the map (in px)
   width: 800,
   // The height of the map (in px)
   height: 800,
   // The X value of the starting map position
   startX: 0,
   // The Y value of the starting map position
   startY: 0,
   // Boolean true if the map should animate to a stop
   scrolling: true,
   // The time (in ms) that the above scrolling lasts
   scrollTime: 300,
   // Boolean true if the map disallows moving past its edges
   lockEdges: true,
   // The CSS class attached to the wrapping map div
   cssClass: ""
});

Note: In order for the closed hand cursor to correctly load after the mouse is clicked, the images/ directory containing closedhand.cur must be located at the same level as the HTML page using the script. Otherwise, the closed hand cursor will fail to load!

I’m releasing SpryMap under the creative commons license – essentially you’re free to use it and adapt it for any personal or commercial purposes so long as you don’t take credit for writing it yourself.

Let me know if you have any questions on how to use it or suggestions for future features – I’m always looking for ways to improve it!

Enjoy!

Charlie

Share this post:
  • Facebook
  • Twitter
  • del.icio.us
  • Digg
  • Reddit