Make map tiles and polygons render correctly on pan/zoom

[ziggabyte]

Description

This PR attempts to solve the issue we've been having with the canvasser map not re-drawing the lines around areas when you zoom in, and not loading new map tiles when you pan around the map.

Screenshots

Skarminspelning.2024-12-10.152211.mp4

Changes

• Removes the returned function from the useEffect that attaches functionality to map actions
• Moves a couple of lines of code for a slightly more organised file

Notes to reviewer

I have no idea why this works, but it works.
I re-built the map component from scratch, adding one bit at a time, and it failed when I added this useEffect, so i removed bit by bit in it, and it turns out if you remove the return value it solves the problem.

Related issues

none

[richardolsson]

Awesome work figuring this out. So methodical!

I'd love it if we could give a shot at reintroducing the unsubscribes (off()) but in a way that doesn't conflict with internal listeners. What do you think? Details below.

[richardolsson]

The return value of a useEffect() can be a function, which will then be invoked whenever the useEffect() becomes stale, either because a component unmounts, or because the dependencies have changed and the useEffect() will get called again.

A common example is event listeners. If you add event listeners in a useEffect(), React may call that effect again, and if that happens it will add the same event listeners again, causing future interactions to be reacted to twice (likely a bug).

In those situations, you need to get a chance to remove the event listeners before React calls the effect again, and new listeners are added.

That's exactly what happens here. The on() and off() functions comprise an API which is the equivalent of addEventListener() and removeEventListener(). The off() is where the event listeners added above are removed, so I'm inclined not to want to remove this returned callback. However, I can see why this may be causing the bug, if the off() calls mean that all listeners for the specified events are removed (even internal ones), not just the specific callbacks added.

So maybe we can see if there is a way of invoking off() that specifically removes the functions added above, e.g. by naming those functions and passing them to off() as well?

PS. A separate problem is that the events being removed here are not the ones actually being added above.