Tour Editor: How to use JavaScript code in Custom Pins

NOTE: It is forbidden to add JavaScript code into the HTML body of Custom pins.

All JavaScript code is allowed in pins. The only limitation is that the entire JavaScript code must be in the JavaScript field.

The HTML field only supports HTML code. Calling of js-functions by events is not supported in the HTML field (i.e: `onclick=some()`, `onload=some()`).

All events for an element must be called from the JavaScript field. You can find any element from the JavaScript field by ID. For example:

var el = document.getElementById('elementsId')
el.onclick = some()

HINT: Add IDs to all your HTML elements you plan to refer from your JavaScript code.

NOTE: Do not refer to HTML elements that do not belong to your pins and that weren't created by you - they may change in every release of Tour Editor or Viewer, so your code will become invalid after the next GeoCV release.

Example

Execution time of pin HTML and JavaScript code

Content of all pins is loaded once when the tour starts. Any mistakes in code may cause errors during tour loading and make tour invalid. To investigate possible issues, open in browser Developer tools > Console.

NOTE: JavaScript code is ignored if the tour is executed embedded in Tour Editor. Therefore to check the result click "Copy tour link" in Tour Editor, put the copied URL string in the new browser tab and execute the tour there.

Keep JavaScript block fully external

For your convenience, the JavaScript block can be kept fully external (in a separate file that is hosted locally on your web server). In such a case, simply add code to the JavaScript field that is referring to the external file.