krpano 1.19-pr16 (build 2018-04-04)

Bing Maps Plugin bingmaps.swf / bingmaps.js

  • The Bing Maps Plugin adds an interactive Bing Map to the viewer.
  • The map can be freely placed and sized anywhere on the screen.
  • It's possible to place spots on the map and link them to krpano actions like loadpano to load a new panoramas when clicking a spot.
  • The plugin has an integrated customizable radar which can apear on the activatted spot.
  • 'Google Maps' styled controls, like the position and zoom controls can be added.
  • And it's possible to control the whole maps and spots dynamically, e.g. pan/zoom around on the map, add or remove spots...
  • The krpano Bing Maps Flash Plugin is powered by OpenScales.
  • Google Maps / Bing Maps Notes - the XML interfaces of the Bing Maps and the Google Maps plugins are almost the same. To use the Bing Maps plugin just replace the Google Maps plugin and change the Google Maps key with a Bing Maps key.

Plugin documentation topics:

Buy / Order

  • The krpano Bing Maps Plugin is an additional Commercial Plugin.
  • To use it a license for the plugin must be bought.
  • The license is valid for the Flash and HTML5 plugin.
  • Without license a krpano watermark will be shown in the map.
  • The plugin can be bought here on this page or on the krpano Buy page.

krpano Maps Plugin License
29 € plus sales tax/VAT*

Usage Syntax

The Bing Maps Plugin embedding with all attributes / sub-nodes and their default values:
<plugin name="map"
        url.flash="bingmaps.swf"
        url.html5="bingmaps.js"
        align="leftbottom" width="400" height="300" x="0" y="0"
        keep="true"
        key="...your Bing Maps API key..."
        maptype="satellite"
        culturecode=""
        lat="..."
        lng="..."
        zoom="1"
        activespotenabled="false"
        bgcolor="0x000000" bgalpha="0.0"
        onmapready=""
        onmaptypechanged=""
        onmapmoved=""
        onmapzoomed=""
>
  <spotstyle name="style1" ... />
  ...
  
  <spot name="spot1" ... active="true" />
  <spot name="spot2" ... />
  <spot name="spot3" ... />
  ...
  
  <radar visible="true" ... />
  
  <positioncontrol visible="false" ... />
  <zoomcontrol     visible="false" ... />
  <maptypecontrol  visible="false" ... />
</plugin>

