Skip to content

Reset view icon is not rendering without custom CSS for background-image path #390

@paatre

Description

@paatre

Environment

$ cat .python-version
3.13

$ uv tree
Resolved 7 packages in 0.55ms
django-leaflet-test v0.1.0
├── django-leaflet v0.31.0
│   └── django v5.1.7
│       ├── asgiref v3.8.1
│       └── sqlparse v0.5.3
└── ruff v0.11.2 (group: dev)

Description

I wanted to test out this package by creating a minimal setup to get a map rendered to a template. And it was really easy to do. No problems with that. But, I do have a problem with a specific thing that is rendered on the map.

The reset view button's icon isn't rendering by default:

Image

It's just a blank white button without any icon.

I managed to render it by adding a custom CSS that adds a background-image directly to the <a> tag: https://github.com/paatre/django-leaflet-test/blob/eb254255de9e2f96d0fa7dea35963ee609445ff2/project/templates/index.html#L18-L20

.leaflet-control-zoom-out.leaflet-bar-part {
    background-image: url("{% static 'leaflet/images/reset-view.png' %}");
}

So I use the reset-view.png from the statics where the image should be rendered from, and it creates a black-bordered square:

Image

I suppose the icon should be rendered by default without any custom CSS but it just isn't. This problem of mine may be a user error on my part but I haven't found a "correct" solution to this problem. What's my issue?

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions