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.

Participate now!

Don’t have an account yet? Register yourself now and be a part of our community!