PeakFinder-API

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

PeakFinder supports 3 different methods to embed a 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 panel

With the canvas method you choose between two panel types: the Panorama Panel, which draws the mountain panorama, and the Map Panel, which draws the map. Both are attached to an html canvas and share the same setup.

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

More examples see here: peakfinder.com/about/resources/apitest/

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)
date	Current date (optional). Used for Sun and moon paths.	ISO 8601 date format: 2025-06-18T13:45:13Z
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 these example pages: basicexample_canvas.html (panorama) and basicexample_canvas_map.html (map).

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)
  });
}

For a map instead of a panorama create a MapPanel:

if (PeakFinder.utils.caniuse()) {

  let panel = new PeakFinder.MapPanel({
    canvasid: 'pfcanvas',
    locale: 'en',
    mapstyle: 'toner',  // 'toner' | 'bright' | 'monochrome-light' | 'toner-flatwood'
    lat: 46.53722,      // the position the map opens at
    lng: 8.12610,
    zoom: 12
  })

  panel.init(async function() {
    // inside here its save to use the panel

    panel.addEventListener('camera changed', function(camera) {
      console.log(`camera changed ${JSON.stringify(camera)}`)
    })

    await panel.flyTo(45.97639, 7.65833, 13.0) // fly to the Matterhorn
  });
}

Javascript API Reference

Version 1.0

Common panel functions

These functions are available on both the PanoramaPanel and the MapPanel.

PeakFinder~addEventListener(eventname, callback)

Registers an event listenster that receives events from the panel. This method must be called after the init() resp. asycinit() methode. The PanoramaPanel supports the following events:

'viewpointjourney finished' : all data for a new viewpoint has been loaded
'viewpoint changed' : viewpoint has changed
'sun changed': sun times have beeen changed.
'moon changed': moon times have beeen changed.
'poiinfo show': user has clicked to a peak name or uses the telescope.

The MapPanel supports these:

'map loaded': the style and the visible tiles have been loaded - the map has pixels.
'camera changed': the camera came to rest after a flight or a gesture. The event data holds the camera: {"lat":46.53722,"lng":8.12610,"zoom":12,"bearing":0,"pitch":0}
'map flight finished': a flyTo() animation has landed. The event data holds the camera.
'back pressed': the user pressed the map's back button (hidden by default, see settings.showBackButton).

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. 'args' will include event data.

Example

panel.addEventListener('viewpointjourney finished', async function(args) {
  console.log(`viewpoint ready ${JSON.stringify(args)}`)
})

PeakFinder~registerCommandsCallback(command)

Registers a callback that receives commands/messages from the panel. The panel 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 panel. Call this method only once. The async callback will inform when the panel is ready. After this call additional commands like loadViewpoint (panorama) or jumpTo (map) 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 panel. 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 (panorama) or jumpTo (map) may be called.

Example

async panel.asyncinit()

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

PeakFinder.PanoramaPanel

The panorama panel: a canvas rendering the PeakFinder mountain panorama. In addition to the functions below it carries the settings, style, viewpoint, astro and telescope sub objects documented further down.

PeakFinder.PanoramaPanel~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).
theme	`string`	'dark' for dark-theme. otherwise 'light' theme will be shown
disableinfosheets	`boolean`	Disables showing the poi infosheet or the viewpoint infosheet when the users click on a peak label or the viewpoint

Example

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

PeakFinder.PanoramaPanel~loadViewpoint(latitude, longitude, name, options)

Loads a viewpoint with the given coordinates and an optional name

Param	Type	Description
latitude	`number`
longitude	`number`
name	`string`	The viewpoint name. Optional
options	`Object`	Additional settings. Optional
options.animation	`string`	How the panorama moves to the new viewpoint. 'fly' (the default) uses the PeakFinder journey animation - it walks, flies or teleports depending on the distance to the current viewpoint. 'teleport' skips the animation and shows the new viewpoint immediately.

Example

panel.loadViewpoint(46.53722, 8.12610, 'Finsteraarhorn') // animated (default)

