Map Element configuration

Q&A about the latest versions
Post Reply
Posts: 6
Joined: Thu Aug 15, 2019 5:06 pm

Wed May 13, 2020 10:41 pm

Guys, I need a hint!
I am testing out the skin editor. (6.16 pro-PC) My goal is to create a map where the zoom-buttons are in the upper right corner, and a radar with a bearing-line just like in the tour editor is displayed.
(Standard Map: Worldmap, API: Leaflet)
Any suggestions are very welcome :)


(Examples attached)

Tour Editor:
Tour Editor.jpg
Tour Editor.jpg (221.3 KiB) Viewed 98 times
Map Element _1.jpg
Map Element _1.jpg (310.55 KiB) Viewed 98 times
Map Element _2.jpg
Map Element _2.jpg (314.18 KiB) Viewed 98 times
User avatar
Posts: 10165
Joined: Thu Jan 10, 2008 3:16 pm
Location: Layer de la Haye, Essex UK

Tue May 19, 2020 10:10 pm

Hi Frank,
Check out the webinar videos on maps and floor plans.
Garden Gnome Software Support
If you send an e-mail to support please send a link to the forum post for reference.
Posts: 6
Joined: Thu Aug 15, 2019 5:06 pm

Thu May 28, 2020 3:50 pm

A personal word:
Thanks Martin, I‘ve seen, and scanned most of the Pano2vr tutorials and I’ve read a lot in the documentation.
And I am quite sure, there is now concrete answer to my pretty basic goals. If I am wrong, I would pay you the next drink ;)
Don’t misunderstand me, this forum is helpful and informative, and you Garden Gnomes are doing a great job with all the software keeping and gardening, and with all your responsive support you are giving with tutorials and screen casts etc. So thank you very much all of you!!!
Of course, with all its complexity we can’t expect every question here could be answered in depth.
So the best answers are those taken out by the questioner... :D

Personally I am not a big fan of Google Maps and it´s API model, so my focus will be to work with independent map projects like OSM and Leaflet.
So here is my workflow and explanation for beginners to modify the zoombox position:

1.) Connecting a panorama with the Worldmap in the Tour Map as Map1:
Unbenannt-2.jpg (28.07 KiB) Viewed 20 times

2.) importing a map element in the skin editor:
Map.jpg (90.52 KiB) Viewed 20 times

3.) After generating the output container you will find a subfolder infrastructure below the output folder: \3rdparty\leaflet
Here you will find the p2vr-generated leaflet map codes with Javascript and ccs

4.) Edit the leaflet.css file as follows:
Below line 116 (/* control positioning */) insert this codeline:
.leaflet-control-container .leaflet-top.leaflet-left { position: absolute; left: auto; right: 10px; }
to place the zoom box in the right corner of the displayed map
leaflet.css-code.jpg (137.29 KiB) Viewed 20 times

Keep in mind, every new generated output container will overwrite the modified leaflet.css

Further good information sources you will find under: ... n/33621034

I am sure, I will find part 1 of my question sooner or later...

Cheers >Frank<
Post Reply