Clickable markers on Gmap to load FlashPanoramas

[tommo77funk]

Hey panopeoples,

This is my first post, so let me just say thanks for making a great viewer ! i'm really pleased and v.excited about what can be achieved when working with flashpanorama.

I downloaded Gmap from http://www.afcomponents.com/components/g_map/ and have a gmap in my panorama. I would really like to make the marker points into hotspots/clickable links, so i can change panos.

I have lost many days of my life now to this problem and am desperate to solve it so i can move on. So therefore would be enormously grateful for some advice.

the correct code for a clickable marker from gmap site is,

var point = gMap.addPoint({lat:39.74002, lng:-104.992261, strokeRGB:0xFF0000,strokeThickness:2, fillRGB:0xFFFF00});

evntResponder = function (evnt:Object){
trace(evnt.type);
}
GPoint.addEventListener("GEOMETRY_ON_RELEASE", this.evntResponder);



I have been experimenting with embedpano, controller, forum examples for days but just cant seem to get it working,

I have at my last attempt

point1.addEventListener(MouseEvent.CLICK, loadPano1);

// Add point
var point1 = my_map.addPoint({lat:45.463622, lng:9.188175, icon:"VR50.png", iconOffset:{x:-16,y:-16}});

evntResponder = function (evnt:Object){
trace(evnt.type);
}

function loadPano1(name) {
if (masterSlot != null) {
_lc.send(masterSlot, "execute", "loadPano(?panoName=images/syonpark17,3000,stripes);");
}
}

I may be further away now than when i started i simply do not know, i am shattered and bamboozled, and well ..... in need of some help on this.


Many thanks in advance, and great wishes to all,

tom

[tommo77funk]

some more example code, i got from afcomponent forum...

var point = myMap.addPoint({lat:41.415167, lng:-72.214787, name:"street address", description:"homeowner"});
var button = window._window_mc.attachMovie("yellowbutton", "button_mc", window._window_mc.getNextHighestDepth());
function eventResponder(evnt){
var window = evnt.target.openInfoWindow({title:evnt.target.name , content:evnt.target.description, contentAutoSize:true});
var button = window._window_mc.attachMovie("yellowbutton", "button_mc", window._window_mc.getNextHighestDepth());
//window._window_mc.getNextHighestDepth());
button._x = 10;
button._y = 30;
button.onRelease = function (){
trace("button is clicked");
}
}
point.addEventListener("GEOMETRY_ON_RELEASE", eventResponder);




hope this can be useful .....

tom :roll:

[seeinside360]

Hi there!
You are wellcome to FFP forums... I have made the map you can see on my web page. Its really easy to setup the map with klm files just like xml codeing...

[tommo77funk]

Hi,
Thanks very much seeinside360. I originally wanted to control my map and pano's as just a swf only, but am happy to try anything. So I made a kml file of my markers, how did you get them to call your pano's ?

my kml file:

<?xml version="1.0" encoding="UTF-8"?>
<kml xmlns="http://earth.google.com/kml/2.2">


<Placemark>
<name>Syon Park</name>
<description>Wrap up warm and take a magical walk through SYON PARK'S Enchanted Wood.
Over a thousand lights will illuminate your journey through the beautiful gardens. </description>
<Point> <coordinates>-0.3113830089569092,51.478068709331524,0</coordinates>
</Point>
</Placemark>


<Placemark>
<name>Syon Park - Inside Great Conservaory</name>
<description>Wrap up warm and take a magical walk through SYON PARK'S Enchanted Wood.
Over a thousand lights will illuminate your journey through the beautiful gardens.</description>
<Point> <coordinates>-0.3126785159111023,51.47854981590165,0</coordinates>
</Point>
</Placemark>

<Placemark>
<name>Syon Park - Outside Great Conservaory</name>
<description>Wrap up warm and take a magical walk through SYON PARK'S Enchanted Wood.
Over a thousand lights will illuminate your journey through the beautiful gardens.</description>
<Point> <coordinates>-0.3127562999725342,51.47791000987067,0</coordinates>
</Point>
</Placemark>

</kml>



I have been trying with <link>, <href>, etc but still no joy. I really appreciate any help given.

Many many thanks and great wishes to all,

tom

[tommo77funk]

hi,

i think its still better to do embed pano, i'm no coder, but maybe

// Add point
var point = my_map.addPoint({lat:45.463622, lng:9.188175, icon:"VR50.png", iconOffset:{x:-16,y:-16}});

point.addEventListener("GEOMETRY_ON_PRESS", loadpano);

function loadPano(name) {
if (masterSlot != null) {
_lc.send(masterSlot, "execute", "loadPano(?panoName=images/syonpark17,3000,stripes);");
}
}


or put gmap in a movie clip and enable/disable it and communicate that way