panel.loadViewpoint(46.53722, 8.12610, 'Finsteraarhorn', {
  animation: 'teleport', // no animation
})

PeakFinder.PanoramaPanel~viewpointJourneyFinished() ⇒ `boolean`

Checks if the viewpoint journey has been finished.

PeakFinder.PanoramaPanel~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.PanoramaPanel~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.PanoramaPanel~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.PanoramaPanel~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.MapPanel

The map panel: a canvas rendering the PeakFinder map. It supports the common panel functions (init, asyncinit, addEventListener, registerCommandsCallback) plus the camera functions below and the settings sub object documented further down.

PeakFinder.MapPanel~PeakFinder : `object`

Constructor: Initialization of the PeakFinder MapPanel. 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
mapstyle	`string`	The style the map is drawn with: 'toner' (the default), 'bright', 'monochrome-light', 'toner-flatwood' or 'relief' (a diagnostic style painting the elevation model itself). An unknown name falls back to the default style.
lat	`number`	Latitude of the position the map opens at. Optional
lng	`number`	Longitude of the position the map opens at. Optional
zoom	`number`	Zoom level the map opens at. Optional, defaults to 12 when lat/lng are given. Without lat/lng the map opens on an overview of the Alps.
bearing	`number`	Bearing in degrees from true north the map opens at. Optional
pitch	`number`	Pitch in degrees the map opens at. 0 is a two-dimensional map. Optional
theme	`string`	'dark' for dark-theme. otherwise 'light' theme will be shown

Example

let panel = new PeakFinder.MapPanel({
  canvasid: 'pfcanvas',
  locale: 'en',
  mapstyle: 'toner',
  lat: 46.53722,
  lng: 8.12610,
  zoom: 12
}) // attach to canvas

PeakFinder.MapPanel~jumpTo(latitude, longitude, zoom, options)

Moves the camera to the given position without any animation.

Param	Type	Description
latitude	`number`
longitude	`number`
zoom	`number`	The zoom level. Optional - the current zoom is kept when it is omitted.
options	`Object`	Additional camera settings. Optional
options.bearing	`number`	Bearing in degrees from true north
options.pitch	`number`	Pitch in degrees. 0 is a two-dimensional map

Example

panel.jumpTo(46.53722, 8.12610, 12)

panel.jumpTo(46.53722, 8.12610, 12, { bearing: 45.0, pitch: 30.0 })

PeakFinder.MapPanel~easeTo(latitude, longitude, zoom, options)

Moves the camera to the given position with a transition of a fixed duration. Use this for short moves, where flyTo's zoom-out arc would look exaggerated.

Param	Type	Description
latitude	`number`
longitude	`number`
zoom	`number`	The zoom level. Optional - the current zoom is kept when it is omitted.
options	`Object`	Additional settings. Optional
options.duration	`number`	The duration of the animation in seconds. Default: 1.0
options.bearing	`number`	Bearing in degrees from true north
options.pitch	`number`	Pitch in degrees. 0 is a two-dimensional map

Example

await panel.easeTo(46.53722, 8.12610, 12, { duration: 1.0 })

PeakFinder.MapPanel~flyTo(latitude, longitude, zoom, options)

Flies the camera to the given position: the map zooms out, travels and zooms back in. Without a duration the flight takes as long as its distance warrants. The returned promise resolves when the flight has landed - the same moment the 'map flight finished' event is dispatched.

Param	Type	Description
latitude	`number`
longitude	`number`
zoom	`number`	The zoom level. Optional - the current zoom is kept when it is omitted.
options	`Object`	Additional settings. Optional
options.duration	`number`	The duration of the flight in seconds. Optional
options.bearing	`number`	Bearing in degrees from true north
options.pitch	`number`	Pitch in degrees. 0 is a two-dimensional map

Example

await panel.flyTo(45.97639, 7.65833, 13.0) // the engine picks the duration

await panel.flyTo(45.97639, 7.65833, 13.0, { duration: 2.0 })

