Neighbors map stays black: Leaflet never initializes when adverts arrive after mount #170

New Issue

2026-10-27T09:36:06+01:00

adam commented

2026-10-27 09:36:06 +01:00

Version: 1.1.4
Hardware: ethermesh-1w
Browsers: reproduced in two different browsers

Symptoms

The map area on the Neighbors page stays black.
Base station location is configured and returned by the backend (source: "config").
Adverts are received, the legend shows "9 nodes visible" and the "Hide" button is rendered, so the component does have adverts.
The map container exists with a proper size (852×762), but Leaflet is never initialized: no child elements, no .leaflet-pane.
Navigating away and back does not help.

Root cause

In the Neighbors map component, Leaflet initialization only happens in three places, and none of them covers adverts arriving after mount:

onMounted: initializes only if coordinates are valid and adverts.length > 0. Adverts are fetched asynchronously, so the list is usually still empty at mount time.
watch(hasValidCoordinates): initializes only when the coordinates change, which does not happen after load.
watch(() => props.adverts): only calls initializeOpenStreetMap() if the map instance already exists, so it never creates the map.

In addition, the adverts watcher is not deep, so adverts appended to the existing array are not detected.

Because the adverts are fetched on every page visit, the race happens on every visit.

Fix (verified locally)

Let the adverts watcher create the map if it doesn't exist yet, and make it deep:

watch(() => props.adverts, () => {
  if (hasValidCoordinates.value && props.adverts.length > 0) {
    setTimeout(() => initializeOpenStreetMap(), 100)
  }
}, { immediate: false, deep: true })

I applied the equivalent change to the built bundle (Neighbors-BcK6jl__.js):

()=>{f&&M.value&&setTimeout → ()=>{M.value&&i.adverts.length>0&&setTimeout
{immediate:!1} → {immediate:!1,deep:!0} (on that watcher)

After a hard reload, the map renders correctly with all nodes.

Unrelated

The console also shows <path> attribute d: Expected arc flag ('0' or '1'). That error seems unrelated to this issue, likely an icon.

**Version:** 1.1.4 **Hardware:** ethermesh-1w **Browsers:** reproduced in two different browsers ### Symptoms - The map area on the Neighbors page stays black. - Base station location is configured and returned by the backend (`source: "config"`). - Adverts are received, the legend shows "9 nodes visible" and the "Hide" button is rendered, so the component does have adverts. - The map container exists with a proper size (852×762), but Leaflet is never initialized: no child elements, no `.leaflet-pane`. - Navigating away and back does not help. ### Root cause In the Neighbors map component, Leaflet initialization only happens in three places, and none of them covers adverts arriving after mount: 1. `onMounted`: initializes only if coordinates are valid **and** `adverts.length > 0`. Adverts are fetched asynchronously, so the list is usually still empty at mount time. 2. `watch(hasValidCoordinates)`: initializes only when the coordinates change, which does not happen after load. 3. `watch(() => props.adverts)`: only calls `initializeOpenStreetMap()` if the map instance **already exists**, so it never creates the map. In addition, the adverts watcher is not `deep`, so adverts appended to the existing array are not detected. Because the adverts are fetched on every page visit, the race happens on every visit. ### Fix (verified locally) Let the adverts watcher create the map if it doesn't exist yet, and make it deep: ```js watch(() => props.adverts, () => { if (hasValidCoordinates.value && props.adverts.length > 0) { setTimeout(() => initializeOpenStreetMap(), 100) } }, { immediate: false, deep: true }) ``` I applied the equivalent change to the built bundle (`Neighbors-BcK6jl__.js`): - `()=>{f&&M.value&&setTimeout` → `()=>{M.value&&i.adverts.length>0&&setTimeout` - `{immediate:!1}` → `{immediate:!1,deep:!0}` (on that watcher) After a hard reload, the map renders correctly with all nodes. ### Unrelated The console also shows `<path> attribute d: Expected arc flag ('0' or '1')`. That error seems unrelated to this issue, likely an icon.

Sign in to join this conversation.

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: adam/pyMC_Repeater#170