Sprites are used frequently in modern websites. They are simply a large image that contains many smaller images. They have been around for quite a while and were used in old video games such as Doom. The idea was to load a single large image into memory and then to display parts of that image when necessary. This would avoid having to load new images every time a certain image was required. It is a common misconception that by having many smaller sized images, that the page will load faster. This isn’t true because of the way HTTP requests work. Each image requires a single HTTP request and most browsers will only execute two HTTP requests at a time from a single hostname. This provides a bottleneck which is seen when the page loads. So by using sprites, you can combine many images into a single large image. Then as a particular image is required, you can display a certain area of the sprite without requiring an additional HTTP request. Creating a sprite may seem complicated at first, but there are many tools that can help you create sprites from existing images. One of the tools I’ve used is a website known as http://spriteme.org.
You may have noticed on some Google Maps implementations, markers on the map will have a unique or interesting image for their icon. Google Maps allows you to do this using the MarkerImage class.
Size(width:number, height:number, widthUnit?:string, heightUnit?:string)
To get a basic sprite image working with MarkerImage, you’ll need to determine the size of the image you want to display and its relative location in the sprite image. By default the coordinate system used by Google Maps specifies that the origin is located at the top left of the image (0, 0). If you want to go to the right, increase the “x” value. If you want to go down, increase the “y” value. Once you have all this information you can begin.
var size = new google.maps.Size(16, 16, "px", "px");
var origin = new google.maps.Point(0, 0);
var icon = new google.maps.MarkerImage("http://path/to/sprite.png", size, origin, null, null);
In the above code, I’m creating a size object of 16×16 pixels and passing it to the MarkerImage constructor along with the origin of the image I want to use starting at (0, 0). This means that once the MarkerImage is created, I’ll have a 16×16 px image from the point of origin of (0, 0) from sprite.png.
Now suppose the sprite contains two 16×16 pixel images one above another in the sprite.png and they were separated by a single pixel. I can now obtain that secondary image by changing the point of origin that is passed into the MarkerImage constructor. So in this case the new code to get the second image would be:
var origin2 = new google.maps.Point(0, 18);
var icon2 = new google.maps.MarkerImage("http://path/to/sprite.png", size, origin, null, null);
Now that the origin is located at (0, 18) the
icon2 object will contain a different 16×16 pixel image starting from that location. Which in this case, is the second 16×16 image that I wanted. The reason why the origin is now located at (0, 18) is because the original 16×16 image started at (0, 0). Then you have to factor in the image size you just took which brings you to (0, 16). Since the images are separated by a single pixel, you’ll be at (0, 17). So that makes the start of the second 16×16 image one pixel further at (0, 18).
Last week when I was implementing this concept into a Google Map project I was working on, it was very difficult to find any good examples. I hope this serves as a simple example. You may have noticed that my constructor call for MarkerImage is also passed two
null arguments. These are for the
scaledSize parameters. With these you can do even more neat stuff with the MarkerImage class. For example,
scaledSize will allow you to change the size of the image by stretching or shrinking it. For more information, check out the Google Maps API Reference. If you need more help you can check out this blog post by Marc Ridey.