PeakFinder-API

This page contains information about embedding the PeakFinder mountain panorama module to your website.

PeakFinder supports 3 different methods to embed the Panorama Panel to a website:

• Url-Format: Create a link including latitude/longitude and some optional parameters to link to the PeakFinder website
• Embed with iFrame: Add an iFrame container to your website with latitude/longitude
• Embed with Canvas: Use Javascript for full control of the Panorama Panel

Url-Format

PeakFinder provides a simple interface that allows you to create a link to a certain viewpoint or to embed PeakFinder directly on your homepage as an iFrame.

PeakFinder URL Format The following link opens the PeakFinder website with the given viewpoint: https://www.peakfinder.com/?lat=42.8612&lng=-72.109&name=Monadnock&ele=941

The following links opens the PeakFinder app with the given viewpoint on your iOS or Android device:

• peakfinder://?lat=42.8612&lng=-72.109
• peakfinder://?lat=42.8612&lng=-72.109&name=Monadnock
• peakfinder://?lat=42.8612&lng=-72.109&name=Monadnock&ele=941
• peakfinder://?lat=42.8612&lng=-72.109&name=Monadnock&ele=941&off=500

Arguments

Additionally to the required parameters lat and lng you can add the following arguments:

Key	Argument	Description
lat	Latitude (required)	Float value, Wgs84 Format (lat=42.8612)
lng	Longitude (required)	Float value, Wgs84 Format (lng=-72.1092)
name	Name of the viewpoint (optional)	Text (name=Monadnock%20Mountain), replace spaces with %20
ele	Elevation (optional)	Integer (ele=941)
off	Elevation offset (optional)	Integer (off=100)
azi	Azimuth (optional)	Float 0.0 .. 360.0 (azi=90.0)
alt	Altitude (optional)	Integer -25.0 .. 25.0 (alt=0.0)
fov	Field of view (optional)	Integer 8 .. 90.0 (fov=45.0)
teleazi & telealt	Azimuth and altitude for displaying the telescope (optional, but both values are required)	Floats 0..360 (teleazi=90.5&telealt=4.5)

---

Embed with iFrame

With the following code you can embed PeakFinder directly to your homepage. Check out this example page: basicexample_iframe.html.

<iframe src="https://www.peakfinder.com/embed/?lat=42.8612&lng=-72.1092&name=Monadnock%20Mountain&ele=941&zoom=5&azi=255" 
    frameBorder="0" width="100%" height="570" name="peakfinder">
<p>Your Browser do not support iFrames.</p>
</iframe>

---

Embed with canvas

This method gives you the most flexibility. You can use Javascript to control the PeakFinder module.

Check out this example page: basicexample_canvas.html.

You must do the following steps:

• Include Javascript
• Create canvas tag
• Load script

Include Javascript

Include https://www.peakfinder.com/script/peakfinder.1.0.min.js in your html header:

<script async type="text/javascript" src="https://www.peakfinder.com/script/peakfinder.1.0.min.js"></script>

Create Canvas Tag

Add the following canvas tag your your html body:

<div class="content">
  <canvas id="pfcanvas" oncontextmenu="event.preventDefault()"> </canvas>

  <!-- you can also add an optional div that will be hidden when the PeakFinder modele has been loaded -->
  <div id="pfcanvasprogress">
    <div class="spinner" id="spinner">
    </div>
  </div>
</div>

Load script

Add the following script to load the module:

if (PeakFinder.utils.caniuse()) {

  let panel = new PeakFinder.PanoramaPanel({
    canvasid: 'pfcanvas', 
    locale: 'en' // attach to canvas
  }) 
  
  panel.init(function() {
    // inside here its save to use the panel
    
    panel.settings.distanceUnit(1) // use imperial (miles, feet) format
            
    panel.loadViewpoint(46.53722, 8.12610, 'Finsteraarhorn') // loads a viewpoint

    // animate to view
    panel.azimut(209.0, 2.0)
    panel.altitude(1.0, 1.0)
    panel.fieldofview(45.0, 2.0)
  });
}

---

Javascript API Reference

Version 1.0

---

Functions

PeakFinder~PeakFinder : object

Constructor: Initialization of the PeakFinder PanoramaPanel. Pass the options in a Javascript dictionary:

Properties

