You are not logged in.

Add hotspot on map on number of panos

Dear visitor, welcome to krpano.com Forum. If this is your first visit here, please read the Help. It explains in detail how this page works. To use all features of this page, you should consider registering. Please use the registration form, to register here or read more information about the registration process. If you are already registered, please login here.

urbanabdullah

Beginner

  • "urbanabdullah" started this thread

Posts: 3

  • Send private message

1

Monday, June 13th 2022, 6:01am

Add hotspot on map on number of panos

Hi everyone,

I'm new in krpano js, so I would like to know how to add hotspot (pin) on map depending on the number of the panos that I have.
For example, I have 10 panos and I would like to add a js script in xml that read by krpanotools, then krpanotools going to generate the "tour.xml" file, "pano tiles", and the "plugins folder". My application going to read the "tour.xml" file to display it on the screen.

So now, I am trying the script below and its not running is there any idea ?



"


<krpano version="1.20.11" title="Virtual Tour">

<include url="skin/vtourskin.xml" />

<!-- customize skin settings: maps, gyro, webvr, thumbnails, tooltips, layout, design, ... -->
<skin_settings maps="false"
maps_type="google"
maps_bing_api_key=""
maps_google_api_key="AIzaSyDfj6i9Y4cLxc5euUvif-r7N6Ra-WydI7k"
maps_zoombuttons="false"
maps_loadonfirstuse="true"
gyro="true"
gyro_keeplookingdirection="false"
webvr="false"
webvr_keeplookingdirection="true"
webvr_prev_next_hotspots="true"
autotour="false"
littleplanetintro="false"
followmousecontrol="false"
title="false"
thumbs="true"
thumbs_width="120" thumbs_height="80" thumbs_padding="10" thumbs_crop="0|40|240|160"
thumbs_opened="false"
thumbs_text="false"
thumbs_dragging="true"
thumbs_onhoverscrolling="false"
thumbs_scrollbuttons="false"
thumbs_scrollindicator="false"
thumbs_loop="false"
tooltips_buttons="false"
tooltips_thumbs="false"
tooltips_hotspots="false"
tooltips_mapspots="false"
deeplinking="false"
loadscene_flags="MERGE"
loadscene_blend="OPENBLEND(0.5, 0.0, 0.75, 0.05, linear)"
loadscene_blend_prev="SLIDEBLEND(0.5, 180, 0.75, linear)"
loadscene_blend_next="SLIDEBLEND(0.5, 0, 0.75, linear)"
loadingtext=""
layout_width="100%"
layout_maxwidth="814"
controlbar_width="-24"
controlbar_height="40"
controlbar_offset="20"
controlbar_offset_closed="-40"
controlbar_overlap.no-fractionalscaling="10"
controlbar_overlap.fractionalscaling="0"
design_skin_images="vtourskin.png"
design_bgcolor="0x2D3E50"
design_bgalpha="0.8"
design_bgborder="0"
design_bgroundedge="1"
design_bgshadow="0 4 10 0x000000 0.3"
design_thumbborder_bgborder="3 0xFFFFFF 1.0"
design_thumbborder_padding="2"
design_thumbborder_bgroundedge="0"
design_text_css="color:#FFFFFF; font-family:Arial;"
design_text_shadow="1"
radar="true"
/>



<!--
For an alternative skin design either change the <skin_settings> values
from above or optionally include one of the predefined designs from below.
-->

<include url="skin/vtourskin_design_117round.xml" />




<scene name="scene_20200718-165014-000000276" title="20200718-165014-000000276" onstart="" thumburl="../panos/20200718-165014-000000276.tiles/thumb.jpg" lat="2.37289444" lng="102.22653333" heading="240.1">

<control bouncinglimits="calc:image.cube ? true : false" />

<view hlookat="240.1" vlookat="0.0" fovtype="MFOV" fov="120" maxpixelzoom="2.0" fovmin="70" fovmax="140" limitview="auto" />

<preview url="../panos/20200718-165014-000000276.tiles/preview.jpg" />

<image prealign="0|240.1|0">
<cube url="../panos/20200718-165014-000000276.tiles/%s/l%l/%v/l%l_%s_%v_%h.jpg" multires="512,640,1280,2624" />
</image>

</scene>

<scene name="scene_20200718-165014-000000277" title="20200718-165014-000000277" onstart="" thumburl="../panos/20200718-165014-000000277.tiles/thumb.jpg" lat="2.37288333" lng="102.22651389" heading="240.0">

<control bouncinglimits="calc:image.cube ? true : false" />

<view hlookat="240.0" vlookat="0.0" fovtype="MFOV" fov="120" maxpixelzoom="2.0" fovmin="70" fovmax="140" limitview="auto" />

<preview url="../panos/20200718-165014-000000277.tiles/preview.jpg" />

<image prealign="0|240.0|0">
<cube url="../panos/20200718-165014-000000277.tiles/%s/l%l/%v/l%l_%s_%v_%h.jpg" multires="512,640,1280,2624" />
</image>

</scene>

<scene name="scene_N84E41-000001" title="N84E41-000001" onstart="" thumburl="../panos/N84E41-000001.tiles/thumb.jpg" lat="2.94204167" lng="101.51803611" heading="356.0">

<control bouncinglimits="calc:image.cube ? true : false" />

<view hlookat="356.0" vlookat="0.0" fovtype="MFOV" fov="120" maxpixelzoom="2.0" fovmin="70" fovmax="140" limitview="auto" />

