Support for Leaflet.js (or OpenStreetMap) on Map plugin

[alexsaleh]

Describe the feature

It would be amazing to have the Map Plugin support having a dynamic Leaflet map instead of a static image. This would allow the user to also interact with the map in order to change the panorama image using events.

Alternatives you've considered

Currently I'm overlaying a map on top of photo-sphere-viewer.

Additional context

No response

[mistic100]

I will leave this issue open for reference but will probably never do it my self. The complexity and diversity of GIS is not something I want to dive into (I already have to do some maintenance on Open Layers at work and I don't like it).

Someone else probably can create another plugin

[mistic100]

Preview of the new plugin "plan" (because "map" is already taken) using Leaflet

disclaimer : no availability date, it's done when it's done :)

[mistic100]

The plan is now working with the virtual tour (and if you are being fancy you can use the plan and the map together... but why ?)

[mistic100]

The plugin is available for testing in version 5.7.0-alpha.1

doc : https://photo-sphere-viewer.js.org/plugins/plan.html
example : https://github.com/mistic100/Photo-Sphere-Viewer/blob/main/examples/plugin-plan.html

[haldo98]

Thank You Damien !!!!

You said "no availability date" but that was fast... :-)

Tried.... Used a webpage that works with the 5.6 release..... changed the refs to @5.7.0-alpha.1

but a lot of error in the console...

https://www.tadini.it/temp/Panorama_Test_Plan.html

[mistic100]

That's a problem with the UMD package, I will fix it. But anyway you should switch to ES modules. ThreeJS will remove non ESM builds shortly, as visible in the console

Scripts "build/three.js" and "build/three.min.js" are deprecated with r150+, and will be removed with r160.

The installation guide now uses ESM https://photo-sphere-viewer.js.org/guide/#your-first-viewer

[haldo98]

switched the same page to ESM

https://www.tadini.it/temp/Panorama_Test_Plan.html

but the rendering of the OpenStreetMap is weird and not complete...

The console says A form field element should have an id or name attribute

[mistic100]

You are missing leaflet CSS.

https://leafletjs.com/examples/quick-start/

[haldo98]

Oh my.... Yes.

Sorry...

[github-actions[bot]]

This feature/bug fix has been released in version 5.7.0.