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
Wrong style: |
Valid style: |
Pin content setup in Tour Editor:
|
Pin content setup in Tour Editor: Let’s rewrite the code by putting the JavaScript code in it's corresponding field. For Pins, JavaScript code should be separated from HTML code. Therefore, all behavior should be implemented via accessing elements of the pin content. (i.e: documenting objects and implementing event listeners.) |
Pin behavior in Viewer: As a result we have only the non-clickable link. The added JavaScript code is ignored in Pins. |
Pin behavior in Viewer:
|
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.
Comments
0 comments
Please sign in to leave a comment.