PeakFinder.MapPanel~camera() ⇒ `Object`

Gets the current camera.

Returns: Object - the camera (e.g. {"lat":46.53722,"lng":8.12610,"zoom":12,"bearing":0,"pitch":0})
Example

const camera = panel.camera()
console.log(`${camera.lat}, ${camera.lng} @ ${camera.zoom}`)

PeakFinder.MapPanel~mapstyle(val) ⇒ `String`

Get/set the style the map is drawn with. In contrast to the mapstyle constructor option this may be called at any time.

Param	Description
val	The style name: 'toner', 'bright', 'monochrome-light', 'toner-flatwood' or 'relief'. An unknown name falls back to the default style.

Example

panel.mapstyle('bright') // switch the style

const style = panel.mapstyle() // gets 'bright'

PeakFinder.MapPanel~addOverlay(id, geojson, layersjson, optionsjson)

Adds a GeoJSON overlay: one source holding the document plus the style layers drawn from it. The overlay is identified by id for every later call, and adding an id that already exists replaces it. Overlays are drawn above the map style, in the order they were added, and they survive a mapstyle change.

layersjson is an array of MapLibre style layers, so the whole expression language is available. Only what is specific to the layer needs to be given: the source is bound to this overlay and a missing layer id is filled in. Leave it out for a plain 2px outline that takes its colour and opacity from each feature's own color and opacity properties.

Param	Type	Description
id	`string`	The name of the overlay
geojson	`string`	The GeoJSON document, as text
layersjson	`string`	The style layers, as text. Optional
optionsjson	`string`	How the document is tiled, as text: a json object taking any of 'minzoom', 'maxzoom', 'buffer' and 'tolerance' - the same options a style's geojson source takes. Optional. These control simplification and tile extent, not memory: tiles are built on demand, so what a document costs is the document itself.

Example

panel.addOverlay('vfpv3', geojsontext) // default outline, coloured per feature

panel.addOverlay('vfpv3', geojsontext, JSON.stringify([{
  type: 'line',
  minzoom: 5,
  paint: {
    'line-color': ['get', 'color'],
    'line-width': 2
  }
}]))

// coarse shapes: simplify harder and stop refining early
panel.addOverlay('vfpv3', geojsontext, undefined, '{"maxzoom":10,"tolerance":1}')

PeakFinder.MapPanel~setOverlayData(id, geojson)

Replaces the overlay's document, keeping its layers and its visibility. Use this rather than addOverlay when new data arrives for an overlay that is already on the map.

Param	Type	Description
id	`string`	The name of the overlay
geojson	`string`	The GeoJSON document, as text

Example

const response = await fetch('/geojson/demorigins?source=vfpv3')
panel.setOverlayData('vfpv3', await response.text())

PeakFinder.MapPanel~showOverlay(id, show)

Shows or hides an overlay. The document stays loaded, so switching an overlay off and on again costs nothing.

Param	Type	Description
id	`string`	The name of the overlay
show	`boolean`

Example

panel.showOverlay('vfpv3', false)

PeakFinder.MapPanel~removeOverlay(id)

Removes an overlay and frees its document.

Param	Type	Description
id	`string`	The name of the overlay

PeakFinder.MapPanel~overlays() ⇒ `Array`

Gets the names of the overlays currently on the map, in the order they were added.

Returns: Array - the overlay ids (e.g. ['best', 'vfpv3'])

PeakFinder.MapPanel~queryFeatures(x, y) ⇒ `Array`

Gets the features drawn at a point on the canvas, topmost last. Use it to react to a click - the panel draws no popups of its own, so the page decides what to show.

The coordinates are css pixels relative to the canvas, which is what a mouse event's offsetX/offsetY give - on a high dpi display they are scaled to the canvas' backing store here. source is the overlay the feature came from.

Returns: Array - the features (e.g. [{"source":"vfpv3","sourceLayer":"","id":42,"properties":{"name":"N46E008","color":"#89dbec"}}])

