Set DivIcon size in CSS?

[mpo...@gmail.com]

The DivIcon documentation says that I should be able to set the size in CSS.  Maybe I'm just being thick, but I can't see to get this to work.  It seems like this should work:

.my-div-icon-class

{

    background-image: url(foo.png);

    height: 34px;

    width: 34px;

}

But the DivIcon still renders as:

<div class="leaflet-marker-icon my-div-icon-class leaflet-clickable leaflet-zoom-hide" style="margin-left: -6px; margin-top: -6px; width: 12px; height: 12px; -webkit-transform: translate3d(-94px, -27px, 0); z-index: -27;"></div>

The DivIcon source starts off:

L.DivIcon = L.Icon.extend({
	options: {
		iconSize: new L.Point(12, 12), // also can be set through CSS
...

so I don't see how setting the size in CSS would ever work.  Or am I just doing it wrong?

[Eric Theise]

I may be doing it wrong, too, but I got it working. Check my
jsFiddle, "Leaflet: wrestling with divIcon", at
http://jsfiddle.net/erictheise/k6ckm/

I set the background-image via css, using the class
"leaflet-div-icon". I set the size (and some proof of concept text),
not through css, but through the divIcon constructor.

var myIcon = L.divIcon({
iconSize: new L.Point(50, 50),
html: 'foo bar'
});

Hope that gets you where you need to go.

--Eric

> --
>
>
>

[Mike Post]

That certainly works, but that's doing it via code and not CSS. I wanted a CSS solution like the documentation promised.

> --
>
>
>

[Yves Gillet]

It appears this is a 'bug' in the source, there' s a default iconSize: new L.Point(12, 12) which will override later the css class size.

To make it works you must explicitly set the size option to null like here:

 var icon = L.divIcon({

                    className: 'custom-icon' ,// here you can specify width and height

                    iconSize:null, //explicitly set to null or you will get the default 12x12 size

                });

Regards

Yves

[Kevin Lee]

You can certainly set the size in the css.

// css code

.z10_icon img {

width: 12px;

height: 12px;

opacity: 0.96;

}

.z11_icon img {

width: 13px;

height: 13px;

opacity: 0.96;

}

// js code
// d refers to a particular data pt in my data array, e.g.
// {"loc":[100,100], "html":'<div><img src="icons/x.png" alt=""></div>', "css":"z10_icon"},

// when creating the marker, load in some default html and css for a particular data pt

var marker = new L.marker(map.unproject(d.loc, zoom_level), 

{icon: L.divIcon({

className: d.css, 

html: d.html}),

opacity: 1.0,
                                        html: d.html

});

// notice that I have two "html" attributes - one is for the divIcon and one is for the marker
// I'm storing the "html" attribute for marker because I want to re-use it later (since the img src shouldn't change)

// later on, let's say you want to re-draw the marker, 
// you have to remove it from map, set the icon, then add it back to the map

// here's only the code for setting the icon
// notice I retrieved the "html" attribute for the marker via marker.options and conveniently put it into the divIcon declaration
// and changed the css to z11_icon instead

marker.setIcon(L.divIcon({

                             className: "z11_icon",

     html: marker.options.html}));

// I employed a similar technique to render text markers differently using css, according to my current zoom level for the map. I could even change the text of the markers by loading in another html.