Pannellum: Can I turn the hotspots on and off?

[mikeMikeymike]

I'd like to add a button to turn the hotspots on and off.
If I have several (i) icons on the image it can be distracting. It would be nice to be able turn them on and off.

It looks like I might be able to do it by deleting and re-adding them, but that seems like a work-around. It'd be nice to hide them all or show them all.

[mpetroff]

Deleting and then re-adding them is the only way to do it with the API. You could also hide them and restore them via CSS: document.querySelectorAll('.pnlm-hotspot').forEach(function(e) {e.style.visibility = 'hidden';}); and document.querySelectorAll('.pnlm-hotspot').forEach(function(e) {e.style.visibility = 'visible';});.

[mikeMikeymike]

Thanks for your super-quick reply!

[mikeMikeymike]

Unfortunately, the CSS version doesn't work. Once they are hidden, simply scrolling the pano makes them re-appear.

[mpetroff]

Sorry about that; the same property is set internally to hide hot spots that are outside the current field of view. This can be overridden by setting a CSS rule to important. Add .hide {visibility: hidden !important;} to page's CSS and then use: document.querySelectorAll('.pnlm-hotspot').forEach(function(e) {e.classList.add('hide')}); and document.querySelectorAll('.pnlm-hotspot').forEach(function(e) {e.classList.remove('hide')});.

[mikeMikeymike]

thanks, that works.
I had just added a flag to the private function "renderHotSpots()" to hide/show, but I'll leave the source alone and use what you just gave me.

Perhaps in a future build, you would consider the option of adding an (i) button with the + - [] control buttons to toggle the hotspots on and off.

thanks again for the prompt responses.

[pbarbalias]

Hi there, great script mpetroff.

I have 2 hotspots, so I wanted when clicking the first, to hide the second. I do not find a lot of documentation on this. I currently have a working solution through the above example. I assigned different css classes (custom-hotspot and custom-hotspot2) to my hotspots.
So the first hotspot gets

 "clickHandlerFunc": function() {
                HideHotSpot('custom-hotspot2');
   }

and

function HideHotSpot(hotSpotClassToHide) {
    document.querySelectorAll('.' + hotSpotClassToHide).forEach(function(e) {e.classList.add('hide')});
}

My question is, can't I do this by passing the ID of the second hotspot? How is each ID created and assigned on hotspot init? I read the code but didn't find something.
I saw in the API addHotSpot and removeHotSpot but no examples on these.

Please suggest if there is a better way to go with.
Thank you

[mpetroff]

The id is a hot spot configuration parameter, just like its pitch and yaw. This is set in the initial JSON configuration (or as part of the JSON configuration passed to the addHotSpot function). Here's an example of the addHotSpot and removeHotSpot functions:

viewer.addHotSpot({
  "id": "hotspot1",
  "pitch": -10,
  "yaw": 20,
  "type": "info",
  "text": "lorem ipsum"
});
viewer.removeHotSpot('hotspot1');

[pbarbalias]

Thank you for your immediate reply. It would be great if you add a Hide / Show method in the future. Keep it up!