Icons not showing when clustering markers with leaflet.markercluster

[juanbrk]

Describe the bug

I need to improve markers rendering performance and have started by clustering them using leaflet.markercluster library. After some code and markers changes, I've managed to make the clustering work but only to find out that the clustered markers icon doesn't show.

It feels like the clustered markers' icon style conflicts with the default map markers' style.

I've created an online demo to check if this behavior was only happening to me, but It's happening out there as well.

Online demo URL

https://codesandbox.io/p/sandbox/goofy-tu-dwxg84

Photo Sphere Viewer version

5.11.0

Plugins loaded

compass-plugin: 5.11.0, core: 5.11.0, equirectangular-tiles-adapter:5.11.0, gallery-plugin: 5.11.0, markers-plugin: 5.11.0, plan-plugin: 5.11.0, visible-range-plugin:5.11.0

OS & browser

Chrome Macos Sonoma 14.0

Additional context

No response

[juanbrk]

Here is the expected default behavior when using leaflet.markercluster library for preview

[mistic100]

I am not sure what you expect... This is entirely your usage of leaflet. I am pretty confident if you create a demo of only the Leaflet map, you will have the same behaviour.

When I inspect the page I see that the img elements reference https://dwxg84.csb.app/node_modules/leaflet/dist/images/marker-icon.png and this file does not exist, probably because of the inner workings of CodeSandbox. You will have to ensure the default image is available, or use your own (check leaflet doc).

[mistic100]

PaulLeCam/react-leaflet#753 (comment)

[juanbrk]

leaflet.markercluster comes with a neat grouping icon that changes colors to reflect the density of markers of a given area

As an option to MarkerClusterGroup you can provide your own function for creating the Icon for the clustered markers. The default implementation changes color at bounds of 10 and 100, but more advanced uses may require customising this.

The thing is that this default behavior is not seen on the initial clustering implementation. After inspecting a bit I found out that the clustering icon added to the map shares classes with the default PSV map markers, So I assume this has something to do with styles collisions.

Here You can see a concise example of the expected behavior on a simple leaflet map that clusters icons using the default strategy, with no custom icon, on codesandbox.

Ps: Its leaflet.markercluster the library I'm using, not react-leaflet nor react-leaflet-markercluster

[mistic100]

Ps: Its leaflet.markercluster the library I'm using, not react-leaflet nor react-leaflet-markercluster

Ok but you are using the react, so the solution to missing marker image probably still applies.

---

Though I didn't understand you where refering to the cluster circle, and not the image visible when the cluster is not active anymore.

And I think this is only because you didn't included the stylesheet for the cluster.

In your standalone example:

import "leaflet.markercluster/dist/leaflet.markercluster";
import "leaflet.markercluster/dist/MarkerCluster.css";
import "leaflet.markercluster/dist/MarkerCluster.Default.css";

[mistic100]

After inspecting a bit I found out that the clustering icon added to the map shares classes with the default PSV map markers, So I assume this has something to do with styles collisions.

would be helpfull if you tell which classes are shared, because I don't see any, all Photo Sphere Viewer CSS classes start with "psv-"

[mistic100]

It works instantly when adding the above stylesheets.

[juanbrk]

After inspecting a bit I found out that the clustering icon added to the map shares classes with the default PSV map markers, So I assume this has something to do with styles collisions.

would be helpfull if you tell which classes are shared, because I don't see any, all Photo Sphere Viewer CSS classes start with "psv-"

You are correct, I mistook the classnames and thought they were colliding, that was on me ✋

[juanbrk]

It works instantly when adding the above stylesheets.

Amazing! I added one at a time but failed to add them all simultaneously. You rock, thanks!