[Bug] Pinmap popup for spiderfied markerclusters

[adamkendis]

Description

Multiple reports at the same address or lat/lng cluster on the pinmap. Clicking the cluster spiderfies the stacked pins. Clicking an individual pin in a spiderfied cluster displays the loading popup. When the popup is updated with the srnumber info, the spiderfied cluster auto-collapses and the popup is not visible. The user has to click the cluster and the same pin again to view the popup. The cluster should stay expanded and the popup should be immediately visible on successful pin info fetch.

Action Items

• Fix spiderfied clusters so they don't auto-collapse when the pininfo popup loads.

Resources

Expanded spiderfied cluster (markercluster already clicked):

Auto-collapses when srnumber info is loaded (wrong behavior):

Should stay expanded and display PinPopup (correct behavior):

[adamkendis]

Pins and clustering reworked in #575 . Closing ticket as the bug does not exist in current implementation.

[adamkendis]

In progress - will be completed by end of week, 7/5.

[adamkendis]

Dev notes 7/30: This is still unresolved and in progress.

What has been done so far:

1. Dug into leaflet.markercluster source code. Attempt to obtain spiderfied marker's parent cluster in order to re-spread the cluster after the marker's popup data is updated with the 311 request info. See this post. This seems like a potentially volatile solution that could break on leaflet updates. Still investigating.

2. Removed react-leaflet-markercluster for handling stacked pins and installed overlapping-marker-spiderfier-leaflet. Implemented MarkerSpiderfier. This does not cluster stacked pins, but does handle spreading stacked pins. Not 100% working at the moment. The first time a stacked group of pins is clicked it spiderfies then immediately collapses, however, the legs remain visible. Spreading stacked pins works as expected on subsequent clicks. The popup DOES stay open and display the 311 data once received from the server, which is better than the leaflet.markercluster implementation.

Additional ideas:

1. Instead of clustering/spiderfying stacked pins, shift stacked pins around a focal point on render. Done via CSS or tweaking stacked marker's lat/lng to circle or spiral a point. No clustering/spreading.

2. Look into refactoring PinPopup. Found several examples online of popups working correctly with spiderfied clusters, but none with dynamic popup content.

[adamkendis]

Mooted by elimination of clusters.