Furattopanorama o tsukatta mappu no settei 18 / 5,000 Setting up a map with a flat panorama

YASUSHI KUMON · January 14, 2025 at 7:04 AM

Hi，

I want to create a map with a flat panorama.

Here is the prototype.

I've set a flat panorama with the following code:

Code

		 <layer name="map" type="krpano" width="300" height="300" 
		 	align="righttop"  x="10" y="10" keep="true"
		 	onloaded="krpano.actions.loadpano('j_map/map.xml');"	alpha="1" 
			renderer="webgl"  capture="true"  enabled="true" zorder="5"/>

Code

<krpano bgcolor="0x555555">

	<!-- the skin and the flat pano viewing and controlling setup -->

	<include url="%VIEWER%/skin/flatpano_setup.xml" />
	<include url="%VIEWER%/skin/defaultskin-OR.xml" />	
	<!-- preview pano image -->
	<preview url="j_map.tiles/preview.jpg" />

	<!-- pano image -->
	<image hfov="1.00" vfov="1.000000" voffset="0.00">
		<flat url="j_map.tiles/l%l/%v/l%l_%v_%h.jpg" multires="512,256x256,512x512,768x768,1536x1536,3072x3072" />
	</image>

	<hotspot name="spot1" url="%VIEWER%/j_map/03.png" ath="0" atv="0" scale="0.4" linkedscene="scene_VR2"
			onclick=" lookto(get(ath),get(atv),0.3,tween(default,1.0)); 
			krpano.actions.loadscene(scene_VR2,null,'MERGE','BLEND(0.5)');"/>

	<hotspot name="spot2" url="%VIEWER%/j_map/03.png" ath="0" atv="0.2" scale="0.4"
			onclick="lookto(get(ath),get(atv),0.3,tween(default,1.0)); 
			krpano.actions.loadscene(scene_VR3,null,'MERGE','BLEND(0.5)');"/>

</krpano>

Display More

Problem 1 The scene doesn't change when I click on a spot.

Problem 2 I can't specify the radar's parent as a spot.

Problem 3 bgcolor="0x555555" is not reflected.

Is there a good way to solve this?

thank you.

Tuur · January 14, 2025 at 8:16 AM

Hi,

I think you should communicate etc with the krpano type layer.. all with js.
In the map.xml, define the global krpano in a js type action and call it for example krpano1.

Code

var krpano1 = document.getElementById('krpanoSWFObject');
krpano1 = krpano1.get('global');
krpano1.trace(1,'hello world');

You can also give the krpano layer a bgcolor in the layer definition.
I would guess that you also can parent the radar to a hotspot in the map.xml with a smart action.

Tuur

indexofrefraction · January 14, 2025 at 8:43 AM

you need to be careful with in which krpano your elements are and where your code is executed...

one way to have the globals would probably be :

now you should be able to access

- krpano-main from krpano-map with krmain.trace('hello'); and

- krpano-map from krpano-main with krmap.trace('hello');

then, if your map hotspots are in krpano-map you would use onclick="krmain.actions.loadscene(...)"

ps. your radar is in krpano-main but should probably be in krpano-map with parent=""

and you must have an onviewchange event to set its direction/angle from krpano-main...

YASUSHI KUMON · January 14, 2025 at 9:29 AM

Thank you Tuur and indexofrefraction .

Thanks for the advice!
I'll try it and let you know.

San7 · January 14, 2025 at 9:49 AM

Hi,
There is also a problem with the radar, because the radar is located outside the open tour. I've tried to implement this before, and I've been making changes to the radar.
And you also need to control the radar by transmitting rotation and angle to the flat panorama.
Here I made an example

Tuur · January 14, 2025 at 12:03 PM

Hi,

this code seems to tackle most of the issues.