Name	Type	Description
canvasid	string	The id of the html canvas element. Default: 'canvas'
locale	string	The language locale of the module. Default: 'en'. Supported locales: en,de,fr,it,es,pt,ja,ko,zh-Hans,zh-Hant
bgcolor	string	A custom color for the background/sky. Normally the sky is white. For another color use the format '#rrggbb' (e.g. #87CEEB for sky color).

Example

let panel = new PeakFinder.PanoramaPanel({
  canvasid: 'pfcanvas', 
  locale: 'en'
}) // attach to canvas

PeakFinder~addEventListener(eventname, callback)

Registers an event listenster that receives events from the PanoramaPanel. This method must be called after the init() resp. asycinit() methode. The following events are supported: 'viewpointjourney finished' : all data for a new viewpoint has been loaded 'viewpoint changed' : viewpoint has changed

Param	Type	Description
eventname	string	The name of the event (see list above)
callback	function	This function will be called when the requested event is dispached

Example

panel.addEventListener('viewpointjourney finished', function() {
  console.log('viewpointjourney has been finished')
})

PeakFinder~registerCommandsCallback(command)

Registers a callback that receives commands/messages from the PanoramaPanel. The PanoramaPanel will send a message when a specific event occured. E.g. when a new viewpoint was loaded the command:
viewpoint changed lat=46.53722&lng=8.12610
will be sent. Normally register to this callback can be skipped.

Param	Type	Description
command	function	function must have the format functioname(command).

Example

panel.registerCommandsCallback(function(cmd) {
  console.log(cmd)
})

PeakFinder~init(callback)

Loads all the needed stuff for displaying the panorama. Call this method only once. The async callback will inform when the panorama panel is ready. After this call additional commands like loadViewpoint may be called.

Param	Type	Description
callback	function	This function will be called when everything is ready

Example

panel.init(function() {
  console.log('ready')
  // inside here you can use panel
  panel.loadViewpoint(46.53722, 8.12610, 'Finsteraarhorn')
  
});

PeakFinder~asyncinit()

Loads all the needed stuff for displaying the panorama. Call this method only once. Same as the init function but with support for the Javascript async pattern. After this call additional commands like loadViewpoint may be called.

Example

async panel.asyncinit()

console.log('ready')
panel.loadViewpoint(46.53722, 8.12610, 'Finsteraarhorn')

PeakFinder~loadViewpoint(latitude, longitude, the)

Loads a viewpoint with the given coordinates and an optional name

Param	Type	Description
latitude	number
longitude	number
the	string	viewpoint name. Optional

PeakFinder~viewpointJourneyFinished() ⇒ boolean

Checks if the viewpoint journey has been finished.

PeakFinder~azimut(val, animationduration) ⇒ number

Get/set azimut.

Param	Description
val	The azimut value in degrees
animationduration	The duration of the animation. If undefined no animation will be done.

Example

await panel.azimut(120.0, 1.0) // set azimut with an animation time of 1 second

const azimut = panel.azimut() // gets azimut

PeakFinder~altitude(val, animationduration) ⇒ number

Get/set altitude.

Param	Description
val	The altitude value in degrees
animationduration	The duration of the animation. If undefined no animation will be done.

PeakFinder~fieldofview(val, animationduration) ⇒ number

Get/set field of view (zoom).

Param	Description
val	The field of view (zoom) value in degrees
animationduration	The duration of the animation. If undefined no animation will be done.

PeakFinder~elevationOffset(val, animationduration) ⇒ number

Get/set elevation offset.

Param	Description
val	The elevation offset in meters
animationduration	The duration of the animation. If undefined no animation will be done.

Example

await panel.elevationOffset(200.0, 1.0) // set elevation offset to 200m animation time of 1 second

const elev = panel.elevationOffset() // gets elevation offset

---

PeakFinder.settings

The following setters and getters manage the PeakFinder settings.

PeakFinder.Settings~theme() ⇒ number

Get/set theme.
0: light, 1: dark

Example

panel.settings.theme(1) // set to dark

const unit = panel.settings.theme() // gets dark

PeakFinder.Settings~distanceUnit() ⇒ number

Get/set distance unit.
0: metric, 1: imperial

Example

panel.settings.distanceUnit(1) // set to imperial

const unit = panel.settings.distanceUnit() // gets imperial

PeakFinder.Settings~coordsFormat() ⇒ number

Get/set the coordinates format.
0: degree (46°30'21"N 8°20'14"E), 1: decimal (46.2412°N 8.1342°E)

PeakFinder.Settings~projection() ⇒ number

Get/set the projection.
0: perspective, 1: cylindrical

PeakFinder.Settings~showSun() ⇒ number

Get/set display of the sun ecliptic.
0: hide, 1: show

PeakFinder.Settings~showMoon() ⇒ number

Get/set display of the moon ecliptic.
0: hide, 1: show

PeakFinder.Settings~showGrid() ⇒ number

Get/set display of the coordinate grid.
0: hide, 1: show

PeakFinder.Settings~visibilityRange() ⇒ number

Get/set the visiblitiy range in meters.
valid range: 0..320000 (320km, 200mil)

PeakFinder.Settings~minimalElevation() ⇒ number

Get/set the minimal elevation for the displayed peak names.
valid range: 0..10000 (10000m, 32000feet)

---

PeakFinder.viewpoint

These methods return information about the current viewpoint.

PeakFinder.Viewpoint~name() ⇒ String

Gets the viewpoint name.

Returns: String - the viewpoint name

PeakFinder.Viewpoint~coordsdecimal() ⇒ String

Gets the viewpoint coordinates in decimal format.

Returns: String - the coordinates in decimal format (e.g. 46.53722°N, 8.12610°E)

PeakFinder.Viewpoint~coordsdegree() ⇒ String

Gets the viewpoint coordinates in degree format.

Returns: String - the coordinates in degreee format (e.g. 46°32'13''N, 8°07'33''E)

PeakFinder.Viewpoint~elevation() ⇒ number

Gets the viewpoint elevation in meters.

Returns: number - the elevation in meters

---

PeakFinder.astro

These methods can be used to set the current date/time and to return sunrise/sunset, moonrise/moonset times.

PeakFinder.Astro~currentDateTime(year, month, day, hour, minute)

Sets the date/time for the caluclation of sun and moon times

Param	Type	Description
year	number
month	number	(1..12)
day	number	(1..31)
hour	number
minute	number

Example

panel.astro.currentDateTime(2022, 7, 12, 14, 30)

PeakFinder.Astro~currentDateTimeNow()

Sets the date/time to now

PeakFinder.Astro~sunTimes() ⇒ String

Gets the time of sunrise, sunset.

Returns: String - the times (e.g. '↑05:54, ↓21:17')

PeakFinder.Astro~moonTimes() ⇒ String

Gets the time of moonrise, moonset.

Returns: String - the times (e.g. '↑07:13, ↓22:33, 3.4%')

---

PeakFinder.telescope

These methods can be used to show/hide telescope and get azimut, altitude, distance and elevation.

PeakFinder.Telescope~show()

Shows the telescope

Example

panel.telescope.show()

PeakFinder.Telescope~hide()

Hide the telescope

PeakFinder.Telescope~centerAzimut() ⇒ Number

Get the azimut of the telecope center

Returns: Number - azimut

PeakFinder.Telescope~centerAltitude() ⇒ Number

Get the altitude of the telecope center

Returns: Number - altitude

PeakFinder.Telescope~centerDistance() ⇒ Number

Get the distance of the telecope center

Returns: Number - distance

PeakFinder.Telescope~centerElevation() ⇒ Number

Get the elevation of the telecope center

Returns: Number - elevation

---

PeakFinder.utils

The following static util functions may be used for the initialization of the module.

PeakFinder.utils.caniuse() ⇒ Boolean

Checks if the browser supports the required technoligies to display the PeakFinder PanoramaPanel.

Returns: Boolean - True if showing PeakFinder module is supported

PeakFinder.utils.isTouchDevice() ⇒ Boolean

Checks if device has a touch screen.

Returns: Boolean - True if its a touch device

PeakFinder.utils.sleep(timeout)

Non-blocking sleep function. Use this function to wait for a result of an async call.

Param	Type	Description
timeout	number	in seconds

Example

panel.astro.currentDateTime(2022, 7, 12, 14, 30)

// it takes a moment until the suntimes are evaluated. so sleep for a second.
await PeakFinder.utils.sleep(1.0)
console.log(panel.astro.sunTimes())

---

@ https://www.peakfinder.com