Using a sprite for icons?

[Andy Wallace]

So, I'm converting from using google maps to leaflet/mapbox. When using google. we used a sprite for our marker icons. From what I can find in the leaflet documentation, that isn't going to work. I have a sprite:

sprite = "http://idxpro.cisdata.net/images/gmap/listing_icons_sprite.png";

And tried to define an icon using:

xx = new L.Icon({ iconUrl: sprite, iconSize: { width: 23, height: 26},  

                                                iconAnchor: new L.point(32,0),  

                                                popupAnchor: new L.point(-3, 0) ,

                                                shadowUrl: sprite, 

                                                shadowSize: [7,30], 

                                                shadowAnchor: [0,0] });

Is it possible to use a sprite for markers in leaflet?

Thanks so much,

Andy

[Andy Wallace]

Ok, I have gotten around my issue by using divIcon instead, and creating a set of CSS rules to handle the sprite. Not quite as

clean, but it works well.

THanks

[Owen Densmore]

It's possible that the Dynamic Maps thread may apply to you:

    https://groups.google.com/forum/?hl=en#!topic/leaflet-js/GhxzjQWx1O0

   -- Owen

[Bryan McBride]

Have you seen the Leaflet.Sprite plugin: https://github.com/leaflet-extras/leaflet.sprite

[Arnie Shore]

Archaic old me wd appreciate a url showing a sprite in use. Sounds
intriguing, but my imagination fails me - once more! AS

[Andy Wallace]

Arnie -

The actual sprite in use is in the original post -  "http://idxpro.cisdata.net/images/gmap/listing_icons_sprite.png"

The way I am making this work is via HTML and CSS. Basically, the CSS "background image" lets you define a window

into the image, so that it only shows a small portion of a larger image. The CSS to create a class with a background image

that only shows the house part of the sprite above is:

.map_listing_icon_house { background-image: url('/images/gmap/listing_icons_sprite.png'); background-repeat: no-repeat;

                                        width: 23px; height: 26px; 

                                        background-position: -32 0;

                                     }

THis says, for the CSS class "map_listing_icon_house", show the background image, but only a 23x26 pixel window, starting

at position 32 pixels in, 0 pixels down (top row, second from the left). Since I show these icons all over the place, this way I

only have to load one png file, and let the CSS define a part of it to use.

The markup that uses it:

          <div class='map_listing_icon_house'></div>

It's a little more complicated in my usage, what with the shadow, and choosing different icons, but that's the general idea.

[Arnie Shore]

Got it. Thanks heaps.

I stumbled over that in the jquery mobile lib where I saw just one png
file despite a number of different images being shown.

Now I hear you, but IMO that's a strange use of the term sprite.

AS

[Andy Wallace]

I'm (moderately) sure that it's a game designer thing, but it works. Pretty slick, but a little confusing (the negative numbers

took me a minute).

andy

[Andy Wallace]

I hadn't, I'll look that over. My solution with CSS/HTML in divIcons works pretty well.

thanks!

[Christopher Keen]

Excellent suggestion / solution!  Thanks!

On Wednesday, August 21, 2013 4:29:08 PM UTC-4, Andy Wallace wrote: