• A krpano-based Maps Plugin using Open Street Map images (and others).
• Compatible to the Google Maps and Bing Maps Plugins and can be used a direct replacement.
• As krpano-based, open-source xml-only plugin, it allows way more customizing and is more flexible, e.g. use any kind of krpano hotspots or krpano layers on the map.

Plugin documentation topics:

• Usage Syntax
• Plugin Settings
• Plugin Actions (Compatibility Actions)
• Plugin Subnodes (for compatibility)
  • Radar
  • Spotstyle
  • Spot
• Examples

Usage Syntax

Including and setup:

<include url="%VIEWER%/plugins/krpanomaps.xml" />
			
<layer name="map" style="krpanomaps"
       ...
       ☞ map settings ...
       lat="0.0"
       lng="0.0"
       zoom="0.0"
       ☞ customization settings ...
       tileprovider="openstreetmaps"
       zoombase="screen"
       controls="zoom|zoomarea|geolocation|location|maptype"
       gesturerotation="false"
       activespotenabled="false"
       ☞ events
       onmapmoved=""
       onmapzoomed=""
       onmapready=""
>
    ☞ additional elements
    <radar ... />
    <spotstyle ... />
    <spot ... />
</layer>

Plugin Settings

Variable name		Type	Default value
lat lng		Number Number	0.0 0.0
Latitude and Longitude in degrees. The geographic coordinates of the current map center position.
Variable name		Type	Default value
zoom		Number	0.0
Set the zoom level of the map. From 0.0 to 20.0, continuously.
Variable name		Type	Default value
tileprovider		String	"openstreetmaps"
Select the tile-provider for the maps images. A tile-provider can be defined in the xml by a <krpanomaps_tileprovider> element. See the krpanomaps.xml for details.
Variable name		Type	Default value
zoombase		String	"screen"
Should the zoom be relative to the actual screen-pixels or to the layer size. Available options: screen The zoom of the map is relative to the actual pixels of the screen and the pixel of the map-images. Changing the layer or viewer size, will not change the zoom-level, but the visible area. layer Here the zoom is relative to the size of the map layer element. When changing the layer size, the visible part of the map will be kept the same.
Variable name		Type	Default value
controls		String	...
Select which default controls/elements should be visible on the map. The setting can contains several Strings combined by | characters. Available options: zoom - zoom-in and zoom-out buttons. zoomarea - a button to zoom-out to see all map-spots. geolocation - a button to zoom and move to the current users geo-location. location - a textfield to see the current lat/lng coordinates. maptype - a selectbox to change the maptype. mapshadow - add a slight shadow on the map border. The default is: zoom|zoomarea|geolocation|location|maptype
Variable name		Type	Default value
gesturerotation		Boolean	false
Allow rotating the map using multi-touch gestures.
Variable name		Type	Default value
activespotenabled		Boolean	false
Should the current active spot be enabeld? That means - should the active spot react to click or over events.
Variable name		Type	Default value
onmapmoved onmapzoomed		Event Event
Events that will be called when the map was moved or zoomed.
Variable name		Type	Default value
onmapready		Event
This event will be called when the krpano Maps Plugin is ready for usage.

Plugin Actions (krpanomaps only)

• addlayer(name)
• addhotspot(name, ismapspot)
• getbounds(pnts, areascale)
• fitbounds(pnts, areascale, instant)
• panto(lat, lng, zoom, mode, time, tweentype, donecallback)
• distance(lat1, lng1, lat2, lng2, unit)
• maptolayer(lat, lng)
• layertomap(x, y)

l = layer[map].addlayer(name)

hs = layer[map].addhotspot(name, ismapspot)

bounds = layer[map].getbounds(pnts, areascale)

layer[map].fitbounds(pnts, areascale, time, donecallback)

layer[map].panto(lat, lng, zoom, mode, time, tweentype, donecallback)

layer[map].distance(lat1, lng1, lat2, lng2, unit)

p = layer[map].maptolayer(lat, lng)

p = layer[map].layertomap(x, y)

Compatibility Plugin Actions (same for all maps plugins)

• activatespot()
• addspot()
• addstylespot()
• addimagespot()
• addspotstyle()
• panby()
• panto()
• pantospot()
• removeallspots()
• removespot()
• setcenter()
• setzoom()
• zoomin()
• zoomout()
• zoomtospotsextent()

• activatespot(name)
  • Activate the spot wih the given name.
  • 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.
• addimagespot(name, lat, lng, heading, spotstyle, url, onclick, onhover, onover, onout)
  • Add a new spot with a custom image.
  • name = name of the new spot.
  • lat / lng = the geographic coordinates of the spot.
  • heading = pano heading for the spot.
  • spotstyle = spotstyle for the spot.
  • url = url of the image for the spot.
  • onclick, onhover, onover, onout = mouse events for the spot. (optionally)