<preview url="../panos/N84E41-000001.tiles/preview.jpg" />

<image prealign="0|356.0|0">
<cube url="../panos/N84E41-000001.tiles/%s/l%l/%v/l%l_%s_%v_%h.jpg" multires="512,640,1280,2624" />
</image>

</scene>

<scene name="scene_N84E41-000002" title="N84E41-000002" onstart="" thumburl="../panos/N84E41-000002.tiles/thumb.jpg" lat="2.94206944" lng="101.51803611" heading="2.5">

<control bouncinglimits="calc:image.cube ? true : false" />

<view hlookat="2.5" vlookat="0.0" fovtype="MFOV" fov="120" maxpixelzoom="2.0" fovmin="70" fovmax="140" limitview="auto" />

<preview url="../panos/N84E41-000002.tiles/preview.jpg" />

<image prealign="0|2.5|0">
<cube url="../panos/N84E41-000002.tiles/%s/l%l/%v/l%l_%s_%v_%h.jpg" multires="512,640,1280,2624" />
</image>

</scene>

<!-- here what I added -->
<!-- here what I added -->
<!-- here what I added -->
<!-- here what I added -->

<action name = "skin_addmapspots" >
<![CDATA[
for(set(i,0), i LT scene.count, inc(i),
if(scene[get(i)].lat,
<!--Set hotspot name, modify: use spot+scene name as hotspot name, -->
txtadd(spotname,'spot', get(scene[get(i)].name));
<!--Set the hotspot click event function: skin_hidetooltips() retract the toolbar after the hotspot is clicked. activatespot(',get(spotname),'); The current hot spot is selected. skin_loadscene(); Load scene -->
txtadd(spotclickevent,'skin_hidetooltips(); activatespot(',get(spotname),'); skin_loadscene(', get(scene[get(i)].name),',get(skin_settings.loadscene_blend)); skin_updatescroll( ); delayedcall(0.5,skin_showmap(false));');
<!--copy scene hotspot name-->
copy(scene[get(i)].mapspotname, spotname);
<!--Add hotspot parameters: (hotspot name, longitude, latitude, azimuth, false, click event, null) -->
addspot(get(spotname), get(scene[get(i)].lat), get(scene[get(i)].lng), get(scene[get(i)].heading), false, get( spotclickevent), null);
<!--Hover the mouse over the map hotspot whether a text prompt pops up-->
if(skin_settings.tooltips_mapspots,
set(layer[skin_map].spot[get(spotname)].tooltip, get(scene[get(i)].title) );
txtadd(layer[skin_map].spot[get(spotname)].onover,'set(hovering,true);', get(style[skin_tooltips].onover) );
txtadd(layer[skin_map].spot[get(spotname)].onout,'set(hovering,false);', get(style[skin_tooltips].onout) );
);
);
);
if(xml.scene != null,
activatespot(get(scene[get(xml.scene)].mapspotname));
,
activatespot(spot0);
);
<!-- zoom and pan the map to see all spots at the same time spotclickevent-->
zoomToSpotsExtent();
]]>
</action >


<layer name = "mapcontainer" type = "container" keep = "true" bgcolor = "0xD81B1B" bgalpha = "1" align = "leftbottom" x = "1" y = "1" width = "270" height = " 370" >
<plugin name = "map" keep = "true"
url.html5 = "%SWFPATH%/plugins/googlemaps.js"

key.html5 = "AIzaSyDfj6i9Y4cLxc5euUvif-r7N6Ra-WydI7k"

maptype = "SATELLITE"
lat = "3.09" lng = "101.50" zoom = "5"
align = "lefttop" x = "10" y = "10" width = "250" height = "350"

onmapready="skin_addmapspots();"
>
<radar visible = "true" size ="300" alpha = "0.33" fillcolor = "0xFFFFFF" fillalpha = "1.0" linecolor = "0x00FF00" linealpha = "0.5" linewidth = "0.5" dragable = "true" headingoffset = "0"/>
<!--skin_addmapspots Examples of hotspots added by functions: active current scene -->
<!-- <spot name="" lat = "3.09" lng = "101.50" heading="0" active="true"/> -->
</plugin >
</layer >

<action name = "skin_loadscene" >
<![CDATA[
if (webvr.isenabled AND scene.count GT 1 ,
set(hotspot[webvr_prev_scene].visible, false);
set(hotspot[webvr_next_scene].visible, false);
);
txtadd(layer[skin_thumbborder].parent,'skin_thumb_', get(scene[%1].index));
layer[skin_thumbs].scrolltocenter(get(scene[%1].thumbx), get(scene[%1].thumby));
loadscene(get(scene[%1].name), null, get(skin_settings.loadscene_flags), %2);



<!-- // When the scene is switched, the map hotspot is switched. txtadd is the variable definition function. Here it is defined that the mapSpotName variable is spot plus the string of get(scene[%1].name) is the mapSpotName variable. (Because I am adding the hot event skin_addmapspots to set spot + scene name as the hot spot name, so it should be obtained here too.) -->
txtadd(mapSpotName,'spot', get(scene[%1].name));
plugin[map].activatespot(get(mapSpotName));
<!--plugin[map] is a small map, activatespot sets the map hotspot of the current scene -->

]]>
</action>

<!-- ended -->
<!-- ended -->
<!-- ended -->
<!-- ended -->
<!-- ended -->

</krpano>



"


Thanks for helping.

Similar threads