Plugin Attributes

  • key
    • The Bing Maps API key.
    • To be able to use the Bing Maps services a Bing Maps API key is needed!
    • Note - a Bing Maps API key is typically not domain limited!
    • Sign up here for a Bing Maps API key...

    • Multi-Domain-Key-Pairs
      • It is possible to use several domain-key pairs as key-attribute to use different keys for different domains.
      • Just separate all the domains and keys by pipe | characters.
      • To set a key for local testing (file://) there is the special domain name "local" available.
      • Syntax / usage example:
        key="yourdomain1.com|key1|yourdomain2.com|key2|local|key1"
  • maptype
    • Select the type of the map:
      • satellite (default)
      • normal
      • hybrid
  • culturecode
  • lat / lng
  • zoom
    • Set zoom level of the map.
    • Can be from 1 to 25.
  • activespotenabled
    • Should the active spot be enabeld?
      That means - should the active spot react to click or over events.
  • maphandcursor (Flash only)
    • Show a hand cursor when the mouse is over the map.
  • dragging (Flash only)
    • Should it be possible to drag the map by the mouse?
  • scrollwheel (Flash only)
    • Should it be possible to zoom in the map by the mouse wheel?
  • dbclicking (Flash only)
    • Should it be possible to use double clicking to zoom in?
  • bgcolor / bgalpha
    • The color and alpha of the map background.
  • mapsapi (HTML5 only)
    • Set manually a different url of the Bing Maps API.
    • The full url, including the protocol and the API version would need to be set.
    • When not set, this default url will be used:
      For HTTP:
      http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0
      For HTTPS:
      https://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0&s=1

Plugin Attributes - Events

  • onmapready
    • Will be called when the Bing Maps Plugin is loaded and ready for usage.
  • onmaptypechanged
    • Will be called when the map type was changed.
  • onmapmoved
    • Will be called when the map was moved.
  • onmapzoomed
    • Will be called when the map was zoomed.

Plugin Subnodes - <spotstyle>

  • With the <spotstyle> subnode it is possible to define styles for the spots.
  • A spot can be assigned to a spotstyle by the spotstyle attribute.
  • There is a predefined style named "DEFAULT".

The <spotstyle> node with all settings and their default values:
<spotstyle name="DEFAULT"
           url=""
           overurl=""
           activeurl=""
           edge="center"
           x="0"
           y="0"
           scale="1.0"
           />

<spotstyle> Attributes

  • name
    • The name of the spotstyle.
      Use this name in the spotstyle attribute of a spot.
  • url
    • The url / path to an image that should be used for the spot.
      When not defined the default image (a blue dot) will be used.
  • overurl
    • The url / path to an image that will be used for the spot when it mouse is over the spot.
      When not defined the default image (a blue dot) will be used.
  • activeurl
    • The url / path to an image that will be used when the spot is activated.
      When not defined the default image (a green dot) will be used.
  • edge
    • The alignment edge / anchor point of the spot image.
      Possible values: lefttop, left, leftbottom, top, center, bottom, righttop, right, rightbottom.
  • x / y
    • The offset in pixels from the edge point to the image.
  • scale
    • Scaling for the spotstyle images.
    • Can be used to use higher resolution (2x scaled) images for the iPad 3 retina screen. Use the bigger image and scale="0.5" to get a 1:1 display of the image on the iPad 3.

Plugin Subnodes - <spot>

  • With the <spot> subnode it is possible to define spots on the map.
  • A spot will be placed at lat/lng coordinates and can be linked to panos by using the loadpano / loadscene actions in the onclick event.

The <spot> node with all settings and their default values:
<spot name="..."
      spotstyle="DEFAULT"
      url="..."
      lat="..."
      lng="..."
      heading="0"
      active="false"
      onover=""
      onhover=""
      onout=""
      onclick=""
      />

<spot> Attributes

  • name
  • spotstyle
    • The name of the spotstyle that should be used for that spot.
  • url
    • The url / path to an image that should be used for the spot.
      When not defined the image from the spotstyle will be used.
  • lat / lng
  • heading
    • The heading of the pano in degrees, needed to align the pano orientation with the radar on the map.
    • See also the radar headingoffset setting for details.
  • active
    • State of the spot. When set to true the spot will be activated. That means the spot will show the active spotstyle image (when no url was set) and that the radar will be shown at the spot location.
    • To activate a spot dynamically use the activatespot() action.

<spot> Events

  • onover
    • Actions / functions that will be called when the mouse moves over the spot element.
    onhover
    • Actions / functions that will be called in intervals (several times per second) when the mouse stays over / hovers the spot element.
    onout
    • Actions / functions that will be called when the mouse moves out of the spot element.
    onclick
    • Actions / functions that will be called when there is a mouse click on the spot element.

<spot> Actions

Plugin Subnodes - <radar>

  • Add and style a radar.
  • The radar will be shown at the active spot position.

The <radar> node with all settings and their default values:
<radar visible="true"
       dragable="true"
       size="100"
       zoomwithmap="false"
       headingoffset="90"
       alpha="0.5"
       fillcolor="0xFFFFFF"
       fillalpha="1.0"
       linewidth="0.0"
       linecolor="0xFFFFFF"
       linealpha="0.0"
       glow="true"
       glowcolor="0xFFFFFF"
       glowwidth="4"
       glowstrength="4"
       />

<radar> Attributes

  • visible
    • Show or hide the radar.
  • dragable
    • Should the radar cone be dragable by the mouse?
  • size
    • The size / range of the radar cone.
  • zoomwithmap
    • Should the radar cone also be zoomed when zooming the map?
  • headingoffset
    • An offset for the heading value of the spots.
    • The default value for headingoffset is 90, which means heading=0 is pointing to right/east by default. Use headingoffset=0 to let heading=0 pointing to top/north.
  • alpha
    • The alpha transparency of the whole radar element.
  • fillcolor / fillalpha
    • The color and alpha of the filling of the radar cone.
  • linewidth / linecolor / linealpha
    • The linewidth, color and alpha of the line around the radar cone.
  • glow / glowcolor / glowwidth / glowstrength (Flash only)
    • Add and style the glowwing effect of the radar cone.

Bing Maps Controls

  • These Controls are available:
  • Note - beside of these included controls it's possible to use own images as controls by using normal krpano plugin elements and adding them with the parent setting to the map.

All controls with all settings and their default values:


Position Control: (Flash only)
<positioncontrol visible="true" align="lefttop" x="2" y="2" />

Zoom Control: (Flash only)
<zoomcontrol visible="true" align="righttop" x="2" y="2" 
             hasscrolltrack="true"
             />

Map-Type Control:
<maptypecontrol visible="true" align="rightbottom" x="2" y="2"
                buttonalign="H"
                buttontexts="Map|Satellite|Hybrid"
                scale="1.0"
                />

Control Attributes

  • visible
    • Show or hide the control.
  • align
    • Alignment of the control.
      Possible settings: lefttop, righttop, leftbottom, rightbottom.
  • x / y
    • Offset in pixels from the alignment point.

  • zoomcontrol.hasscrolltrack
    • Show zoom scroll track or not.
  • maptypecontrol.buttonalign
    • Alignment of the map type buttons. Possible settings: "H" or "V".
  • maptypecontrol.buttontexts (HTML5 only)
    • The button maptype texts.
  • maptypecontrol.scale (HTML5 only)
    • The scaling of the maptype buttons.
    • With the default scaling (1.0) the buttons might be too small for easy usage on mobile devices (iPhone, Android phones), so they can be scaled optionally by using this setting and the xml devices setting. For example:
      <maptypecontrol visible="true" align="righttop" x="5" y="5" />
      <maptypecontrol scale="1.5" buttonalign="V" devices="mobile" />

Plugin Actions

Actions of the Bing Maps Plugin object.

Usage example:
plugin[map].activatespot(spot1);
plugin[map].pantospot(spot1);

Actions documenation:

Examples

Example xml code:
<krpano onstart="loadscene(stpeterssquare,null,MERGE);">

    <layer name="map" keep="true"
           url="bingmaps.swf" alturl="bingmaps.js"
           align="lefttop" x="0" y="0" width="30%" height="100%"
           key="...your Bing Maps API key..."
           maptype="satellite"
           lat="41.90050" lng="12.46705" zoom="15"
           >
        <spot name="stpeterssquare" active="true"
              lat="41.90255" lng="12.45708" heading="64.5"
              onclick="loadscene(stpeterssquare,null,MERGE,BLEND(1));activatespot();"
              />
        <spot name="fourrivers"
              lat="41.89877" lng="12.47311" heading="270.0"
              onclick="loadscene(fourrivers,null,MERGE,BLEND(1));activatespot();"
              />
        <radar visible="true" zoomwithmap="true" size="50" />
        <maptypecontrol visible="true" buttonalign="V" />
    </layer>

    <scene name="stpeterssquare">
        <view hlookat="103" vlookat="-2" fov="100" />
        <preview type="stpeterssquare_preview.jpg" />
        <image>
            <cube url="stpeterssquare_%s.jpg" />
        </image>
    </scene>

    <scene name="fourrivers">
        <view hlookat="-1" vlookat="-4" fov="100" />
        <preview type="fourrivers_preview.jpg" />
        <image>
            <cube url="fourrivers_%s.jpg" />
        </image>
    </scene>

</krpano>