I have no idea, if you visit here http://www.vrwebdesign.co.uk/syonpark/ and click 'i' on navigation bar, (the map is'nt very visible now i'm using kml) my gmap appears with markers, when clicking these markers i'd like the pano to change. I would LOVE it in fact...

tom

[seeinside360]

hi!
I am not a coder too but I always think on a simple way... your panos are great... I think some HDR process has been done.. anyway ıf you check out the example files on the g-map you will see the gmap_klm_example swf file and route66 klm file.. I have just broke the lines on route66 klm file. It would be helpfull for your map presentations.

For loading map to panoramas just use simple hotspot I have'nt try but ıt must be work..

Cheers..

[izoneguy]

Nice panos!! What size are your images? Or are these .mov's?

[tommo77funk]

Hi,

Many thanks izoneguy ! cubic pano 6000x3000 about 4mb.

I discovered a wealth of info today


http://flashpanoramas.com/forum/archive/index.php/f-7.html

and

http://flashpanoramas.com/blog/2006/12/27/hotspot-example-review/

I know the answer is definitely here and have been trying since i got in from work to call a hotspot id from xml trying both localconnectionID and ExternalInterfaceID to call

var point = my_map.addPoint({lat:45.463622, lng:9.188175, icon:"VR50.png", iconOffset:{x:-16,y:-16}});

point.onRelease = function(){
_lc.send(masterSlot, "execute", "loadPano(syonpark19.swf,3000,stripes);");
}


in my map swf file.

an external call to a hotspot, me thinks...maybe..

I smell i'm on the right track and will get there in the end, i'm not worried, its all part of the learning experience that makes it all the more satisfying when finished. I'm thankful that i spent a long time learning immervision, so know the patience and sheer dedication it takes to learn these things. I'm also v.grateful to read forum posts, question and answers ! so Keep on keepin on everybody !! Have a wiiKed weekend....:)


tom

[izoneguy]

So are you trying to do what seeinside360 is doing?
I visited your website and was very impressed.
Did you do all of that programming?

What are you trying to achieve?
Check this out.

http://maps.google.com/maps/ms?ie=UTF8&hl=en&msa=0&msid=105400270740964989710.00000112ec056f9eef7b5&ll=46.042736,11.711426&spn=10.965628,20.390625&t=h&z=6&om=1

[cheathamlane]

I admit I'm a bit behind the curve, as far as integrating Google Maps with an FPP presentation -- but one question comes to mind -- tommo77funk, is there a reason you're using Gmap and not the AS3 Umap? Would Umap have any advantage for you?

And, nice dropdown menu you're using. :) Glad also to see someone taking advantage of the next-previous button functionality with it.

@seeinside...: When I go to your site (nicely layed out!), and click the info button on your FPP presentation, I get this (attached image). I didn't think it was intentional, so thought I'd post it.

@ izoneguy: Bernhard, is it you? :)

[cheathamlane]

one more time with the attachment (sorry)

[tommo77funk]

Hi,

Patrick, you could be right mate ! umap as3 would be better and have just seen this http://www.afcomponents.com/tutorials/umap_as3/149/ that would probably solve it, fingers crossed. When originally looking at afcomponents maps i could'nt see much difference between the maps, so went with the gmap version, but as3 ! of course, and its free !

izoneguy great map and pano's mate ! What i am trying to do, that is different from seeinside360's map is when clicking on a marker, a new pano fades in over the last one in the same player, so not opening in new browser or _self, but same effect as when selecting pano when using dropdown menu.

I think this should be done in map swf and not using kml.

My little faux pas is i've gone straight for something hard to do ! I havent even made my own custom navigation and interface yet, which i plan to do next once i crack this little nugget, but this is why i was impressed with flashpanorama for this effect with gmap, recommended and excellently implemented by Ricardo usvp http://www.usvp.com.br/

I think what is needed from me is to sit in a quiet corner with an as3 book for a while, then read as much flashpanorama posts and topics i can find. It can only make me better at as3 coding. Unfortunately i have to work (normal job) today and tomorrow so cant solve this now till Monday, many thanks for help and interest chaps !

tom

[tommo77funk]

Hi,

I now have umap and i'm using it with code grabbed from as3 combo box, to make clickable markers that load a new pano in the same player, it nearly wants to work .... http://www.vrwebdesign.co.uk/syonpark/ click 'i' this makes map appear, click on marker and nothing happens

this is my umap.swf file

//grabbed from as3 combo
// Use the same name in spots.xml: <global controller="lc_test">
// Better use different controller names for different panorama applications
var controllerName:String = "lc_test";

// Master slot name:
var masterSlot:String;
// Slave slot name:
var slaveSlot:String;

