CloudMade/Leaflet — pull request #743 by shintonik (2012-06-21 12:16:21+00:00)
Title: New SpriteIcon

### SpriteIcon

It extends the DivIcon with an additional options parameter to set x and y offset of a sprite image. That way you can create sprite icons dynamically and you do not need to declare them all as css classes. This is especially useful if you have to handle a large amount of different icons.

#### Create SpriteIcon with static css classes:

```css
.marker {
background: url(/images/markers.png) no-repeat top left;
}

.marker-green {
background-position: -86px 0px;
}
```

```javascript
var icon = new SpriteIcon({
iconSize: new L.Point(12,12),
className: 'marker marker-green'
});
```

#### Create a whole bunch of SpriteIcons dynamically:

For examle you have 100 markers arranged on a gridded sprite. You can easily create all of them with two nested for loops. Another use case where this method of creation comes in quite handy is if your icon's width or height was slightly modified. Then you can change the offset programmatically and do not need to redeclare the offsets of 100 css classes.

```javascript
var markers = new Array();

var iconWidth = iconHeight = 12;

for (var i=0; i<10; i++) {
for (var j=0; j<10; j++) {

markers.push(new SpriteIcon({
iconSize: new L.Point(iconWidth,iconHeight),
className: 'marker',
offset: new L.Point(-i * iconWidth, -j * iconHeight)
})
);
}
```