Code

	<layer name="p1" keep="true" type="krpano"  align="righttop" enabled="true" x="10" y="10" width="500" height="300" bgcolor="0x000000" bgalpha="1"  bgborder="2 0xffffff 1"  bgroundedge="8"  maskchildren="true"   onloaded="PrepMap();" />

	
    <action name="PrepMap" type="js"><![CDATA[
	//main viewer
		var krp1 = document.getElementById('krpanoSWFObject');
		krp1 = krp1.get('global');

	//maps viewer
		var krp2 = krpano.get("layer[p1]").krpano;
	//some event	
		function doradar(){ 
			krp2.set("plugin[radar].customhlookat", krp1.get("view.hlookat"));
		}
		krp1.events.onviewchanged = function(){ rdr.customhfov = krp1.get("view.fov");doradar(); }
		krp1.events.onnewscene = function(){ rdr.customhfov = rdr.heading = krp1.get("scene[*xml.scene].heading"); }

	//load a flat pano in the 'maps viewer'
		krp2.image.reset();
		krp2.image.hfov = 1;
		krp2.image.vfov = 0.586560;

		krp2.image.flat = {
			url : "panos/map_big.tiles/l%l/%0v/l%l_%0v_%0h.jpg",
			multires : "512,1664x976,3328x1954,6656x3906,13312x7808,26368x15466"
		};

		krp2.actions.loadpanoimage();
		krp2.view.hlookat = 0;
		krp2.view.vlookat = 0;
		krp2.view.fov = 0.3;
		krp2.view.fovtype = "MFOV";
		krp2.view.maxpixelzoom = 2;

		//krp2.actions.showlog(1);

	//add 'map spots'
		var s1 = krp2.actions.addhotspot("spot1");
		s1.ath = -0.0317944;
		s1.atv = -0.0010986;
		s1.onclick = function(){ krp1.actions.loadscene('scene_1');rdr.parent = 'hotspot['+s1.name+']';  }	

		var s2 = krp2.actions.addhotspot("spot2");
		s2.ath = -0.0165474;
		s2.atv = -0.0371576;
		s2.onclick = function(){ krp1.actions.loadscene('scene_2');rdr.parent = 'hotspot['+s2.name+']'; }	

		s1.url = s2.url = 'VT.png';
		s1.scale = s2.scale = 0.3;
		s1.zoom = s2.zoom = false;

	//add radar
		var rdr = krp2.actions.addplugin('radar');
		rdr.url = 'plugins/radar.js';
		rdr.align= 'center';
		rdr.parent = 'hotspot['+s1.name+']'; 
		rdr.heading = krp1.get("scene[*xml.scene].heading");
		rdr.ondown = function(){ krp1.call("events[doview].onviewchanged = '';")}
		rdr.onup = function(){ krp1.call("events[doview].onviewchanged = " + doradar())}
		rdr.customhfov = krp1.get("view.fov");
		rdr.customhlookat = krp1.get("view.hlookat");
 		rdr.oncustomchange = function(){ krp1.set("view.hlookat",   rdr.customhlookat); }

		krp1.events.onviewchanged = function(){ rdr.customhfov = krp1.get("view.fov");doradar(); }
	]]></action>

Display More

Here the online version
https://www.virtualtuur.com/krpano/122/bar…ples/pic_map/1/index.html

https://www.virtualtuur.com/krpano/122/barebones/examples/pic_map/1/tour.xml

edit: made small change (put the doradar action in the prepmap action) and the fov on the cone + heading
Hope it helps

Tuur

San7 · January 14, 2025 at 12:14 PM

This is the code from my example

tour.xml

Code

	<layer name="map" type="krpano" align="righttop"  x="10" y="10" keep="true" width="400" height="300" bgcolor="0x777777" bgalpha="1" bgborder="1 0x999999 1" bgroundedge="5"  zorder="10" onloaded="krpano.actions.loadpano('j_map/map.xml'); startTour()"  /> 	 
	    
	<action name="startTour" type="js" ><![CDATA[   
		var map = krpano.get('layer[map].krpano'); 
		var rdr = map.get('plugin[radar]');
		
		if( rdr ){  
			krpano.call("set(events[flp],keep = 'true', onviewchanged = 'rotate_radar()', onnewscene = 'newsc()')");
 
			krpano.rotate_radar = function() {  rdr.customhlookat = krpano.view.hlookat; rdr.customhfov =krpano.view.hfov;} 
 
			krpano.newsc = function() { map.call("curent_scene(" +  krpano.get('xml.scene') + ")" ); }  
			krpano.call("newsc()"); 
			
		} else {
			setTimeout(() => krpano.call("startTour()") , 50);  
		}  
		
 	]]></action>

Display More

map.xml

