Page 1 of 1

Custom map markers

Posted: Tue Jan 17, 2017 12:40 pm
by skyfocus
Hi,

I'm working on a big tour with hotspot locations on Bali (http://bali.skyontour.nl/Tour/). This tour contains a switch to show a map to be able to navigate to the different hotspots (https://www.skyfocus.nl/Map/?tour=bali). But this map is now (since HTML5) opening in a new window.

This tour dates back to the flash era where I was able to en-capsule a external map. Now the tour has been build in HTML5 only, I do have the ability to enclose a Google-Maps map within the tours skin and the map markers can be changed to a custom marker, but I do not have the possibility to use multiple different markers for different hotspots (see https://www.skyfocus.nl/Map/?tour=bali).

Is there a way to enclose an externally generated Google-Maps map inside the Virtual Tours skin ? Or second best option is to be able to use multiple custom markers which can be linked to an (extra) node-variable .... 'category' for instance.

Regards,

Arjan

Re: Custom map markers

Posted: Tue Jan 17, 2017 5:30 pm
by Hopki
Hi Arjan,
This can be done no problem.
In version 5 you have the map tool in the skin editor.
You need to get your API from Google, please see our map page.

The project has a container which is being used as the map marker which has been selected in the map element.
In side the container I have added three rectangles, but of course these can be images and as many as you need.

The project has five nodes each has a tags. Red, Green and Blue.
Each rectangle has a visibility deselected but a logic block set that when the relevant tag is detected to set visible true.

The upshot to this is the map now has different coloured rectangles depending of the panos tag.
Regards,
Hopki

Re: Custom map markers

Posted: Tue Jan 17, 2017 6:03 pm
by skyfocus
Hi Hopki,

Thanks for the fast reply. I understand the mechanism, I'll give it a try when I don't succeed in getting my best scenario running with the external Google-map https://www.skyfocus.nl/Map/?tour=bali inside a skin windows.

I was testing this first scenario with this URL inside an iFrame in a text-box, but this way I am not able to control the size of the Google-maps windows. I can control the text-box size but not the content. No matter what iFrame height and width setting I use, it always stays a small stamp-sized window. It does show the Google-maps though, fully functional but .... not so useful in this small window .....

The iFrame I've used is:

<iframe src="https://www.skyfocus.nl/Map/?tour=bali" width="100%" height="100%"></iframe>

Regards,

Arjan

Re: Custom map markers

Posted: Tue Jan 17, 2017 6:15 pm
by Hopki
Hi Arjan,
You can set the map so its position and size are in percentage.

1.jpg
1.jpg (28.73 KiB) Viewed 1679 times
Regards,
Hopki

Re: Custom map markers

Posted: Wed Jan 18, 2017 3:59 pm
by skyfocus
Hi Hopki,

That does not do what I want. It scales the text-box according to the size of my browser window but it does not scale the iFrame inside this text-box. This iFrame stays fixed in a small tiny window. The only thing I can control is the place inside the window (left, centered or right, top, centered, bottem) but not the size of it.
It now looks like this:

Image

Regards,

Arjan

Re: Custom map markers

Posted: Wed Jan 18, 2017 4:04 pm
by skyfocus
Oh, sorry I figured it out, I was to fast with my reply. Just added the prefiously removed width="100%" and height="100%" in the iFrame options and now the map fills up de the text-box ...

thanx !

Arjan