// Begin of connection code (better use it as is).
var dumpSlot = controllerName+"_dump_"+Math.random();
var _lc:LocalConnection = new LocalConnection();
_lc.allowDomain("*");
_lc.connect(dumpSlot);
_lc.addEventListener(StatusEvent.STATUS, onStatus);
_lc.client = this;
function onStatus(info) {
if (info.level == "error") {
trace("No master connection detected.");
_lc.close();
_lc = null;
}
};
function setSlot(slot) {
masterSlot = controllerName+"_master_"+slot;
slaveSlot = controllerName+"_slave_"+slot+"_"+Math.random();
_lc.close();
_lc.connect(slaveSlot);
trace("set slave: "+slaveSlot);
};
_lc.send(controllerName+"_master_0", "getSlot", dumpSlot);
// end of connecion code





//code for umap
import com.afcomponents.umap.types.LatLng;
import com.afcomponents.umap.events.MapEvent;
import com.afcomponents.umap.overlays.Marker;

var mapPos:LatLng = new LatLng (51.4780,-0.3113);
var myZoom:Number = 17;

umap.mapType = "satellite";
//map, satellite, hybrid

umap.animatePan = true;
umap.panTo(mapPos);
umap.setZoom(myZoom);

umap.enableScrollWheelZoom = false;
umap.doubleClickMode = "none";

function resetPosition(event:MapEvent) {
umap.panTo(mapPos);
}
umap.addEventListener(MapEvent.DRAG, resetPosition);

function showInfoWindow(event:MapEvent) {
var param:Object = new Object();
param.title = "Syon Park - Enchanted Woodland";
param.position = mapPos;
param.autoClose = true;

umap.openInfoWindow(param);
}
umap.addEventListener(MapEvent.READY, showInfoWindow);




// load new panorama:
function MapClick(MapEvent) {
if (masterSlot != null) {
_lc.send(masterSlot, "execute", "MapClick(?panoName=images/syonpark17,3000,stripes);");
}
umap.addEventListener(MapEvent.CLICK, MapClick);
}





this is my xml file

<?xml version = '1.0'?>
<panorama>

<parameters>

layer_1 = files/autorotator.swf
layer_3 = files/menuFullscreen.swf
layer_4 = files/tooltips.swf
layer_5 = files/hotspots.swf

</parameters>
<autorotator>
speed = -0.1
interval = 30
pause = 1000
quality = low
</autorotator>

<hotspots>
<global localconnectionID="lc_test">
<pano segments="30" onPress="segments=23" onRelease="segments=30" />
<spot id="info" alt="Information" static="1" salign="BC" staticX="-375.5" staticY="-50.5" url="images/black_i.png" alpha="0.4" onClick="infoscreen.visible+=1"/>
<spot id="infoscreen" alt="Map" url="umap3.swf" static="1" visible="0" onClick="visible=" onOver="" onOut=""/>
<spot id="1" pan="150" tilt="-70" smoothing="1" scaleable="1"
onClick="
loadPano:images/syonpark19.swf,-;
change:8,alpha,0.5;
change:8,buttonMode,0;
change:9,alpha,1;
change:9,buttonMode,1;
"
/>

</global>

</hotspots>

</panorama>

Is there anything else i could be doing? will embed pano make life easier?


tom

[izoneguy]

Hi,

Patrick, you could be right mate ! umap as3 would be better and have just seen this http://www.afcomponents.com/tutorials/umap_as3/149/ that would probably solve it, fingers crossed. When originally looking at afcomponents maps i could'nt see much difference between the maps, so went with the gmap version, but as3 ! of course, and its free !

izoneguy great map and pano's mate ! What i am trying to do, that is different from seeinside360's map is when clicking on a marker, a new pano fades in over the last one in the same player, so not opening in new browser or _self, but same effect as when selecting pano when using dropdown menu.

I think this should be done in map swf and not using kml.

My little faux pas is i've gone straight for something hard to do ! I havent even made my own custom navigation and interface yet, which i plan to do next once i crack this little nugget, but this is why i was impressed with flashpanorama for this effect with gmap, recommended and excellently implemented by Ricardo usvp http://www.usvp.com.br/

I think what is needed from me is to sit in a quiet corner with an as3 book for a while, then read as much flashpanorama posts and topics i can find. It can only make me better at as3 coding. Unfortunately i have to work (normal job) today and tomorrow so cant solve this now till Monday, many thanks for help and interest chaps !

tom

Hello,
I cannot take credit for that work. It is not mine but a site I go to many
times to view the areas I want to visit when I tour europe next year!
So the site works for that purpose!

Here is some of my work:

http://www.izonemedia.net/pano/

[seeinside360]

@seeinside...: When I go to your site (nicely layed out!), and click the info button on your FPP presentation, I get this (attached image). I didn't think it was intentional, so thought I'd post it.

Thanks Patrick, I have some hosting problems when ı upload my prensentations ı noticed some diffrences . so ı will chance my host...I think you are a mac user ı have't test it for mac...