Code

		 <!--  ********   radar *********   -->
	<plugin name="radar" keep="true" url="%FIRSTXML%/radar.js" align="center" scale="0.6" fillalpha="0.5" fillcolor="0x7F5F3F" linewidth="1" linecolor="0xE0E0A0" linealpha="0.5" heading="0" oncustomchange="sethlookat(*customhlookat););"  />
	
 	<!-- hotspot parent   -->
	<hotspot name="pointradar" keep="true" url="%VIEWER%/j_map/03.png" scale="0.4" edge="center" zorder="58" onloaded="plugin[radar].parent = 'hotspot[pointradar]';" />  
 
 
	<!--  *********    spot  *********  -->
	<style name="spot" url="%VIEWER%/j_map/03.png" ath="0" atv="0" scale="0.4"  onclick="click_point();"/>   
	 
	<hotspot name="spot1" style="spot" ath="0.2" atv="0"  linkedscene="scene_VR2" />  
	<hotspot name="spot2" style="spot"  ath="-0.25" atv="0" linkedscene="scene_VR3" /> 
			
 	<!--  click spot  -->
	<action name="click_point" scope="local" args="hlookat, hfov">  
		tween(hotspot[pointradar].ath, *caller.ath); 
		tween(hotspot[pointradar].atv, *caller.atv); 
		loadsc(*caller.linkedscene);  
		looktohotspot(*caller.name, *view.fov, smooth(2,2,2), easeInOutQuad );
	</action>	 
 	
	<!--  move to the point of the scene  --> 
	<action name="curent_scene" scope="local" args="namsc"  >   trace(view.fov);
		for(set(i,0), i LT hotspot.count, inc(i), 
			hs = hotspot[*i];   
			if(tolower(hs.linkedscene) == tolower(namsc) , 
				tween(hotspot[pointradar].ath, *hs.ath); 
				tween(hotspot[pointradar].atv, *hs.atv);  
				looktohotspot(*hs.name, *view.fov, smooth(2,2,2), easeInOutQuad); 
			);
		); 
 	</action>		    
	
	<action name="startMap" type="js" autorun="onstart" ><![CDATA[ 
        var krp = document.getElementById('krpanoSWFObject');
        krp = krp.get('global');   
		krpano.sethlookat = function(hlook) { krp.set("view.hlookat", hlook);  } 
		krpano.loadsc = function(sc) { krp.call( "loadscene(" + sc + ", null, KEEPVIEW , BLEND(0.5))")  }   
    ]]></action>

Display More

I just realized that the following customhlookat customhfov attributes appeared on the radar

Fernando · January 15, 2025 at 6:51 AM

Hi San7 thanks for your example.

I have been able to achieve what I wanted except loading the map with "startup view".

I thought it was just setting hlookat, vlookat and fov in map.xml but it ignores this and always loads the full size map, not the part I need.

I have reviewed the code without finding the error.

-----

Tuur thanks for your example. I'm looking into it too.

I think the idea of loading a map via a krpano layer is the best for large plans and maps and we should have an example included in the krpano distribution like yours.

San7 · January 15, 2025 at 7:37 AM

Quote from Fernando

Hi San7 thanks for your example.
I have been able to achieve what I wanted except loading the map with "startup view".
I thought it was just setting hlookat, vlookat and fov in map.xml but it ignores this and always loads the full size map, not the part I need.
I have reviewed the code without finding the error.
-----
Tuur thanks for your example. I'm looking into it too.
I think the idea of loading a map via a krpano layer is the best for large plans and maps and we should have an example included in the krpano distribution like yours.

Display More

Hi
If you have connected flatpano_setup.xml , then the view settings are set in it!

I thought about it a bit and changed the code. When you start the tour, the plan increases example.

This is the code:

tour.xml

map.xml

YASUSHI KUMON · January 15, 2025 at 9:09 AM

Hi San7,

Thanks for the code. It's what I want and it's working perfectly. I was able to set individual headings as well.
I'll also take a look at your new code.

krpano - VR11

Thanks to Tuur and indexofrefraction. My js knowledge is lacking, so I'll take the time to look into it.

Thanks everyone!

Fernando · January 15, 2025 at 1:19 PM

Hi San7 the example is now perfect. I forgot to look in "flatplano_setup.xml" despite the obvious name. Thanks to you and Tuur for sharing

Fernando · April 27, 2025 at 11:47 PM New

Hi San7 !!

The example you kindly shared allows to use a Krpano-type layer as a unique map that can be linked to multiple scenes belonging to that map.

However, if there are multiple maps for other scenes, I'm having a hard time adapting that same example.

Could you share something like scene1 and 2 -> map A and scene 2 and 3 -> map B, where map A and B are Krpano-type layers used as maps?

Thank very much

San7 · April 28, 2025 at 12:34 PM New

Quote from Fernando

Hi San7 !!
The example you kindly shared allows to use a Krpano-type layer as a unique map that can be linked to multiple scenes belonging to that map.
However, if there are multiple maps for other scenes, I'm having a hard time adapting that same example.
Could you share something like scene1 and 2 -> map A and scene 2 and 3 -> map B, where map A and B are Krpano-type layers used as maps?
Thank very much

Hi, I tested it and here's what I did - test

For each plan, folders are created and in them lies a flat panel with points and map.xml

map.xml

Code

 <include url="../all_map.xml" />

 <view fov="0.5" maxpixelzoom="2.0"   limitview="fullrange"  />     
 <control  zoomtocursor = "true" zoomoutcursor = "true"  />     
 <!-- pano image -->
 <image hfov="1.00" vfov="0.588571" voffset="0.00">
     <flat url="floor_1.tiles/l%l/%v/l%l_%v_%h.jpg" multires="512,768x452" />
 </image>  
    
 <hotspot name="spot1" style="spot" ath="0.2" atv="0"  linkedscene="scene_VR2" />  
 <hotspot name="spot2" style="spot"  ath="-0.25" atv="0" linkedscene="scene_VR3" />

