Map pins drawn as the company's logo or the person's picture, where there is one #914

New issue

Closed

opened 2026-10-15 17:19:34 +00:00 by tiagoagueda · 0 comments

tiagoagueda commented

2026-10-15 17:19:34 +00:00

Owner

On the map, a pin whose holder has a picture shows that picture instead of the plain dot: a company's logo, or the person's own picture for their own addresses. It uses Basecoat's avatar.

What exists today

static/js/app.js, in readyMaps (after the markerClusterGroup set-up): every marker is L.marker(point, { icon: L.divIcon({ className: entry.company ? "map-pin" : "map-pin map-pin-person", iconSize: [24, 24] }), title, alt, company }).
The dot is drawn by CSS: .map-canvas .map-pin::after (a 16px brand-coloured disc inside a 24px box, for SC 2.5.8) and .map-pin-person::after (ringed) in assets/css/app.css. The CSS is unlayered because Leaflet's CSS loads after app.css.
CompanyMapView.get_context_data (jobs/views.py) builds drawn: lat, lon, name, url, what, place, company. It carries no picture. pinned_addresses gives companies' addresses, plus contacts' and the person's own where on_map is ticked.
Pictures exist as {% company_logo %} (jobs:company_logo, served by the instance) and {% avatar %} (accounts:avatar), both in core/templatetags/postulo.py. Contacts have no picture field.
Basecoat's avatar component is imported (#290–#292). _tile() in the same module draws the initials tile.
The map page's CSP is tiles.policy_for, which adds the tile origin to the site's img-src. Both pictures are same-origin, so no CSP change is needed.

What would change

drawn gains a picture URL (with the same ?v= cache stamp the tags use) where the holder has one: the company's logo, or the profile picture for the person's own addresses. Contacts and companies without a logo keep the dot. An initials tile is not used as a pin, because a field of coloured letters reads worse than dots. Confirm this.
The marker's divIcon holds a Basecoat avatar (<span class="avatar"> with an <img alt="">) in place of the ::after dot. It stays round for people and rounded-square for companies, as the tags draw them, with a ring in the brand colour so it reads as a pin over any tile.
The target stays at least 24px. The marker keeps its title and alt (the holder's name), so the picture is decorative (alt="" on the inner image) and the accessible name does not change.
Clusters (.map-cluster) stay as they are.
A picture that fails to load falls back to the dot (an error listener swaps the class).

To check

Pictures are private files: the accounts:avatar and jobs:company_logo views must keep the same access checks when many are asked for at once (one request per visible pin).
Forced colours: the ring has to remain visible (CanvasText).

No new strings.

Related: #702, #703, #898.

Checked against main at 56fc9d531.

On the map, a pin whose holder has a picture shows that picture instead of the plain dot: a company's logo, or the person's own picture for their own addresses. It uses Basecoat's avatar. ## What exists today - `static/js/app.js`, in `readyMaps` (after the `markerClusterGroup` set-up): every marker is `L.marker(point, { icon: L.divIcon({ className: entry.company ? "map-pin" : "map-pin map-pin-person", iconSize: [24, 24] }), title, alt, company })`. - The dot is drawn by CSS: `.map-canvas .map-pin::after` (a 16px brand-coloured disc inside a 24px box, for SC 2.5.8) and `.map-pin-person::after` (ringed) in `assets/css/app.css`. The CSS is unlayered because Leaflet's CSS loads after `app.css`. - `CompanyMapView.get_context_data` (`jobs/views.py`) builds `drawn`: `lat`, `lon`, `name`, `url`, `what`, `place`, `company`. It carries no picture. `pinned_addresses` gives companies' addresses, plus contacts' and the person's own where `on_map` is ticked. - Pictures exist as `{% company_logo %}` (`jobs:company_logo`, served by the instance) and `{% avatar %}` (`accounts:avatar`), both in `core/templatetags/postulo.py`. Contacts have no picture field. - Basecoat's `avatar` component is imported (#290–#292). `_tile()` in the same module draws the initials tile. - The map page's CSP is `tiles.policy_for`, which adds the tile origin to the site's `img-src`. Both pictures are same-origin, so no CSP change is needed. ## What would change - `drawn` gains a `picture` URL (with the same `?v=` cache stamp the tags use) where the holder has one: the company's logo, or the profile picture for the person's own addresses. Contacts and companies without a logo keep the dot. An initials tile is not used as a pin, because a field of coloured letters reads worse than dots. Confirm this. - The marker's `divIcon` holds a Basecoat `avatar` (`<span class="avatar">` with an `<img alt="">`) in place of the `::after` dot. It stays round for people and rounded-square for companies, as the tags draw them, with a ring in the brand colour so it reads as a pin over any tile. - The target stays at least 24px. The marker keeps its `title` and `alt` (the holder's name), so the picture is decorative (`alt=""` on the inner image) and the accessible name does not change. - Clusters (`.map-cluster`) stay as they are. - A picture that fails to load falls back to the dot (an `error` listener swaps the class). ## To check - Pictures are private files: the `accounts:avatar` and `jobs:company_logo` views must keep the same access checks when many are asked for at once (one request per visible pin). - Forced colours: the ring has to remain visible (`CanvasText`). No new strings. Related: #702, #703, #898. Checked against `main` at `56fc9d531`.

tiagoagueda added the

enhancement

interface

labels

2026-10-15 17:19:34 +00:00

tiagoagueda added this to the 0.5.0 milestone

2026-10-25 17:04:12 +00:00

tiagoagueda referenced this issue from a commit

2026-10-27 14:50:00 +00:00

Draw a map pin as its holder's logo or picture, where there is one (#914)

tiagoagueda referenced this issue from a pull request that will close it,

2026-10-27 14:50:14 +00:00