Param	Type
x	`number`
y	`number`

Example

canvas.addEventListener('click', function (event) {
  const hits = panel.queryFeatures(event.offsetX, event.offsetY)
  if (hits.length) console.log(hits[hits.length - 1].properties.name)
})

PeakFinder.PanoramaPanel.settings

The following setters and getters manage the settings of the panorama panel.

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.Settings~showZoomButtons() ⇒ `number`

Get/set the visibility of the +/- zoom buttons in the upper left corner.
0: hide, 1: show

Example

panel.settings.showZoomButtons(0) // hide the zoom buttons

PeakFinder.Settings~showElevationOffsetControl() ⇒ `number`

Get/set the visibility of the elevation offset control on the left hand side.
0: hide, 1: show

PeakFinder.Settings~showSliders() ⇒ `number`

Get/set the visibility of the slider button in the lower left corner. Hiding it also closes the sliders it opens (date, time, visibility range, minimal elevation).
0: hide, 1: show

PeakFinder.MapPanel.settings

The following setters and getters manage the settings of the map panel. The panorama settings that have no meaning on a map (sun, moon, grid, projection, visibility range, ...) are not available here.

PeakFinder.MapSettings~theme() ⇒ `number`

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

Example

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

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

PeakFinder.MapSettings~distanceUnit() ⇒ `number`

Get/set distance unit. Changing it reloads the map style, so the elevation labels are redrawn in the matching unit.
0: metric, 1: imperial

Example

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

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

PeakFinder.MapSettings~showBackButton() ⇒ `number`

Get/set the visibility of the back button in the upper left corner. It is hidden by default on an embedded map, where there is nothing to go back to. When it is shown, pressing it dispatches the 'back pressed' event.
0: hide, 1: show

Example

panel.settings.showBackButton(1) // show the back button

panel.addEventListener('back pressed', function () {
  history.back()
})

PeakFinder.MapSettings~showStartupMarker() ⇒ `number`

Get/set the visibility of the marker on the position the map opened at.
0: hide, 1: show

Example

panel.settings.showStartupMarker(0) // hide the marker

PeakFinder.style

These setters and getters manage the appearance of the panorama panel. In contrast to the corresponding constructor options they may be used at any time. Panorama panel only.

PeakFinder.Style~backgroundColor(val) ⇒ `String`

Get/set the color of the background/sky.
Normally the sky is white. Use the format '#rrggbb' (e.g. '#87ceeb' for sky color).
In contrast to the bgcolor constructor option this may be called at any time.

Param	Description
val	The background color in the format '#rrggbb'. Named css colors (e.g. 'skyblue') are supported as well.

Example

panel.style.backgroundColor('#87ceeb') // set the sky to sky blue

const color = panel.style.backgroundColor() // gets '#87ceeb'

PeakFinder.viewpoint

These methods return information about the current viewpoint. Panorama panel only.

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. Panorama panel only.

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() ⇒ `Object`

Gets the time of sunrise, sunset.

Returns: Object - the sun times (e.g. {"sun":{"rise":"2025-04-07T06:50:59Z","set":"2025-04-07T20:11:59Z"}} )

~~PeakFinder.Astro~sunTimes() ⇒ `String`~~

Use method sun instead

Gets the time of sunrise, sunset.

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

PeakFinder.Astro~moon() ⇒ `Object`

Gets the time of moonrise, moonset.

