Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

DivIcon transparent background

See original GitHub issue

The DivIcon has a white background. Is it possible to make it transparent? Thanks.

Relevant issue: https://github.com/jupyter-widgets/ipyleaflet/issues/792 @deeplook

from ipyleaflet import Marker, DivIcon, Map

center = (52.204793, 360.121558)

m = Map(center=center, zoom=10)
icon = DivIcon(html='foo bar', bg_pos=[0, 0], icon_size=[150, 150])
mark = Marker(location=center, icon=icon)
m.add_layer(mark);

m

Issue Analytics

State:
Created 3 years ago
Comments:10 (10 by maintainers)

Top GitHub Comments

2reactions

martinRenoucommented, Jul 1, 2021

You could maybe import from IPython.display import HTML and display it using from IPython.display import display. But that’s a hacky solution. It would be nicer using a real ipyleaflet solution.

1reaction

martinRenoucommented, Jan 22, 2022

If you don’t mind, we could keep this issue open until this is properly implemented in ipyleaflet 😊

Top Results From Across the Web

leaflet - divicon - How to hide the default square shadow?

By default, it has a 'leaflet-div-icon' CSS class and is styled as a little white square with a shadow. But how can I...

Creating Custom Styles Leaflet Icons With DivIcon and CSS

.leaflet-div-icon { background: #fff; border: 1px solid #666; } ... .leaflet-div-event { background: transparent; border: 0px transparent; margin-left: ...

Developers - DivIcon transparent background - - Bountysource

The DivIcon has a white background. Is it possible to make it transparent? Thanks. Relevant issue: https://github.com/jupyter-widgets/ipyleaflet/issues/792 ...

Can I set Leaflet background as transparent? - Stack Overflow

Theoretically,you use a massive DivIcon as the icon for a L.Marker , place the sun clock widget in that DivIcon , disable clicks...

Set DivIcon size in CSS? - Google Groups

background -image: url(foo.png);. height: 34px;. width: 34px;. } But the DivIcon still renders as: <div class="leaflet-marker-icon my-div-icon-class ...