Display More

all_map.xml - one code for all maps

all_map.xml

Code

     <!-- hotspot active   -->
<hotspot name="pointradar" keep="true" url="%VIEWER%/icon/03.png" scale="0.4" edge="center" zorder="58" onloaded="plugin[radar].parent = 'hotspot[pointradar]';" />  

 <!--  *********    spot  *********  -->
 <style name="spot" url="%VIEWER%/icon/03.png" ath="0" atv="0" scale="0.4" onclick="click_point();"/>  
     
 <action name="startMap" type="js" autorun="onstart" ><![CDATA[ 
    var krp = document.getElementById('krpanoSWFObject');
    krp = krp.get('global');  
        
    krpano.sethlookat = function(hlook) { krp.set("view.hlookat", hlook);  } 
    krpano.loadsc = function(sc) { krp.call( "loadscene(" + sc + ", null, KEEPVIEW , BLEND(0.5))")  }  
     krpano.curent_map = function(h){ krp.call("curent_map("+ h +")"); }  
 
]]></action>
            
 <!--  click spot  -->
 <action name="click_point" scope="local" args="hlookat, hfov">  
     tween(hotspot[pointradar].ath, *caller.ath); 
     tween(hotspot[pointradar].atv, *caller.atv); 
     loadsc(*caller.linkedscene);  
     looktohotspot(*caller.name, *view.fov, smooth(2,2,2), easeInOutQuad );
 </action>     
    
 <!--  move to the point of the scene   вызов из tour.xml --> 
 <action name="curent_scene" scope="local" args="namsc, map"  >       
     for(set(i,0), i LT hotspot.count, inc(i), 
        hs = hotspot[*i];   
        if(tolower(hs.linkedscene) == tolower(namsc) ,                               
           tween(hotspot[pointradar].ath, *hs.ath); 
           tween(hotspot[pointradar].atv, *hs.atv);  
           looktohotspot(*hs.name, *view.fov, smooth(2,2,2), easeInOutQuad); 
           curent_map(*map);
         );
      ); 
    </action>

Display More

tour.xml

Code

<style name="map" type="krpano" align="righttop"  x="20" y="20" keep="true" width="400" height="300"  alpha="0" onloaded.addevent=" delayedcall(0.1, starttour(get(name))); "  />  
    
 <!-- map1 -->
 <layer name="map1" style="map" onloaded="krpano.actions.loadpano('j_map1/map.xml');"  />
 <!-- map2 -->
 <layer name="map2" style="map" onloaded="krpano.actions.loadpano('j_map2/map.xml');"  /> 
      
   
 <action name="starttour" type="js" ><![CDATA[   
   var nam=args[1];
   var map = krpano.get("layer[" + nam  + "].krpano");  
     
   if( map ){  
      //add radar
      var rdr = map.actions.addplugin('radar'); 
      rdr.url = 'radar.js';
      rdr.align= 'center'; 
      rdr.heading = 0; 
      rdr.keep =true; 
      rdr.scale =0.6; 
      rdr.fillalpha =0.5; 
      rdr.fillcolor =0x7F5F3F; 
      rdr.linewidth =1; 
      rdr.linecolor =0xE0E0A0; 
      rdr.linealpha =0.5; 
      rdr.heading =0; 
      rdr.oncustomchange ='sethlookat(*customhlookat););'; 
        
      krpano.call("set(events["+ nam+"],  keep = 'true', onviewchanged = 'rotate_radar" + nam  + "()', onnewscene = 'newsc" + nam  + "()')");

      krpano['rotate_radar'  + nam] = function() {  rdr.customhlookat = krpano.view.hlookat; rdr.customhfov =krpano.view.hfov;   } 

      krpano['newsc'  + nam] = function() { map.call("curent_scene(" +  krpano.get('xml.scene')  + "," + nam +  ")" ); }  
      krpano.call("newsc" + nam  + "()"); 
            
    } else {
       setTimeout(() => krpano.call("startTour(nam)") , 50);  
    }  
]]></action>    

 <!-- call from flat -->
 <action name="curent_map"  scope="local" args="nam" > trace(nam);
    forall(layer,mp,
      if(mp.style == 'map', mp.enabled=false;    callwith(mp, tween(alpha, 0.0); );  );
    );
    tween(layer[*nam].alpha, 1); 
    layer[*nam].enabled = true;
 </action>  
   ...

Display More

Participate now!