• addspot(name, lat, lng, heading, active, onclick, onhover, onover, onout)
  • Add a new spot (with the DEFAULT style).
  • name = name of the new spot.
  • lat / lng = the geographic coordinates of the spot.
  • heading = pano heading for the spot.
  • active = activate the spot? (optionally)
  • onclick, onhover, onover, onout = mouse events for the spot. (optionally)
• addspotstyle(name, url, overurl, activeurl, edge, x, y)
  • Add a new spotstyle.
  • name = name of the new spotstyle.
  • url = url of the default image. (optionally)
  • overurl = url of the over image. (optionally)
  • activeurl = url of the active image. (optionally)
  • edge = alignment edge / anchor point of the spot images. (optionally)
  • x / y = pixeloffset from the edge point. (optionally)
• addstylespot(name, lat, lng, heading, spotstyle, active, onclick, onhover, onover, onout)
  • Add a new spot with a custom style.
  • name = name of the new spot.
  • lat / lng = the geographic coordinates of the spot.
  • heading = pano heading for the spot.
  • spotstyle = spotstyle for the spot.
  • active = activate the spot? (optionally)
  • onclick, onhover, onover, onout = mouse events for the spot. (optionally)
• panby(dx, dy)
  • Pan the map.
  • dx / dy = distance in pixels to pan.
• panto(lat, lng)
  • Pan to the given coordinates.
  • lat / lng = the map coordinates.
• pantospot(name, zoomlevel)
  • Pan to the coordinates of the given spot.
  • name = name of the spot.
  • zoomlevel = zoom to the given level (optionally).
• removeallspots()
  • Remove all spots from the map.
• removespot(name)
  • Remove the given spot.
  • name = name of the spot to be removed.
• setcenter(lat, lng)
  • Set a new center for the map.
  • lat / lng = the map center coordinates.
• setzoom(zoom)
  • Set a new zoom level for the map.
• zoomin(lat, lng, center)
  • Zoom in the map by one zoom level.
  • Can be used for own controls.
  • lat / lng = zoom toward this coordinates (optionally).
  • zoom = set to true to center the map at the lat/lng coordinates (optionally).
• zoomout(lat, lng)
  • Zoom out the map by one zoom level.
  • Can be used for own controls.
  • lat / lng = zoom toward this coordinates (optionally).
• zoomtospotsextent()
  • Zoom and pan the map automatically to show all spots.

Plugin Subnodes - <radar>

The <radar> element with all its settings:

<radar visible="false"
       lat="0.0"
       lng="0.0"
       size="100"
       dragable="true"
       zoomwithmap="false"
       headingoffset="90"
       alpha="0.5"
       fillcolor="0xFFFFFF"
       fillalpha="1.0"
       linewidth="0.0"
       linecolor="0xFFFFFF"
       linealpha="0.0"
       />

• radar.visible
  • Show or hide the radar.
• radar.lat / radar.lng
  • The position of the radar on the map.
  • When a spot will be set active, then the radar will automatically move to its position.
• radar.size
  • The size / range of the radar cone.
• radar.dragable
  • Should the radar cone be dragable by the mouse?
• radar.zoomwithmap
  • Should the radar cone also be zoomed when zooming the map?
• radar.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.
• radar.alpha
  • The alpha transparency of the whole radar element.
• radar.fillcolor / radar.fillalpha
  • The color and alpha of the filling of the radar cone.
• radar.linewidth / radar.linecolor / radar.linealpha
  • The linewidth, color and alpha of the line around the radar cone.

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[].name
  • The name of the spotstyle.
  • Use this name in the spotstyle setting of a spot.
• spotstyle[].url
  • The url of the image that should be used for the spot.
• spotstyle[].overurl
  • The url of the image that should be used for the spot when the mouse is over the spot.
• spotstyle[].activeurl
  • The url of the image that should be used when the spot is activated.
• spotstyle[].edge
  • The alignment edge / anchor point of the spot image.
• spotstyle[].x / y
  • The offset in pixels from the edge point to the image.
• spotstyle[].scale
  • Scale the spotstyle images.

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[].name
  • The name of the current spot (see also the xml name notes).
• spot[].spotstyle
  • The name of the spotstyle that should be used for that spot.
• 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.
• spot[].lat / lng
  • Latitude and Longitude in degrees.
  • The geographic coordinates of the spot.
• spot[].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.
• spot[].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[].onover
  • Actions / functions that will be called when the mouse moves over the spot element.
  spot[].onhover
  • Actions / functions that will be called in intervals (several times per second) when the mouse stays over (hovers) the spot element.
  spot[].onout
  • Actions / functions that will be called when the mouse moves out of the spot element.
  spot[].onclick
  • Actions / functions that will be called when there is a mouse click on the spot element.
• spot[].activatespot()
  • Activate the current spot.
• spot[].pantospot()
  • Pan the map center to the current spot.

Examples

Maps Plugins Comparison

krpano Maps Plugin Example