PlanPlugin support for Multi-layer Vector Basemaps

[juanbrk]

Is it possible to add Multi-layer Vector Basemaps to the PlanPlugin in order to Add the Community Map of Canada Basemap as a layer to the list of available base layers?

The Canadian Topographic basemap is comprised of 4 different layers that make use of leaflet map panes in order to group layers together and stack them in a certain order, that are then grouped together using L.layerGroup so that Leaflet can interpret them as a singular basemap rather than as separate layers.

This is a common design for basemaps where multiple sources of topographic information are combined into a unified basemap.

• Here's a tutorial of what exactly I want to achieve.
• This is the end result of the map with the multi-layer vector basemap working and the basemap added to Leaflet Layer Controls

In case that's not possible, can I add a single layer from this multi-layer vector basemap as a layer to my list of available base layers? For example this one: The Canada topographic map. I have tried to add It as single layer but failed everytime.

[mistic100]

In configureLeaftlet you can configure Leaflet freely

https://photo-sphere-viewer.js.org/plugins/plan.html#configureleaflet

[juanbrk]

Is there an example on how to actually do this? I'm configuring my map using configureLeaflet and end up with two instances of the leaflet map on the page, and can't interact with the PlanPlugin one to add any markers or GeoJson features to It.

[mistic100]

No there is not, if you need further help you have to share your code, and create a new issue.

If you have two leaflet instance it is probably because you create your own, but if you check the doc you will see that configureLeaflet already provides an existing instance, and you should interact with this one.

[mistic100]

Photo-Sphere-Viewer/examples/plugin-plan.html

Lines 77 to 82 in 2d8b0eb

	// configureLeaflet(map) {
	// new TileLayer('https://{s}.google.com/vt/lyrs=s,h&x={x}&y={y}&z={z}',{
	// subdomains:['mt0','mt1','mt2','mt3'],
	// attribution: '© Google',
	// }).addTo(map);
	// },