Returns: Object - the sun times (e.g. {"moon":{"illum":"74.7%"},"sun":{"rise":"2025-04-07T14:11:59Z","set":"2025-04-08T05:32:59Z"}}

~~PeakFinder.Astro~moonTimes() ⇒ `String`~~

Use method moon instead

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. Panorama panel only.

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.hasMultiThreadingSupport() ⇒ `Boolean`

Checks if browser supports multithreading.

Returns: Boolean - True if multithreading is available

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

Name		Name	Last commit message	Last commit date
.DS_Store		.DS_Store
LICENSE		LICENSE
README.md		README.md
_config.yml		_config.yml
basicexample_canvas.html		basicexample_canvas.html
basicexample_canvas_astro.html		basicexample_canvas_astro.html
basicexample_canvas_bgcolor.html		basicexample_canvas_bgcolor.html
basicexample_canvas_elevationoffset.html		basicexample_canvas_elevationoffset.html
basicexample_canvas_map.html		basicexample_canvas_map.html
basicexample_canvas_telescope.html		basicexample_canvas_telescope.html
basicexample_iframe.html		basicexample_iframe.html
basicexample_links.html		basicexample_links.html
example.css		example.css
examplepage.css		examplepage.css
osmtaginfo.json		osmtaginfo.json

Latest commit

History

Folders and files

Repository files navigation

PeakFinder-API

Url-Format

Arguments

Embed with iFrame

Embed with canvas

Include Javascript

Create Canvas Tag

Load script

Javascript API Reference

Version 1.0

Common panel functions

PeakFinder~addEventListener(eventname, callback)

PeakFinder~registerCommandsCallback(command)

PeakFinder~init(callback)

PeakFinder~asyncinit()

PeakFinder.PanoramaPanel

PeakFinder.PanoramaPanel~PeakFinder : object

PeakFinder.PanoramaPanel~loadViewpoint(latitude, longitude, name, options)

PeakFinder.PanoramaPanel~viewpointJourneyFinished() ⇒ boolean

PeakFinder.PanoramaPanel~azimut(val, animationduration) ⇒ number

PeakFinder.PanoramaPanel~altitude(val, animationduration) ⇒ number

PeakFinder.PanoramaPanel~fieldofview(val, animationduration) ⇒ number

PeakFinder.PanoramaPanel~elevationOffset(val, animationduration) ⇒ number

PeakFinder.MapPanel

PeakFinder.MapPanel~PeakFinder : object

PeakFinder.MapPanel~jumpTo(latitude, longitude, zoom, options)

PeakFinder.MapPanel~easeTo(latitude, longitude, zoom, options)

PeakFinder.MapPanel~flyTo(latitude, longitude, zoom, options)

PeakFinder.MapPanel~camera() ⇒ Object

PeakFinder.MapPanel~mapstyle(val) ⇒ String

PeakFinder.MapPanel~addOverlay(id, geojson, layersjson, optionsjson)

PeakFinder.MapPanel~setOverlayData(id, geojson)

PeakFinder.MapPanel~showOverlay(id, show)

PeakFinder.MapPanel~removeOverlay(id)

PeakFinder.MapPanel~overlays() ⇒ Array

PeakFinder.MapPanel~queryFeatures(x, y) ⇒ Array

PeakFinder.PanoramaPanel.settings

PeakFinder.Settings~theme() ⇒ number

PeakFinder.Settings~distanceUnit() ⇒ number

PeakFinder.Settings~coordsFormat() ⇒ number

PeakFinder.Settings~projection() ⇒ number

PeakFinder.Settings~showSun() ⇒ number

PeakFinder.Settings~showMoon() ⇒ number

PeakFinder.Settings~showGrid() ⇒ number

PeakFinder.Settings~visibilityRange() ⇒ number

PeakFinder.Settings~minimalElevation() ⇒ number

PeakFinder.Settings~showZoomButtons() ⇒ number

PeakFinder.Settings~showElevationOffsetControl() ⇒ number

PeakFinder.Settings~showSliders() ⇒ number

PeakFinder.MapPanel.settings

PeakFinder.MapSettings~theme() ⇒ number

PeakFinder.MapSettings~distanceUnit() ⇒ number

PeakFinder.MapSettings~showBackButton() ⇒ number

PeakFinder.MapSettings~showStartupMarker() ⇒ number

PeakFinder.style

PeakFinder.Style~backgroundColor(val) ⇒ String

PeakFinder.viewpoint

PeakFinder.Viewpoint~name() ⇒ String

PeakFinder.Viewpoint~coordsdecimal() ⇒ String

PeakFinder.Viewpoint~coordsdegree() ⇒ String

PeakFinder.Viewpoint~elevation() ⇒ number

PeakFinder.astro

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

PeakFinder.Astro~currentDateTimeNow()

PeakFinder.Astro~sunTimes() ⇒ Object

PeakFinder.Astro~sunTimes() ⇒ String

PeakFinder.Astro~moon() ⇒ Object

PeakFinder.Astro~moonTimes() ⇒ String

PeakFinder.telescope

PeakFinder.Telescope~show()

PeakFinder.Telescope~hide()

PeakFinder.Telescope~centerAzimut() ⇒ Number

PeakFinder.Telescope~centerAltitude() ⇒ Number

PeakFinder.Telescope~centerDistance() ⇒ Number

PeakFinder.Telescope~centerElevation() ⇒ Number

PeakFinder.utils

PeakFinder.PanoramaPanel~PeakFinder : `object`

PeakFinder.PanoramaPanel~viewpointJourneyFinished() ⇒ `boolean`

PeakFinder.PanoramaPanel~azimut(val, animationduration) ⇒ `number`

PeakFinder.PanoramaPanel~altitude(val, animationduration) ⇒ `number`

PeakFinder.PanoramaPanel~fieldofview(val, animationduration) ⇒ `number`

PeakFinder.PanoramaPanel~elevationOffset(val, animationduration) ⇒ `number`

PeakFinder.MapPanel~PeakFinder : `object`

PeakFinder.MapPanel~camera() ⇒ `Object`

PeakFinder.MapPanel~mapstyle(val) ⇒ `String`

PeakFinder.MapPanel~overlays() ⇒ `Array`

PeakFinder.MapPanel~queryFeatures(x, y) ⇒ `Array`

PeakFinder.Settings~theme() ⇒ `number`

PeakFinder.Settings~distanceUnit() ⇒ `number`

PeakFinder.Settings~coordsFormat() ⇒ `number`

PeakFinder.Settings~projection() ⇒ `number`

PeakFinder.Settings~showSun() ⇒ `number`

PeakFinder.Settings~showMoon() ⇒ `number`

PeakFinder.Settings~showGrid() ⇒ `number`

PeakFinder.Settings~visibilityRange() ⇒ `number`

PeakFinder.Settings~minimalElevation() ⇒ `number`

PeakFinder.Settings~showZoomButtons() ⇒ `number`

PeakFinder.Settings~showElevationOffsetControl() ⇒ `number`

PeakFinder.Settings~showSliders() ⇒ `number`

PeakFinder.MapSettings~theme() ⇒ `number`

PeakFinder.MapSettings~distanceUnit() ⇒ `number`

PeakFinder.MapSettings~showBackButton() ⇒ `number`

PeakFinder.MapSettings~showStartupMarker() ⇒ `number`

PeakFinder.Style~backgroundColor(val) ⇒ `String`

PeakFinder.Viewpoint~name() ⇒ `String`

PeakFinder.Viewpoint~coordsdecimal() ⇒ `String`

PeakFinder.Viewpoint~coordsdegree() ⇒ `String`

PeakFinder.Viewpoint~elevation() ⇒ `number`

PeakFinder.Astro~sunTimes() ⇒ `Object`

~~PeakFinder.Astro~sunTimes() ⇒ `String`~~

PeakFinder.Astro~moon() ⇒ `Object`

~~PeakFinder.Astro~moonTimes() ⇒ `String`~~

PeakFinder.Telescope~centerAzimut() ⇒ `Number`

PeakFinder.Telescope~centerAltitude() ⇒ `Number`

PeakFinder.Telescope~centerDistance() ⇒ `Number`

PeakFinder.Telescope~centerElevation() ⇒ `Number`

PeakFinder.utils.caniuse() ⇒ `Boolean`

PeakFinder.utils.isTouchDevice() ⇒ `Boolean`

PeakFinder.utils.hasMultiThreadingSupport() ⇒ `Boolean`