├── _config.yml ├── .DS_Store ├── osmtaginfo.json ├── examplepage.css ├── LICENSE ├── basicexample_iframe.html ├── basicexample_canvas_bgcolor.html ├── basicexample_canvas.html ├── basicexample_canvas_telescope.html ├── basicexample_canvas_elevationoffset.html ├── example.css ├── basicexample_links.html ├── basicexample_canvas_astro.html └── README.md /_config.yml: -------------------------------------------------------------------------------- 1 | theme: jekyll-theme-minimal -------------------------------------------------------------------------------- /.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Fabiz/PeakFinder-API/HEAD/.DS_Store -------------------------------------------------------------------------------- /osmtaginfo.json: -------------------------------------------------------------------------------- 1 | { 2 | "data_format": 1, 3 | "data_updated": "20231031T000000Z", 4 | "project": { 5 | "name": "PeakFinder", 6 | "description": "360° mountain panoramas and more", 7 | "project_url": "https://www.peakfinder.com", 8 | "icon_url": "https://www.peakfinder.com/favicon-32x32.png", 9 | "contact_name": "Fabio Soldati", 10 | "contact_email": "info@peakfinder.com" 11 | }, 12 | "tags": [ 13 | { "key": "natural", "value": "peak", "object_types": ["node"]}, 14 | { "key": "natural", "value": "volcano", "object_types": ["node"]}, 15 | { "key": "natural", "value": "hill", "object_types": ["node"]} 16 | ] 17 | } -------------------------------------------------------------------------------- /examplepage.css: -------------------------------------------------------------------------------- 1 | body, 2 | button, 3 | input, 4 | optgroup, 5 | select, 6 | textarea { 7 | font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; 8 | } 9 | 10 | html, 11 | body, 12 | .container, 13 | .content { 14 | background-color: rgb(248, 248, 248); 15 | } 16 | 17 | h1 { 18 | font-size: 150%; 19 | } 20 | 21 | h2 { 22 | font-size: 100%; 23 | } 24 | 25 | 26 | .content { 27 | } 28 | 29 | header { 30 | padding: 20px 20px; 31 | } 32 | 33 | footer { 34 | padding: 10px 20px; 35 | } 36 | 37 | 38 | header { 39 | font-size: 100%; 40 | height: 80px; 41 | display: flex; /* establish flex container */ 42 | flex-direction: column; /* make main axis vertical */ 43 | justify-content: center; /* center items vertically, in this case */ 44 | align-items: center; /* center items horizontally, in this case */ 45 | } 46 | 47 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | Copyright 2023 PeakFinder, www.peakfinder.com 2 | 3 | Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: 4 | 5 | The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 6 | 7 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. -------------------------------------------------------------------------------- /basicexample_iframe.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 |
5 | 6 | 10 | 11 | 12 | 13 | 14 | 15 | 16 |object
137 | Constructor: Initialization of the PeakFinder PanoramaPanel. Pass the options in a Javascript dictionary:
138 |
139 | **Properties**
140 |
141 | | Name | Type | Description |
142 | | --- | --- | --- |
143 | | canvasid | string | The id of the html canvas element. Default: 'canvas' |
144 | | locale | string | The language locale of the module. Default: 'en'. Supported locales: en,de,fr,it,es,pt,ja,ko,zh-Hans,zh-Hant |
145 | | 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). |
146 | | theme | string | 'dark' for dark-theme. otherwise 'light' theme will be shown |
147 | | disableinfosheets | boolean | Disables showing the poi infosheet or the viewpoint infosheet when the users click on a peak label or the viewpoint |
148 |
149 | **Example**
150 | ```js
151 | let panel = new PeakFinder.PanoramaPanel({
152 | canvasid: 'pfcanvas',
153 | locale: 'en'
154 | }) // attach to canvas
155 | ```
156 |
157 |
158 | ### PeakFinder~addEventListener(eventname, callback)
159 | Registers an event listenster that receives events from the PanoramaPanel.
160 | This method must be called after the init() resp. asycinit() methode.
161 | The following events are supported:
162 | - 'viewpointjourney finished' : all data for a new viewpoint has been loaded
163 | - 'viewpoint changed' : viewpoint has changed
164 | - 'sun changed': sun times have beeen changed.
165 | - 'moon changed': moon times have beeen changed.
166 | - 'poiinfo show': user has clicked to a peak name or uses the telescope.
167 |
168 |
169 | | Param | Type | Description |
170 | | --- | --- | --- |
171 | | eventname | string | The name of the event (see list above) |
172 | | callback | function | This function will be called when the requested event is dispached. 'args' will include event data. |
173 |
174 | **Example**
175 | ```js
176 | panel.addEventListener('viewpointjourney finished', async function(args) {
177 | console.log(`viewpoint ready ${JSON.stringify(args)}`)
178 | })
179 | ```
180 |
181 |
182 | ### PeakFinder~registerCommandsCallback(command)
183 | Registers a callback that receives commands/messages from the PanoramaPanel.
184 | The PanoramaPanel will send a message when a specific event occured. E.g. when a
185 | new viewpoint was loaded the command: \
186 | viewpoint changed lat=46.53722&lng=8.12610 \
187 | will be sent.
188 | Normally register to this callback can be skipped.
189 |
190 |
191 | | Param | Type | Description |
192 | | --- | --- | --- |
193 | | command | function | function must have the format functioname(command). |
194 |
195 | **Example**
196 | ```js
197 | panel.registerCommandsCallback(function(cmd) {
198 | console.log(cmd)
199 | })
200 | ```
201 |
202 |
203 | ### PeakFinder~init(callback)
204 | Loads all the needed stuff for displaying the panorama. Call this method only once.
205 | The async callback will inform when the panorama panel is ready. After this call additional
206 | commands like loadViewpoint may be called.
207 |
208 |
209 | | Param | Type | Description |
210 | | --- | --- | --- |
211 | | callback | function | This function will be called when everything is ready |
212 |
213 | **Example**
214 | ```js
215 | panel.init(function() {
216 | console.log('ready')
217 | // inside here you can use panel
218 | panel.loadViewpoint(46.53722, 8.12610, 'Finsteraarhorn')
219 |
220 | });
221 | ```
222 |
223 |
224 | ### PeakFinder~asyncinit()
225 | Loads all the needed stuff for displaying the panorama. Call this method only once.
226 | Same as the init function but with support for the Javascript async pattern. After this call additional
227 | commands like loadViewpoint may be called.
228 |
229 | **Example**
230 | ```js
231 | async panel.asyncinit()
232 |
233 | console.log('ready')
234 | panel.loadViewpoint(46.53722, 8.12610, 'Finsteraarhorn')
235 | ```
236 |
237 |
238 | ### PeakFinder~loadViewpoint(latitude, longitude, the)
239 | Loads a viewpoint with the given coordinates and an optional name
240 |
241 |
242 | | Param | Type | Description |
243 | | --- | --- | --- |
244 | | latitude | number | |
245 | | longitude | number | |
246 | | the | string | viewpoint name. Optional |
247 |
248 |
249 |
250 | ### PeakFinder~viewpointJourneyFinished() ⇒ boolean
251 | Checks if the viewpoint journey has been finished.
252 |
253 |
254 |
255 | ### PeakFinder~azimut(val, animationduration) ⇒ number
256 | Get/set azimut.
257 |
258 |
259 | | Param | Description |
260 | | --- | --- |
261 | | val | The azimut value in degrees |
262 | | animationduration | The duration of the animation. If undefined no animation will be done. |
263 |
264 | **Example**
265 | ```js
266 | await panel.azimut(120.0, 1.0) // set azimut with an animation time of 1 second
267 |
268 | const azimut = panel.azimut() // gets azimut
269 | ```
270 |
271 |
272 | ### PeakFinder~altitude(val, animationduration) ⇒ number
273 | Get/set altitude.
274 |
275 |
276 | | Param | Description |
277 | | --- | --- |
278 | | val | The altitude value in degrees |
279 | | animationduration | The duration of the animation. If undefined no animation will be done. |
280 |
281 |
282 |
283 | ### PeakFinder~fieldofview(val, animationduration) ⇒ number
284 | Get/set field of view (zoom).
285 |
286 |
287 | | Param | Description |
288 | | --- | --- |
289 | | val | The field of view (zoom) value in degrees |
290 | | animationduration | The duration of the animation. If undefined no animation will be done. |
291 |
292 |
293 |
294 | ### PeakFinder~elevationOffset(val, animationduration) ⇒ number
295 | Get/set elevation offset.
296 |
297 |
298 | | Param | Description |
299 | | --- | --- |
300 | | val | The elevation offset in meters |
301 | | animationduration | The duration of the animation. If undefined no animation will be done. |
302 |
303 | **Example**
304 | ```js
305 | await panel.elevationOffset(200.0, 1.0) // set elevation offset to 200m animation time of 1 second
306 |
307 | const elev = panel.elevationOffset() // gets elevation offset
308 | ```
309 |
310 | * * *
311 |
312 | ## PeakFinder.settings
313 |
314 | The following setters and getters manage the PeakFinder settings.
315 |
316 |
317 |
318 | ### PeakFinder.Settings~theme() ⇒ number
319 | Get/set theme. \
320 | 0: light, 1: dark
321 |
322 | **Example**
323 | ```js
324 | panel.settings.theme(1) // set to dark
325 |
326 | const unit = panel.settings.theme() // gets dark
327 | ```
328 |
329 |
330 | ### PeakFinder.Settings~distanceUnit() ⇒ number
331 | Get/set distance unit. \
332 | 0: metric, 1: imperial
333 |
334 | **Example**
335 | ```js
336 | panel.settings.distanceUnit(1) // set to imperial
337 |
338 | const unit = panel.settings.distanceUnit() // gets imperial
339 | ```
340 |
341 |
342 | ### PeakFinder.Settings~coordsFormat() ⇒ number
343 | Get/set the coordinates format. \
344 | 0: degree (46°30'21"N 8°20'14"E), 1: decimal (46.2412°N 8.1342°E)
345 |
346 |
347 |
348 | ### PeakFinder.Settings~projection() ⇒ number
349 | Get/set the projection. \
350 | 0: perspective, 1: cylindrical
351 |
352 |
353 |
354 | ### PeakFinder.Settings~showSun() ⇒ number
355 | Get/set display of the sun ecliptic. \
356 | 0: hide, 1: show
357 |
358 |
359 |
360 | ### PeakFinder.Settings~showMoon() ⇒ number
361 | Get/set display of the moon ecliptic. \
362 | 0: hide, 1: show
363 |
364 |
365 |
366 | ### PeakFinder.Settings~showGrid() ⇒ number
367 | Get/set display of the coordinate grid. \
368 | 0: hide, 1: show
369 |
370 |
371 |
372 | ### PeakFinder.Settings~visibilityRange() ⇒ number
373 | Get/set the visiblitiy range in meters. \
374 | valid range: 0..320000 (320km, 200mil)
375 |
376 |
377 |
378 | ### PeakFinder.Settings~minimalElevation() ⇒ number
379 | Get/set the minimal elevation for the displayed peak names. \
380 | valid range: 0..10000 (10000m, 32000feet)
381 |
382 |
383 | * * *
384 |
385 | ## PeakFinder.viewpoint
386 |
387 | These methods return information about the current viewpoint.
388 |
389 |
390 |
391 | ### PeakFinder.Viewpoint~name() ⇒ String
392 | Gets the viewpoint name.
393 |
394 | **Returns**: String - the viewpoint name
395 |
396 |
397 | ### PeakFinder.Viewpoint~coordsdecimal() ⇒ String
398 | Gets the viewpoint coordinates in decimal format.
399 |
400 | **Returns**: String - the coordinates in decimal format (e.g. 46.53722°N, 8.12610°E)
401 |
402 |
403 | ### PeakFinder.Viewpoint~coordsdegree() ⇒ String
404 | Gets the viewpoint coordinates in degree format.
405 |
406 | **Returns**: String - the coordinates in degreee format (e.g. 46°32'13''N, 8°07'33''E)
407 |
408 |
409 | ### PeakFinder.Viewpoint~elevation() ⇒ number
410 | Gets the viewpoint elevation in meters.
411 |
412 | **Returns**: number - the elevation in meters
413 |
414 | * * *
415 |
416 | ## PeakFinder.astro
417 |
418 | These methods can be used to set the current date/time and to return sunrise/sunset, moonrise/moonset times.
419 |
420 |
421 |
422 | ### PeakFinder.Astro~currentDateTime(year, month, day, hour, minute)
423 | Sets the date/time for the caluclation of sun and moon times
424 |
425 |
426 | | Param | Type | Description |
427 | | --- | --- | --- |
428 | | year | number | |
429 | | month | number | (1..12) |
430 | | day | number | (1..31) |
431 | | hour | number | |
432 | | minute | number | |
433 |
434 | **Example**
435 | ```js
436 | panel.astro.currentDateTime(2022, 7, 12, 14, 30)
437 | ```
438 |
439 |
440 | ### PeakFinder.Astro~currentDateTimeNow()
441 | Sets the date/time to now
442 |
443 |
444 |
445 | ### PeakFinder.Astro~sunTimes() ⇒ Object
446 | Gets the time of sunrise, sunset.
447 |
448 | **Returns**: Object - the sun times (e.g. {"sun":{"rise":"2025-04-07T06:50:59Z","set":"2025-04-07T20:11:59Z"}} )
449 |
450 |
451 | ### ~~PeakFinder.Astro~sunTimes() ⇒ String~~
452 | ***Use method sun instead***
453 |
454 | Gets the time of sunrise, sunset.
455 |
456 | **Returns**: String - the times (e.g. '↑05:54, ↓21:17')
457 |
458 |
459 | ### PeakFinder.Astro~moon() ⇒ Object
460 | Gets the time of moonrise, moonset.
461 |
462 | **Returns**: Object - the sun times (e.g. {"moon":{"illum":"74.7%"},"sun":{"rise":"2025-04-07T14:11:59Z","set":"2025-04-08T05:32:59Z"}}
463 |
464 |
465 | ### ~~PeakFinder.Astro~moonTimes() ⇒ String~~
466 | ***Use method moon instead***
467 |
468 | Gets the time of moonrise, moonset.
469 |
470 | **Returns**: String - the times (e.g. '↑07:13, ↓22:33, 3.4%')
471 |
472 | * * *
473 |
474 | ## PeakFinder.telescope
475 |
476 | These methods can be used to show/hide telescope and get azimut, altitude, distance and elevation.
477 |
478 |
479 |
480 | ### PeakFinder.Telescope~show()
481 | Shows the telescope
482 |
483 | **Example**
484 | ```js
485 | panel.telescope.show()
486 | ```
487 |
488 |
489 | ### PeakFinder.Telescope~hide()
490 | Hide the telescope
491 |
492 |
493 |
494 | ### PeakFinder.Telescope~centerAzimut() ⇒ Number
495 | Get the azimut of the telecope center
496 |
497 | **Returns**: Number - azimut
498 |
499 |
500 | ### PeakFinder.Telescope~centerAltitude() ⇒ Number
501 | Get the altitude of the telecope center
502 |
503 | **Returns**: Number - altitude
504 |
505 |
506 | ### PeakFinder.Telescope~centerDistance() ⇒ Number
507 | Get the distance of the telecope center
508 |
509 | **Returns**: Number - distance
510 |
511 |
512 | ### PeakFinder.Telescope~centerElevation() ⇒ Number
513 | Get the elevation of the telecope center
514 |
515 | **Returns**: Number - elevation
516 |
517 | * * *
518 |
519 | ## PeakFinder.utils
520 |
521 | The following static util functions may be used for the initialization of the module.
522 |
523 |
524 |
525 | ### PeakFinder.utils.caniuse() ⇒ Boolean
526 | Checks if the browser supports the required technoligies to display the PeakFinder PanoramaPanel.
527 |
528 | **Returns**: Boolean - True if showing PeakFinder module is supported
529 |
530 |
531 | ### PeakFinder.utils.isTouchDevice() ⇒ Boolean
532 | Checks if device has a touch screen.
533 |
534 | **Returns**: Boolean - True if its a touch device
535 |
536 |
537 | ### PeakFinder.utils.hasMultiThreadingSupport() ⇒ Boolean
538 | Checks if browser supports multithreading.
539 |
540 | **Returns**: Boolean - True if multithreading is available
541 |
542 |
543 | ### PeakFinder.utils.sleep(timeout)
544 | Non-blocking sleep function. Use this function to wait for a result of an async call.
545 |
546 |
547 | | Param | Type | Description |
548 | | --- | --- | --- |
549 | | timeout | number | in seconds |
550 |
551 | **Example**
552 | ```js
553 | panel.astro.currentDateTime(2022, 7, 12, 14, 30)
554 |
555 | // it takes a moment until the suntimes are evaluated. so sleep for a second.
556 | await PeakFinder.utils.sleep(1.0)
557 | console.log(panel.astro.sunTimes())
558 | ```
559 |
560 | * * *
561 |
562 |
563 | @ [https://www.peakfinder.com](www.peakfinder.com)
--------------------------------------------------------------------------------