docs(user): mention custom tiles & hiding labels for geomap

This commit is contained in:
Elian Doran 2026-02-15 17:47:28 +02:00
parent 3db2c910e0
commit 9b2876a8ff
No known key found for this signature in database
12 changed files with 974 additions and 959 deletions

View File

@ -5,116 +5,109 @@
<p>Active content problem of safety, especially when this active content
comes from a third-party such as if it is downloaded from a website and
then imported into Trilium.</p>
<p>When <a href="#root/pOsGYCXsbNQG/gh7bpGYxajRS/_help_mHbBMPDPkVV5">importing</a> .zip
archives into Trilium, <em>safe mode</em> is active by default which will
try to prevent untrusted code from executing. For example, a <a href="#root/pOsGYCXsbNQG/CdNpE2pqjmI6/yIhgI5H7A2Sm/_help_MgibgPcfeuGz">custom widget</a> needs
the <code spellcheck="false">#widget</code> <a href="#root/pOsGYCXsbNQG/tC7s2alapj8V/zEY4DaJG4YT5/_help_HI6GBBIduIgv">label</a> in
order to function; safe import works by renaming that label to <code spellcheck="false">#disabled:widget</code>.</p>
<p>When <a href="#root/_help_mHbBMPDPkVV5">importing</a> .zip archives into Trilium, <em>safe mode</em> is
active by default which will try to prevent untrusted code from executing.
For example, a <a href="#root/_help_MgibgPcfeuGz">custom widget</a> needs the
<code
spellcheck="false">#widget</code> <a href="#root/_help_HI6GBBIduIgv">label</a> in order to function;
safe import works by renaming that label to <code spellcheck="false">#disabled:widget</code>.</p>
<h2>Safe mode</h2>
<p>Sometimes active content can cause issues with the UI or the server, preventing
it from functioning properly.&nbsp;<a class="reference-link" href="#root/pOsGYCXsbNQG/tC7s2alapj8V/_help_64ZTlUPgEPtW">Safe mode</a>&nbsp;allows
it from functioning properly.&nbsp;<a class="reference-link" href="#root/_help_64ZTlUPgEPtW">Safe mode</a>&nbsp;allows
starting Trilium in such a way that active content is not loaded by default
at start-up, allowing the user to fix the problematic scripts or widgets.</p>
<h2>Types of active content</h2>
<p>These are the types of active content in Trilium, along with a few examples
of what untrusted content of that type could cause:</p>
<figure class="table"
style="width:100%;">
<table class="ck-table-resized">
<colgroup>
<col style="width:15.79%;">
<col style="width:10.35%;">
<col style="width:40.71%;">
<col style="width:33.15%;">
</colgroup>
<thead>
<tr>
<th>Name</th>
<th>Disabled on a safe <a href="#root/pOsGYCXsbNQG/gh7bpGYxajRS/_help_mHbBMPDPkVV5">import</a>
</th>
<th>Description</th>
<th>Potential risks of untrusted code</th>
</tr>
</thead>
<tbody>
<tr>
<th><a href="#root/pOsGYCXsbNQG/CdNpE2pqjmI6/_help_yIhgI5H7A2Sm">Front-end scripts</a>
</th>
<td>Yes</td>
<td>Allow running arbitrary code on the client (UI) of Trilium, which can
alter the user interface.</td>
<td>A malicious script can execute server-side code, access un-encrypted notes
or change their contents.</td>
</tr>
<tr>
<th><a class="reference-link" href="#root/pOsGYCXsbNQG/CdNpE2pqjmI6/yIhgI5H7A2Sm/_help_MgibgPcfeuGz">Custom Widgets</a>
</th>
<td>Yes</td>
<td>Can add new UI features to Trilium, for example by adding a new section
in the&nbsp;<a class="reference-link" href="#root/pOsGYCXsbNQG/gh7bpGYxajRS/Vc8PjrjAGuOp/_help_RnaPdbciOfeq">Right Sidebar</a>.</td>
<td>The UI can be altered in such a way that it can be used to extract sensitive
information or it can simply cause the application to crash.</td>
</tr>
<tr>
<th><a class="reference-link" href="#root/pOsGYCXsbNQG/CdNpE2pqjmI6/_help_SPirpZypehBG">Backend scripts</a>
</th>
<td>Yes</td>
<td>Can run custom code on the server of Trilium (Node.js environment), with
full access to the notes and the database.</td>
<td>Has access to all the unencrypted notes, but with full access to the database
it can completely destroy the data. It also has access to execute other
applications or alter the files and folders on the server).</td>
</tr>
<tr>
<th><a class="reference-link" href="#root/pOsGYCXsbNQG/KSZ04uQ2D1St/_help_1vHRoWCEjj0L">Web View</a>
</th>
<td>Yes</td>
<td>Displays a website inside a note.</td>
<td>Can point to a phishing website which can collect the data (for example
on a log in page).</td>
</tr>
<tr>
<th><a class="reference-link" href="#root/pOsGYCXsbNQG/KSZ04uQ2D1St/_help_HcABDtFCkbFN">Render Note</a>
</th>
<td>Yes</td>
<td>Renders custom content inside a note, such as a dashboard or a new editor
that is not officially supported by Trilium.</td>
<td>Can affect the UI similar to front-end scripts or custom widgets since
the scripts are not completely encapsulated, or they can act similar to
a web view where they can collect data entered by the user.</td>
</tr>
<tr>
<th><a class="reference-link" href="#root/pOsGYCXsbNQG/pKK96zzmvBGf/_help_AlhDUqhENtH7">Custom app-wide CSS</a>
</th>
<td>No</td>
<td>Can alter the layout and style of the UI using CSS, applied regardless
of theme.</td>
<td>Generally less problematic than the rest of active content, but a badly
written CSS can affect the layout of the application, requiring the use
of&nbsp;<a class="reference-link" href="#root/pOsGYCXsbNQG/tC7s2alapj8V/_help_64ZTlUPgEPtW">Safe mode</a>&nbsp;to
be able to use the application.</td>
</tr>
<tr>
<th><a href="#root/pOsGYCXsbNQG/_help_pKK96zzmvBGf">Custom themes</a>
</th>
<td>No</td>
<td>Can change the style of the entire UI.</td>
<td>Similar to custom app-wide CSS.</td>
</tr>
<tr>
<th><a class="reference-link" href="#root/pOsGYCXsbNQG/gh7bpGYxajRS/Wy267RK4M69c/_help_gOKqSJgXLcIj">Icon Packs</a>
</th>
<td>No</td>
<td>Introduces new icons that can be used for notes.</td>
<td>Generally are more contained and less prone to cause issues, but they
can cause performance issues (for example if the icon pack has millions
of icons in it).</td>
</tr>
</tbody>
</table>
</figure>
<table>
<thead>
<tr>
<th>Name</th>
<th>Disabled on a safe <a href="#root/_help_mHbBMPDPkVV5">import</a>
</th>
<th>Description</th>
<th>Potential risks of untrusted code</th>
</tr>
</thead>
<tbody>
<tr>
<td><a href="#root/_help_yIhgI5H7A2Sm">Front-end scripts</a>
</td>
<td>Yes</td>
<td>Allow running arbitrary code on the client (UI) of Trilium, which can
alter the user interface.</td>
<td>A malicious script can execute server-side code, access un-encrypted notes
or change their contents.</td>
</tr>
<tr>
<td><a class="reference-link" href="#root/_help_MgibgPcfeuGz">Custom Widgets</a>
</td>
<td>Yes</td>
<td>Can add new UI features to Trilium, for example by adding a new section
in the&nbsp;<a class="reference-link" href="#root/_help_RnaPdbciOfeq">Right Sidebar</a>.</td>
<td>The UI can be altered in such a way that it can be used to extract sensitive
information or it can simply cause the application to crash.</td>
</tr>
<tr>
<td><a class="reference-link" href="#root/_help_SPirpZypehBG">Backend scripts</a>
</td>
<td>Yes</td>
<td>Can run custom code on the server of Trilium (Node.js environment), with
full access to the notes and the database.</td>
<td>Has access to all the unencrypted notes, but with full access to the database
it can completely destroy the data. It also has access to execute other
applications or alter the files and folders on the server).</td>
</tr>
<tr>
<td><a class="reference-link" href="#root/_help_1vHRoWCEjj0L">Web View</a>
</td>
<td>Yes</td>
<td>Displays a website inside a note.</td>
<td>Can point to a phishing website which can collect the data (for example
on a log in page).</td>
</tr>
<tr>
<td><a class="reference-link" href="#root/_help_HcABDtFCkbFN">Render Note</a>
</td>
<td>Yes</td>
<td>Renders custom content inside a note, such as a dashboard or a new editor
that is not officially supported by Trilium.</td>
<td>Can affect the UI similar to front-end scripts or custom widgets since
the scripts are not completely encapsulated, or they can act similar to
a web view where they can collect data entered by the user.</td>
</tr>
<tr>
<td><a class="reference-link" href="#root/_help_AlhDUqhENtH7">Custom app-wide CSS</a>
</td>
<td>No</td>
<td>Can alter the layout and style of the UI using CSS, applied regardless
of theme.</td>
<td>Generally less problematic than the rest of active content, but a badly
written CSS can affect the layout of the application, requiring the use
of&nbsp;<a class="reference-link" href="#root/_help_64ZTlUPgEPtW">Safe mode</a>&nbsp;to
be able to use the application.</td>
</tr>
<tr>
<td><a href="#root/_help_pKK96zzmvBGf">Custom themes</a>
</td>
<td>No</td>
<td>Can change the style of the entire UI.</td>
<td>Similar to custom app-wide CSS.</td>
</tr>
<tr>
<td><a class="reference-link" href="#root/_help_gOKqSJgXLcIj">Icon Packs</a>
</td>
<td>No</td>
<td>Introduces new icons that can be used for notes.</td>
<td>Generally are more contained and less prone to cause issues, but they
can cause performance issues (for example if the icon pack has millions
of icons in it).</td>
</tr>
</tbody>
</table>
<h2>Active content badge</h2>
<p>Starting with v0.102.0, on the&nbsp;<a class="reference-link" href="#root/pOsGYCXsbNQG/gh7bpGYxajRS/Vc8PjrjAGuOp/_help_IjZS7iK5EXtb">New Layout</a>&nbsp;a
<p>Starting with v0.102.0, on the&nbsp;<a class="reference-link" href="#root/_help_IjZS7iK5EXtb">New Layout</a>&nbsp;a
badge will be displayed near the note title, indicating that an active
content is detected. Clicking the badge will reveal a menu with various
options related to that content type, for example to open the documentation
@ -122,5 +115,4 @@ style="width:100%;">
<p>For some active content types, such as backend scripts with custom triggering
conditions a toggle button will appear. This makes it possible to easily
disable scripts or widgets, but also to re-enable them if an import was
made with safe mode active.</p>
<p>&nbsp;</p>
made with safe mode active.</p>

View File

@ -1,9 +1,8 @@
<aside class="admonition important">
<p><a class="reference-link" href="#root/_help_zEY4DaJG4YT5">Attributes</a><a class="reference-link"
href="#root/_help_OFXdgB2nNk1F">Promoted Attributes</a><a class="reference-link"
href="#root/_help_zEY4DaJG4YT5">Attributes</a>Starting with Trilium v0.97.0,
the geo map has been converted from a standalone <a href="#root/_help_KSZ04uQ2D1St">note type</a> to
a type of view for the&nbsp;<a class="reference-link" href="#root/_help_0ESUbbAxVnoK">Note List</a>.&nbsp;</p>
<p>Starting with Trilium v0.97.0, the geo map has been converted from a standalone
<a
href="#root/_help_KSZ04uQ2D1St">note type</a>to a type of view for the&nbsp;<a class="reference-link"
href="#root/_help_0ESUbbAxVnoK">Note List</a>.&nbsp;</p>
</aside>
<figure class="image image-style-align-center">
<img style="aspect-ratio:892/675;" src="9_Geo Map_image.png"
@ -13,38 +12,39 @@
on an attribute. It is also possible to add new notes at a specific location
using the built-in interface.</p>
<h2>Creating a new geo map</h2>
<table>
<thead>
<tr>
<th></th>
<th></th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>
<figure class="image">
<img style="aspect-ratio:483/413;" src="15_Geo Map_image.png"
width="483" height="413">
</figure>
</td>
<td>Right click on any note on the note tree and select <em>Insert child note</em><em>Geo Map (beta)</em>.</td>
</tr>
<tr>
<td>2</td>
<td>
<figure class="image image-style-align-center image_resized" style="width:53.44%;">
<img style="aspect-ratio:1720/1396;" src="8_Geo Map_image.png"
width="1720" height="1396">
</figure>
</td>
<td>By default the map will be empty and will show the entire world.</td>
</tr>
</tbody>
</table>
<figure class="table">
<table>
<thead>
<tr>
<th>&nbsp;</th>
<th>&nbsp;</th>
<th>&nbsp;</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>
<figure class="image">
<img style="aspect-ratio:483/413;" src="15_Geo Map_image.png"
width="483" height="413">
</figure>
</td>
<td>Right click on any note on the note tree and select <em>Insert child note</em><em>Geo Map (beta)</em>.</td>
</tr>
<tr>
<td>2</td>
<td>
<figure class="image image-style-align-center image_resized" style="width:53.44%;">
<img style="aspect-ratio:1720/1396;" src="8_Geo Map_image.png"
width="1720" height="1396">
</figure>
</td>
<td>By default the map will be empty and will show the entire world.</td>
</tr>
</tbody>
</table>
</figure>
<h2>Repositioning the map</h2>
<ul>
<li>Click and drag the map in order to move across the map.</li>
@ -55,59 +55,60 @@
restored when visiting again the note.</p>
<h2>Adding a marker using the map</h2>
<h3>Adding a new note using the plus button</h3>
<table>
<thead>
<tr>
<th></th>
<th></th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>To create a marker, first navigate to the desired point on the map. Then
press the
<img src="10_Geo Map_image.png">button in the&nbsp;<a href="#root/_help_XpOYSgsLkTJy">Floating buttons</a>&nbsp;(top-right)
area.&nbsp;&nbsp;&nbsp;&nbsp;
<br>
<br>If the button is not visible, make sure the button section is visible
by pressing the chevron button (
<img src="17_Geo Map_image.png">) in the top-right of the map.</td>
<td></td>
</tr>
<tr>
<td>2</td>
<td>
<img class="image_resized" style="aspect-ratio:1730/416;width:100%;" src="2_Geo Map_image.png"
width="1730" height="416">
</td>
<td>Once pressed, the map will enter in the insert mode, as illustrated by
the notification.&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<br>
<br>Simply click the point on the map where to place the marker, or the Escape
key to cancel.</td>
</tr>
<tr>
<td>3</td>
<td>
<img class="image_resized" style="aspect-ratio:1586/404;width:100%;" src="7_Geo Map_image.png"
width="1586" height="404">
</td>
<td>Enter the name of the marker/note to be created.</td>
</tr>
<tr>
<td>4</td>
<td>
<img class="image_resized" style="aspect-ratio:1696/608;width:100%;" src="16_Geo Map_image.png"
width="1696" height="608">
</td>
<td>Once confirmed, the marker will show up on the map and it will also be
displayed as a child note of the map.</td>
</tr>
</tbody>
</table>
<figure class="table">
<table>
<thead>
<tr>
<th>&nbsp;</th>
<th>&nbsp;</th>
<th>&nbsp;</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>To create a marker, first navigate to the desired point on the map. Then
press the
<img src="10_Geo Map_image.png">button in the&nbsp;<a href="#root/_help_XpOYSgsLkTJy">Floating buttons</a>&nbsp;(top-right)
area.&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<br>
<br>If the button is not visible, make sure the button section is visible
by pressing the chevron button (
<img src="17_Geo Map_image.png">) in the top-right of the map.</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>2</td>
<td>
<img class="image_resized" style="aspect-ratio:1730/416;width:100%;" src="2_Geo Map_image.png"
width="1730" height="416">
</td>
<td>Once pressed, the map will enter in the insert mode, as illustrated by
the notification.&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<br>
<br>Simply click the point on the map where to place the marker, or the Escape
key to cancel.</td>
</tr>
<tr>
<td>3</td>
<td>
<img class="image_resized" style="aspect-ratio:1586/404;width:100%;" src="7_Geo Map_image.png"
width="1586" height="404">
</td>
<td>Enter the name of the marker/note to be created.</td>
</tr>
<tr>
<td>4</td>
<td>
<img class="image_resized" style="aspect-ratio:1696/608;width:100%;" src="16_Geo Map_image.png"
width="1696" height="608">
</td>
<td>Once confirmed, the marker will show up on the map and it will also be
displayed as a child note of the map.</td>
</tr>
</tbody>
</table>
</figure>
<h3>Adding a new note using the contextual menu</h3>
<ol>
<li>Right click anywhere on the map, where to place the newly created marker
@ -120,15 +121,18 @@
<h3>Adding an existing note on note from the note tree</h3>
<ol>
<li>Select the desired note in the&nbsp;<a class="reference-link" href="#root/_help_oPVyFC7WL2Lp">Note Tree</a>.</li>
<li>Hold the mouse on the note and drag it to the map to the desired location.</li>
<li>The map should be updated with the new marker.</li>
<li
>Hold the mouse on the note and drag it to the map to the desired location.</li>
<li
>The map should be updated with the new marker.</li>
</ol>
<p>This works for:</p>
<ul>
<li>Notes that are not part of the geo map, case in which a <a href="#root/_help_IakOLONlIfGI">clone</a> will
be created.</li>
<li>Notes that are a child of the geo map but not yet positioned on the map.</li>
<li>Notes that are a child of the geo map and also positioned, case in which
<li
>Notes that are a child of the geo map and also positioned, case in which
the marker will be relocated to the new position.</li>
</ul>
<aside class="admonition note">
@ -138,8 +142,10 @@
<h2>How the location of the markers is stored</h2>
<p>The location of a marker is stored in the <code spellcheck="false">#geolocation</code> attribute
of the child notes:</p>
<img src="18_Geo Map_image.png"
width="1288" height="278">
<p>
<img src="18_Geo Map_image.png" width="1288"
height="278">
</p>
<p>This value can be added manually if needed. The value of the attribute
is made up of the latitude and longitude separated by a comma.</p>
<h2>Repositioning markers</h2>
@ -160,7 +166,8 @@ width="1288" height="278">
</li>
<li>Middle-clicking the marker will open the note in a new tab.</li>
<li>Right-clicking the marker will open a contextual menu (as described below).</li>
<li>If the map is in read-only mode, clicking on a marker will open a&nbsp;
<li
>If the map is in read-only mode, clicking on a marker will open a&nbsp;
<a
class="reference-link" href="#root/_help_ZjLYv08Rp3qC">Quick edit</a>&nbsp;popup for the corresponding note.</li>
</ul>
@ -206,211 +213,239 @@ width="1288" height="278">
<p>The value of the attribute is made up of the latitude and longitude separated
by a comma.</p>
<h3>Adding from Google Maps</h3>
<table>
<thead>
<tr>
<th></th>
<th></th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>
<figure class="image image-style-align-center image_resized" style="width:56.84%;">
<img style="aspect-ratio:732/918;" src="12_Geo Map_image.png"
width="732" height="918">
</figure>
</td>
<td>Go to Google Maps on the web and look for a desired location, right click
on it and a context menu will show up.&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<br>
<br>Simply click on the first item displaying the coordinates and they will
be copied to clipboard.&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<br>
<br>Then paste the value inside the text box into the <code spellcheck="false">#geolocation</code> attribute
of a child note of the map (don't forget to surround the value with a
<code
spellcheck="false">"</code>character).</td>
</tr>
<tr>
<td>2</td>
<td>
<figure class="image image-style-align-center image_resized" style="width:100%;">
<img style="aspect-ratio:518/84;" src="4_Geo Map_image.png"
width="518" height="84">
</figure>
</td>
<td>In Trilium, create a child note under the map.</td>
</tr>
<tr>
<td>3</td>
<td>
<figure class="image image-style-align-center image_resized" style="width:100%;">
<img style="aspect-ratio:1074/276;" src="11_Geo Map_image.png"
width="1074" height="276">
</figure>
</td>
<td>And then go to Owned Attributes and type <code spellcheck="false">#geolocation="</code>,
then paste from the clipboard as-is and then add the ending <code spellcheck="false">"</code> character.
Press Enter to confirm and the map should now be updated to contain the
new note.</td>
</tr>
</tbody>
</table>
<figure class="table">
<table>
<thead>
<tr>
<th>&nbsp;</th>
<th>&nbsp;</th>
<th>&nbsp;</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>
<figure class="image image-style-align-center image_resized" style="width:56.84%;">
<img style="aspect-ratio:732/918;" src="12_Geo Map_image.png"
width="732" height="918">
</figure>
</td>
<td>Go to Google Maps on the web and look for a desired location, right click
on it and a context menu will show up.&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<br>
<br>Simply click on the first item displaying the coordinates and they will
be copied to clipboard.&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<br>
<br>Then paste the value inside the text box into the <code spellcheck="false">#geolocation</code> attribute
of a child note of the map (don't forget to surround the value with a
<code
spellcheck="false">"</code>character).</td>
</tr>
<tr>
<td>2</td>
<td>
<figure class="image image-style-align-center image_resized" style="width:100%;">
<img style="aspect-ratio:518/84;" src="4_Geo Map_image.png"
width="518" height="84">
</figure>
</td>
<td>In Trilium, create a child note under the map.</td>
</tr>
<tr>
<td>3</td>
<td>
<figure class="image image-style-align-center image_resized" style="width:100%;">
<img style="aspect-ratio:1074/276;" src="11_Geo Map_image.png"
width="1074" height="276">
</figure>
</td>
<td>And then go to Owned Attributes and type <code spellcheck="false">#geolocation="</code>,
then paste from the clipboard as-is and then add the ending <code spellcheck="false">"</code> character.
Press Enter to confirm and the map should now be updated to contain the
new note.</td>
</tr>
</tbody>
</table>
</figure>
<h3>Adding from OpenStreetMap</h3>
<p>Similarly to the Google Maps approach:</p>
<table>
<thead>
<tr>
<th></th>
<th></th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>
<img class="image_resized" style="aspect-ratio:562/454;width:100%;" src="1_Geo Map_image.png"
width="562" height="454">
</td>
<td>Go to any location on openstreetmap.org and right click to bring up the
context menu. Select the “Show address” item.</td>
</tr>
<tr>
<td>2</td>
<td>
<img class="image_resized" style="aspect-ratio:696/480;width:100%;" src="Geo Map_image.png"
width="696" height="480">
</td>
<td>The address will be visible in the top-left of the screen, in the place
of the search bar.&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<br>
<br>Select the coordinates and copy them into the clipboard.</td>
</tr>
<tr>
<td>3</td>
<td>
<img class="image_resized" style="aspect-ratio:640/276;width:100%;" src="5_Geo Map_image.png"
width="640" height="276">
</td>
<td>Simply paste the value inside the text box into the <code spellcheck="false">#geolocation</code> attribute
of a child note of the map and then it should be displayed on the map.</td>
</tr>
</tbody>
</table>
<figure class="table">
<table>
<thead>
<tr>
<th>&nbsp;</th>
<th>&nbsp;</th>
<th>&nbsp;</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>
<img class="image_resized" style="aspect-ratio:562/454;width:100%;" src="1_Geo Map_image.png"
width="562" height="454">
</td>
<td>Go to any location on openstreetmap.org and right click to bring up the
context menu. Select the “Show address” item.</td>
</tr>
<tr>
<td>2</td>
<td>
<img class="image_resized" style="aspect-ratio:696/480;width:100%;" src="Geo Map_image.png"
width="696" height="480">
</td>
<td>The address will be visible in the top-left of the screen, in the place
of the search bar.&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<br>
<br>Select the coordinates and copy them into the clipboard.</td>
</tr>
<tr>
<td>3</td>
<td>
<img class="image_resized" style="aspect-ratio:640/276;width:100%;" src="5_Geo Map_image.png"
width="640" height="276">
</td>
<td>Simply paste the value inside the text box into the <code spellcheck="false">#geolocation</code> attribute
of a child note of the map and then it should be displayed on the map.</td>
</tr>
</tbody>
</table>
</figure>
<h2>Adding GPS tracks (.gpx)</h2>
<p>Trilium has basic support for displaying GPS tracks on the geo map.</p>
<table>
<thead>
<tr>
<th></th>
<th></th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>
<figure class="image image-style-align-center">
<img style="aspect-ratio:226/74;" src="3_Geo Map_image.png"
width="226" height="74">
</figure>
</td>
<td>To add a track, simply drag &amp; drop a .gpx file inside the geo map
in the note tree.</td>
</tr>
<tr>
<td>2</td>
<td>
<figure class="image image-style-align-center">
<img style="aspect-ratio:322/222;" src="14_Geo Map_image.png"
width="322" height="222">
</figure>
</td>
<td>In order for the file to be recognized as a GPS track, it needs to show
up as <code spellcheck="false">application/gpx+xml</code> in the <em>File type</em> field.</td>
</tr>
<tr>
<td>3</td>
<td>
<figure class="image image-style-align-center">
<img style="aspect-ratio:620/530;" src="6_Geo Map_image.png"
width="620" height="530">
</figure>
</td>
<td>When going back to the map, the track should now be visible.&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<br>
<br>The start and end points of the track are indicated by the two blue markers.</td>
</tr>
</tbody>
</table>
<aside class="admonition note">
<p>The starting point of the track will be displayed as a marker, with the
name of the note underneath. The start marker will also respect the icon
and the <code spellcheck="false">color</code> of the note. The end marker
is displayed with a distinct icon.</p>
<p>If the GPX contains waypoints, they will also be displayed. If they have
a name, it is displayed when hovering over it with the mouse.</p>
</aside>
<h2>Read-only mode</h2>
<p>When a map is in read-only all editing features will be disabled such
as:</p>
<ul>
<li>The add button in the&nbsp;<a class="reference-link" href="#root/_help_XpOYSgsLkTJy">Floating buttons</a>.</li>
<li>Dragging markers.</li>
<li>Editing from the contextual menu (removing locations or adding new items).</li>
</ul>
<p>To enable read-only mode simply press the <em>Lock</em> icon from the&nbsp;
<a
class="reference-link" href="#root/_help_XpOYSgsLkTJy">Floating buttons</a>. To disable it, press the button again.</p>
<h2>Configuration</h2>
<h3>Map Style</h3>
<p>The styling of the map can be adjusted in the <em>Collection Properties</em> tab
in the&nbsp;<a class="reference-link" href="#root/_help_BlN9DFI679QC">Ribbon</a>&nbsp;or
manually via the <code spellcheck="false">#map:style</code> attribute.</p>
<p>The geo map comes with two different types of styles:</p>
<ul>
<li>Raster styles
<ul>
<li>For these styles the map is represented as a grid of images at different
zoom levels. This is the traditional way OpenStreetMap used to work.</li>
<li>Zoom is slightly restricted.</li>
<li>Currently, the only raster theme is the original OpenStreetMap style.</li>
<figure
class="table">
<table>
<thead>
<tr>
<th>&nbsp;</th>
<th>&nbsp;</th>
<th>&nbsp;</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>
<figure class="image image-style-align-center">
<img style="aspect-ratio:226/74;" src="3_Geo Map_image.png"
width="226" height="74">
</figure>
</td>
<td>To add a track, simply drag &amp; drop a .gpx file inside the geo map
in the note tree.</td>
</tr>
<tr>
<td>2</td>
<td>
<figure class="image image-style-align-center">
<img style="aspect-ratio:322/222;" src="14_Geo Map_image.png"
width="322" height="222">
</figure>
</td>
<td>In order for the file to be recognized as a GPS track, it needs to show
up as <code spellcheck="false">application/gpx+xml</code> in the <em>File type</em> field.</td>
</tr>
<tr>
<td>3</td>
<td>
<figure class="image image-style-align-center">
<img style="aspect-ratio:620/530;" src="6_Geo Map_image.png"
width="620" height="530">
</figure>
</td>
<td>When going back to the map, the track should now be visible.&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<br>
<br>The start and end points of the track are indicated by the two blue markers.</td>
</tr>
</tbody>
</table>
</figure>
<aside class="admonition note">
<p>The starting point of the track will be displayed as a marker, with the
name of the note underneath. The start marker will also respect the icon
and the <code spellcheck="false">color</code> of the note. The end marker
is displayed with a distinct icon.</p>
<p>If the GPX contains waypoints, they will also be displayed. If they have
a name, it is displayed when hovering over it with the mouse.</p>
</aside>
<h2>Read-only mode</h2>
<p>When a map is in read-only all editing features will be disabled such
as:</p>
<ul>
<li>The add button in the&nbsp;<a class="reference-link" href="#root/_help_XpOYSgsLkTJy">Floating buttons</a>.</li>
<li
>Dragging markers.</li>
<li>Editing from the contextual menu (removing locations or adding new items).</li>
</ul>
<p>To enable read-only mode simply press the <em>Lock</em> icon from the&nbsp;
<a
class="reference-link" href="#root/_help_XpOYSgsLkTJy">Floating buttons</a>. To disable it, press the button again.</p>
<h2>Configuration</h2>
<h3>Map Style</h3>
<p>The styling of the map can be adjusted in the <em>Collection Properties</em> (above
the map, by pressing on the Gear icon)&nbsp;or manually via the <code spellcheck="false">#map:style</code> attribute.</p>
<p>The geo map comes with two different types of styles:</p>
<ul>
<li>Raster styles
<ul>
<li>For these styles the map is represented as a grid of images at different
zoom levels. This is the traditional way OpenStreetMap used to work.</li>
<li
>Zoom is slightly restricted.</li>
<li>Currently, the only raster theme is the original OpenStreetMap style.</li>
</ul>
</li>
<li>Vector styles
<ul>
<li>Vector styles are not represented as images, but as geometrical shapes.
This makes the rendering much smoother, especially when zooming and looking
at the building edges, for example.</li>
<li>The map can be zoomed in much further.</li>
<li>These come both in a light and a dark version.</li>
<li>The vector styles come from <a href="https://versatiles.org/">VersaTiles</a>,
a free and open-source project providing map tiles based on OpenStreetMap.</li>
</ul>
</li>
</ul>
<aside class="admonition note">
<p>Currently it is not possible to use a custom map style.</p>
</aside>
<h3>Scale</h3>
<p>Activating this option via the&nbsp;<a class="reference-link" href="#root/_help_BlN9DFI679QC">Ribbon</a>&nbsp;or
manually via <code spellcheck="false">#map:scale</code> will display an indicator
in the bottom-left of the scale of the map.</p>
<h2>Troubleshooting</h2>
<figure class="image image-style-align-right image_resized" style="width:34.06%;">
<img style="aspect-ratio:678/499;" src="13_Geo Map_image.png"
width="678" height="499">
</figure>
<h3>Grid-like artifacts on the map</h3>
<p>This occurs if the application is not at 100% zoom which causes the pixels
of the map to not render correctly due to fractional scaling. The only
possible solution is to set the UI zoom at 100% (default keyboard shortcut
is <kbd>Ctrl</kbd>+<kbd>0</kbd>).</p>
</li>
<li>Vector styles
<ul>
<li>Vector styles are not represented as images, but as geometrical shapes.
This makes the rendering much smoother, especially when zooming and looking
at the building edges, for example.</li>
<li>The map can be zoomed in much further.</li>
<li>These come both in a light and a dark version.</li>
<li>The vector styles come from <a href="https://versatiles.org/">VersaTiles</a>,
a free and open-source project providing map tiles based on OpenStreetMap.</li>
</ul>
</li>
</ul>
<h3>Custom map style / tiles</h3>
<p>Starting with v0.102.0 it is possible to use custom tile sets, but only
in raster format.</p>
<p>To do so, manually set the <code spellcheck="false">#map:style</code>
<a
href="#root/pOsGYCXsbNQG/tC7s2alapj8V/zEY4DaJG4YT5/_help_HI6GBBIduIgv">label</a>to the URL of the tile set. For example, to use Esri.NatGeoWorldMap,
set the value to <a href="https://server.arcgisonline.com/ArcGIS/rest/services/NatGeo_World_Map/MapServer/tile/{z}/{y}/{x}."><code spellcheck="false">https://server.arcgisonline.com/ArcGIS/rest/services/NatGeo_World_Map/MapServer/tile/{z}/{y}/{x}</code>.</a>
</p>
<aside class="admonition note">
<p>For a list of tile sets, see the <a href="https://leaflet-extras.github.io/leaflet-providers/preview/">Leaflet Providers preview</a> page.
Select a desired tile set and just copy the URL from the <em>Plain JavaScript</em> example.</p>
</aside>
<p>Custom vector map support is planned, but not yet implemented.</p>
<h3>Other options</h3>
<p>The following options can be configured either via the Collection properties
pane above the map, by clicking on the settings (Gear icon). Alternatively,
each of these options also have a corresponding <a href="#root/pOsGYCXsbNQG/tC7s2alapj8V/zEY4DaJG4YT5/_help_HI6GBBIduIgv">label</a> that
can be set manually.</p>
<ul>
<li>
<p>Scale, which illustrates the scale of the map in kilometers and miles
in the bottom-left of the map.</p>
</li>
<li>
<p>The name of the markers is displayed by default underneath the pin on
the map. Since v0.102.0, it is possible to hide these labels which increases
the performance and decreases clutter when there are many markers on the
map.</p>
</li>
</ul>
<h2>Troubleshooting</h2>
<figure class="image image-style-align-right image_resized" style="width:34.06%;">
<img style="aspect-ratio:678/499;" src="13_Geo Map_image.png"
width="678" height="499">
</figure>
<h3>Grid-like artifacts on the map</h3>
<p>This occurs if the application is not at 100% zoom which causes the pixels
of the map to not render correctly due to fractional scaling. The only
possible solution is to set the UI zoom at 100% (default keyboard shortcut
is <kbd>Ctrl</kbd>+<kbd>0</kbd>).</p>

View File

@ -2,7 +2,7 @@
<img style="aspect-ratio:601/216;" src="Render Note_image.png"
width="601" height="216">
</figure>
<p>Render Note is a special case of <a href="#root/pOsGYCXsbNQG/CdNpE2pqjmI6/_help_yIhgI5H7A2Sm">front-end scripting</a> which
<p>Render Note is a special case of <a href="#root/_help_yIhgI5H7A2Sm">front-end scripting</a> which
allows rendering custom content inside a note. This makes it possible to
create custom dashboards, or to use a custom note editor.</p>
<p>The content can either be a vanilla HTML, or Preact JSX.</p>
@ -13,13 +13,11 @@
<ol>
<li>HTML language for the legacy/vanilla method, with what needs to be displayed
(for example <code spellcheck="false">&lt;p&gt;Hello world.&lt;/p&gt;</code>).</li>
<li
>JSX for the Preact-based approach (see below).</li>
</ol>
<li>JSX for the Preact-based approach (see below).</li>
</ol>
</li>
<li>Create a&nbsp;<a class="reference-link" href="#root/_help_HcABDtFCkbFN">Render Note</a>.</li>
<li
>Assign the <code spellcheck="false">renderNote</code> <a href="#root/_help_zEY4DaJG4YT5">relation</a> to
<li>Assign the <code spellcheck="false">renderNote</code> <a href="#root/_help_zEY4DaJG4YT5">relation</a> to
point at the previously created code note.</li>
</ol>
<h2>Legacy scripting using jQuery</h2>
@ -48,9 +46,10 @@ $dateEl.text(new Date());</code></pre>
need to provide a HTML anymore.</p>
<p>Here are the steps to creating a simple render note:</p>
<ol>
<li>Create a note of type&nbsp;<a class="reference-link" href="#root/_help_HcABDtFCkbFN">Render Note</a>.</li>
<li
>
<li>
<p>Create a note of type&nbsp;<a class="reference-link" href="#root/_help_HcABDtFCkbFN">Render Note</a>.</p>
</li>
<li>
<p>Create a child&nbsp;<a class="reference-link" href="#root/_help_6f9hih2hXXZk">Code</a>&nbsp;note
with JSX as the language.
<br>As an example, use the following content:</p><pre><code class="language-text-x-trilium-auto">export default function() {
@ -60,17 +59,20 @@ $dateEl.text(new Date());</code></pre>
&lt;/&gt;
);
}</code></pre>
</li>
<li>In the parent render note, define a <code spellcheck="false">~renderNote</code> relation
pointing to the newly created child.</li>
<li>Refresh the render note and it should display a “Hello world” message.</li>
</li>
<li>
<p>In the parent render note, define a <code spellcheck="false">~renderNote</code> relation
pointing to the newly created child.</p>
</li>
<li>
<p>Refresh the render note and it should display a “Hello world” message.</p>
</li>
</ol>
<h2>Refreshing the note</h2>
<p>It's possible to refresh the note via:</p>
<ul>
<li>The corresponding button in&nbsp;<a class="reference-link" href="#root/_help_XpOYSgsLkTJy">Floating buttons</a>.</li>
<li
>The “Render active note” <a href="#root/_help_A9Oc6YKKc65v">keyboard shortcut</a> (not
<li>The “Render active note” <a href="#root/_help_A9Oc6YKKc65v">keyboard shortcut</a> (not
assigned by default).</li>
</ul>
<h2>Examples</h2>

View File

@ -1,11 +1,11 @@
<p>Unlike <a href="#root/pOsGYCXsbNQG/CdNpE2pqjmI6/_help_yIhgI5H7A2Sm">front-end scripts</a> which
run on the client / browser-side, back-end scripts run directly on the
Node.js environment of the Trilium server.</p>
<p>Unlike <a href="#root/_help_yIhgI5H7A2Sm">front-end scripts</a> which run on the
client / browser-side, back-end scripts run directly on the Node.js environment
of the Trilium server.</p>
<p>Back-end scripts can be used both on a&nbsp;<a class="reference-link"
href="#root/pOsGYCXsbNQG/Otzi9La2YAUX/_help_WOcw2SLH6tbX">Server Installation</a>&nbsp;(where
it will run on the device the server is running on), or on the&nbsp;
<a
class="reference-link" href="#root/pOsGYCXsbNQG/Otzi9La2YAUX/_help_poXkQfguuA0U">Desktop Installation</a>&nbsp;(where it will run on the PC).</p>
href="#root/_help_WOcw2SLH6tbX">Server Installation</a>&nbsp;(where it will run
on the device the server is running on), or on the&nbsp;<a class="reference-link"
href="#root/_help_poXkQfguuA0U">Desktop Installation</a>&nbsp;(where it will
run on the PC).</p>
<h2>Advantages of backend scripts</h2>
<p>The benefit of backend scripts is that they can be pretty powerful, for
example to have access to the underlying system, for example it can read
@ -14,7 +14,7 @@
access to the notes since the information about them is already loaded
in memory. Whereas on the client, notes have to be manually loaded first.</p>
<h2>Creating a backend script</h2>
<p>Create a new&nbsp;<a class="reference-link" href="#root/pOsGYCXsbNQG/KSZ04uQ2D1St/_help_6f9hih2hXXZk">Code</a>&nbsp;note
<p>Create a new&nbsp;<a class="reference-link" href="#root/_help_6f9hih2hXXZk">Code</a>&nbsp;note
and select the language <em>JS backend</em>.</p>
<h2>Running backend scripts</h2>
<p>Backend scripts can be either run manually (via the Execute button on
@ -22,8 +22,8 @@
<p>In addition, scripts can be run automatically when the server starts up,
on a fixed time interval or when a certain event occurs (such as an attribute
being modified). For more information, see the dedicated&nbsp;<a class="reference-link"
href="#root/pOsGYCXsbNQG/CdNpE2pqjmI6/SPirpZypehBG/_help_GPERMystNGTB">Events</a>&nbsp;page.</p>
href="#root/_help_GPERMystNGTB">Events</a>&nbsp;page.</p>
<h2>Script API</h2>
<p>Trilium exposes a set of APIs that can be directly consumed by scripts,
under the <code spellcheck="false">api</code> object. For a reference of
this API, see&nbsp;<a class="reference-link" href="#root/pOsGYCXsbNQG/CdNpE2pqjmI6/GLks18SNjxmC/_help_MEtfsqa5VwNi">Backend API</a>.</p>
this API, see&nbsp;<a class="reference-link" href="#root/_help_MEtfsqa5VwNi">Backend API</a>.</p>

View File

@ -5,139 +5,137 @@
<p>Global events are attached to the script note via label. Simply create
e.g. "run" label with some of these values and script note will be executed
once the event occurs.</p>
<figure class="table">
<table>
<thead>
<tr>
<th>Label</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td><code spellcheck="false">run</code>
</td>
<td>
<p>Defines on which events script should run. Possible values are:</p>
<ul>
<li><code spellcheck="false">backendStartup</code> - when Trilium backend starts
up</li>
<li><code spellcheck="false">hourly</code> - run once an hour. You can use
additional label <code spellcheck="false">runAtHour</code> to specify at
which hour, on the back-end.</li>
<li><code spellcheck="false">daily</code> - run once a day, on the back-end</li>
</ul>
</td>
</tr>
<tr>
<td><code spellcheck="false">runOnInstance</code>
</td>
<td>Specifies that the script should only run on a particular&nbsp;<a class="reference-link"
href="#root/_help_c5xB8m4g2IY6">Trilium instance</a>.</td>
</tr>
<tr>
<td><code spellcheck="false">runAtHour</code>
</td>
<td>On which hour should this run. Should be used together with <code spellcheck="false">#run=hourly</code>.
Can be defined multiple times for more runs during the day.</td>
</tr>
</tbody>
</table>
</figure>
<table>
<thead>
<tr>
<th>Label</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td><code spellcheck="false">run</code>
</td>
<td>
<p>Defines on which events script should run. Possible values are:</p>
<ul>
<li><code spellcheck="false">backendStartup</code> - when Trilium backend starts
up</li>
<li><code spellcheck="false">hourly</code> - run once an hour. You can use
additional label <code spellcheck="false">runAtHour</code> to specify at
which hour, on the back-end.</li>
<li><code spellcheck="false">daily</code> - run once a day, on the back-end</li>
</ul>
</td>
</tr>
<tr>
<td><code spellcheck="false">runOnInstance</code>
</td>
<td>Specifies that the script should only run on a particular&nbsp;<a class="reference-link"
href="#root/_help_c5xB8m4g2IY6">Trilium instance</a>.</td>
</tr>
<tr>
<td><code spellcheck="false">runAtHour</code>
</td>
<td>On which hour should this run. Should be used together with <code spellcheck="false">#run=hourly</code>.
Can be defined multiple times for more runs during the day.</td>
</tr>
</tbody>
</table>
<h2>Entity events</h2>
<p>Other events are bound to some entity, these are defined as <a href="#root/_help_zEY4DaJG4YT5">relations</a> -
meaning that script is triggered only if note has this script attached
to it through relations (or it can inherit it).</p>
<figure class="table">
<table>
<thead>
<tr>
<th>Relation</th>
<th>Trigger condition</th>
<th>Origin entity (see below)</th>
</tr>
</thead>
<tbody>
<tr>
<td><code spellcheck="false">runOnNoteCreation</code>
</td>
<td>executes when note is created on backend. Use this relation if you want
to run the script for all notes created under a specific subtree. In that
case, create it on the subtree root note and make it inheritable. A new
note created within the subtree (any depth) will trigger the script.</td>
<td>The <code spellcheck="false">BNote</code> that got created.</td>
</tr>
<tr>
<td><code spellcheck="false">runOnChildNoteCreation</code>
</td>
<td>executes when new note is created under the note where this relation is
defined</td>
<td>The <code spellcheck="false">BNote</code> of the child that got created.</td>
</tr>
<tr>
<td><code spellcheck="false">runOnNoteTitleChange</code>
</td>
<td>executes when note title is changed (includes note creation as well)</td>
<td>The <code spellcheck="false">BNote</code> of the note whose title got changed.</td>
</tr>
<tr>
<td><code spellcheck="false">runOnNoteContentChange</code>
</td>
<td>executes when note content is changed (includes note creation as well).</td>
<td>The <code spellcheck="false">BNote</code> of the note whose content got
changed.</td>
</tr>
<tr>
<td><code spellcheck="false">runOnNoteChange</code>
</td>
<td>executes when note is changed (includes note creation as well). Does not
include content changes</td>
<td>The <code spellcheck="false">BNote</code> of the note that got changed.</td>
</tr>
<tr>
<td><code spellcheck="false">runOnNoteDeletion</code>
</td>
<td>executes when note is being deleted</td>
<td>The <code spellcheck="false">BNote</code> of the note that got (soft) deleted.</td>
</tr>
<tr>
<td><code spellcheck="false">runOnBranchCreation</code>
</td>
<td>executes when a branch is created. Branch is a link between parent note
and child note and is created e.g. when cloning or moving note.</td>
<td>The <code spellcheck="false">BBranch</code> that got created.</td>
</tr>
<tr>
<td><code spellcheck="false">runOnBranchChange</code>
</td>
<td>executes when a branch is updated. (since v0.62)</td>
<td>The <code spellcheck="false">BBranch</code> that got changed.</td>
</tr>
<tr>
<td><code spellcheck="false">runOnBranchDeletion</code>
</td>
<td>executes when a branch is deleted. Branch is a link between parent note
and child note and is deleted e.g. when moving note (old branch/link is
deleted).</td>
<td>The <code spellcheck="false">BBranch</code> that got (soft) deleted.</td>
</tr>
<tr>
<td><code spellcheck="false">runOnAttributeCreation</code>
</td>
<td>executes when new attribute is created for the note which defines this
relation</td>
<td>The <code spellcheck="false">BAttribute</code> that got created.</td>
</tr>
<tr>
<td><code spellcheck="false">runOnAttributeChange</code>
</td>
<td>executes when the attribute is changed of a note which defines this relation.
This is triggered also when the attribute is deleted</td>
<td>The <code spellcheck="false">BAttribute</code> that got changed.</td>
</tr>
</tbody>
</table>
</figure>
<table>
<thead>
<tr>
<th>Relation</th>
<th>Trigger condition</th>
<th>Origin entity (see below)</th>
</tr>
</thead>
<tbody>
<tr>
<td><code spellcheck="false">runOnNoteCreation</code>
</td>
<td>executes when note is created on backend. Use this relation if you want
to run the script for all notes created under a specific subtree. In that
case, create it on the subtree root note and make it inheritable. A new
note created within the subtree (any depth) will trigger the script.</td>
<td>The <code spellcheck="false">BNote</code> that got created.</td>
</tr>
<tr>
<td><code spellcheck="false">runOnChildNoteCreation</code>
</td>
<td>executes when new note is created under the note where this relation is
defined</td>
<td>The <code spellcheck="false">BNote</code> of the child that got created.</td>
</tr>
<tr>
<td><code spellcheck="false">runOnNoteTitleChange</code>
</td>
<td>executes when note title is changed (includes note creation as well)</td>
<td>The <code spellcheck="false">BNote</code> of the note whose title got changed.</td>
</tr>
<tr>
<td><code spellcheck="false">runOnNoteContentChange</code>
</td>
<td>executes when note content is changed (includes note creation as well).</td>
<td>The <code spellcheck="false">BNote</code> of the note whose content got
changed.</td>
</tr>
<tr>
<td><code spellcheck="false">runOnNoteChange</code>
</td>
<td>executes when note is changed (includes note creation as well). Does not
include content changes</td>
<td>The <code spellcheck="false">BNote</code> of the note that got changed.</td>
</tr>
<tr>
<td><code spellcheck="false">runOnNoteDeletion</code>
</td>
<td>executes when note is being deleted</td>
<td>The <code spellcheck="false">BNote</code> of the note that got (soft) deleted.</td>
</tr>
<tr>
<td><code spellcheck="false">runOnBranchCreation</code>
</td>
<td>executes when a branch is created. Branch is a link between parent note
and child note and is created e.g. when cloning or moving note.</td>
<td>The <code spellcheck="false">BBranch</code> that got created.</td>
</tr>
<tr>
<td><code spellcheck="false">runOnBranchChange</code>
</td>
<td>executes when a branch is updated. (since v0.62)</td>
<td>The <code spellcheck="false">BBranch</code> that got changed.</td>
</tr>
<tr>
<td><code spellcheck="false">runOnBranchDeletion</code>
</td>
<td>executes when a branch is deleted. Branch is a link between parent note
and child note and is deleted e.g. when moving note (old branch/link is
deleted).</td>
<td>The <code spellcheck="false">BBranch</code> that got (soft) deleted.</td>
</tr>
<tr>
<td><code spellcheck="false">runOnAttributeCreation</code>
</td>
<td>executes when new attribute is created for the note which defines this
relation</td>
<td>The <code spellcheck="false">BAttribute</code> that got created.</td>
</tr>
<tr>
<td><code spellcheck="false">runOnAttributeChange</code>
</td>
<td>executes when the attribute is changed of a note which defines this relation.
This is triggered also when the attribute is deleted</td>
<td>The <code spellcheck="false">BAttribute</code> that got changed.</td>
</tr>
</tbody>
</table>
<h2>Origin entity</h2>
<p>When a script is run by an event such as the ones described above,
<code

View File

@ -1,48 +1,47 @@
<p>Front-end scripts are custom JavaScript notes that are run on the client
(browser environment)</p>
<p>There are four flavors of front-end scripts:</p>
<figure class="table"
style="width:100%;">
<table class="ck-table-resized">
<colgroup>
<col style="width:21.82%;">
<col style="width:78.18%;">
</colgroup>
<tbody>
<tr>
<th>Regular scripts</th>
<td>These are run with the current app and note context. These can be run
either manually or automatically on start-up.</td>
</tr>
<tr>
<th><a class="reference-link" href="#root/pOsGYCXsbNQG/CdNpE2pqjmI6/yIhgI5H7A2Sm/_help_MgibgPcfeuGz">Custom Widgets</a>
</th>
<td>These can introduce new UI elements in various positions, such as near
the&nbsp;<a class="reference-link" href="#root/pOsGYCXsbNQG/gh7bpGYxajRS/Vc8PjrjAGuOp/_help_oPVyFC7WL2Lp">Note Tree</a>,
content area or even the&nbsp;<a class="reference-link" href="#root/pOsGYCXsbNQG/gh7bpGYxajRS/Vc8PjrjAGuOp/_help_RnaPdbciOfeq">Right Sidebar</a>.</td>
</tr>
<tr>
<th><a class="reference-link" href="#root/pOsGYCXsbNQG/CdNpE2pqjmI6/yIhgI5H7A2Sm/_help_4Gn3psZKsfSm">Launch Bar Widgets</a>
</th>
<td>Similar to&nbsp;<a class="reference-link" href="#root/pOsGYCXsbNQG/CdNpE2pqjmI6/yIhgI5H7A2Sm/_help_MgibgPcfeuGz">Custom Widgets</a>,
but dedicated to the&nbsp;<a class="reference-link" href="#root/pOsGYCXsbNQG/gh7bpGYxajRS/Vc8PjrjAGuOp/_help_xYmIYSP6wE3F">Launch Bar</a>.
These can simply introduce new buttons or graphical elements to the bar.</td>
</tr>
<tr>
<th><a class="reference-link" href="#root/pOsGYCXsbNQG/KSZ04uQ2D1St/_help_HcABDtFCkbFN">Render Note</a>
</th>
<td>This allows rendering custom content inside a note, using either HTML
or Preact JSX.</td>
</tr>
</tbody>
</table>
</figure>
<table>
<thead>
<tr>
<th></th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td>Regular scripts</td>
<td>These are run with the current app and note context. These can be run
either manually or automatically on start-up.</td>
</tr>
<tr>
<td><a class="reference-link" href="#root/_help_MgibgPcfeuGz">Custom Widgets</a>
</td>
<td>These can introduce new UI elements in various positions, such as near
the&nbsp;<a class="reference-link" href="#root/_help_oPVyFC7WL2Lp">Note Tree</a>,
content area or even the&nbsp;<a class="reference-link" href="#root/_help_RnaPdbciOfeq">Right Sidebar</a>.</td>
</tr>
<tr>
<td><a class="reference-link" href="#root/_help_4Gn3psZKsfSm">Launch Bar Widgets</a>
</td>
<td>Similar to&nbsp;<a class="reference-link" href="#root/_help_MgibgPcfeuGz">Custom Widgets</a>,
but dedicated to the&nbsp;<a class="reference-link" href="#root/_help_xYmIYSP6wE3F">Launch Bar</a>.
These can simply introduce new buttons or graphical elements to the bar.</td>
</tr>
<tr>
<td><a class="reference-link" href="#root/_help_HcABDtFCkbFN">Render Note</a>
</td>
<td>This allows rendering custom content inside a note, using either HTML
or Preact JSX.</td>
</tr>
</tbody>
</table>
<p>For more advanced behaviors that do not require a user interface (e.g.
batch modifying notes), see&nbsp;<a class="reference-link" href="#root/pOsGYCXsbNQG/CdNpE2pqjmI6/_help_SPirpZypehBG">Backend scripts</a>.</p>
batch modifying notes), see&nbsp;<a class="reference-link" href="#root/_help_SPirpZypehBG">Backend scripts</a>.</p>
<h2>Scripts</h2>
<p>Scripts don't have any special requirements. They can be run manually
using the <em>Execute</em> button on the code note or they can be run automatically;
to do so, set the <code spellcheck="false">run</code> <a href="#root/pOsGYCXsbNQG/tC7s2alapj8V/zEY4DaJG4YT5/_help_HI6GBBIduIgv">label</a> to
to do so, set the <code spellcheck="false">run</code> <a href="#root/_help_HI6GBBIduIgv">label</a> to
either:</p>
<ul>
<li><code spellcheck="false">frontendStartup</code> - when Trilium frontend
@ -55,23 +54,23 @@ style="width:100%;">
they can run automatically on a hourly or daily basis, but also on events
such as when a note is created or an attribute is modified. See the server-side&nbsp;
<a
class="reference-link" href="#root/pOsGYCXsbNQG/CdNpE2pqjmI6/SPirpZypehBG/_help_GPERMystNGTB">Events</a>&nbsp;for more information.</p>
class="reference-link" href="#root/_help_GPERMystNGTB">Events</a>&nbsp;for more information.</p>
</aside>
<h2>Widgets</h2>
<p>Widgets require a certain format in order for Trilium to be able to integrate
them into the UI.</p>
<ul>
<li>For legacy widgets, the script note must export a <code spellcheck="false">BasicWidget</code> or
a derived one (see&nbsp;<a class="reference-link" href="#root/pOsGYCXsbNQG/CdNpE2pqjmI6/yIhgI5H7A2Sm/MgibgPcfeuGz/_help_GhurYZjh8e1V">Note context aware widget</a>&nbsp;or&nbsp;
a derived one (see&nbsp;<a class="reference-link" href="#root/_help_GhurYZjh8e1V">Note context aware widget</a>&nbsp;or&nbsp;
<a
class="reference-link" href="#root/pOsGYCXsbNQG/CdNpE2pqjmI6/yIhgI5H7A2Sm/MgibgPcfeuGz/_help_M8IppdwVHSjG">Right pane widget</a>).</li>
class="reference-link" href="#root/_help_M8IppdwVHSjG">Right pane widget</a>).</li>
<li>For Preact widgets, a built-in helper called <code spellcheck="false">defineWidget</code> needs
to be used.</li>
</ul>
<p>For more information, see&nbsp;<a class="reference-link" href="#root/pOsGYCXsbNQG/CdNpE2pqjmI6/yIhgI5H7A2Sm/_help_MgibgPcfeuGz">Custom Widgets</a>.</p>
<p>For more information, see&nbsp;<a class="reference-link" href="#root/_help_MgibgPcfeuGz">Custom Widgets</a>.</p>
<h2>Script API</h2>
<p>The front-end API of Trilium is available to all scripts running in the
front-end context as global variable <code spellcheck="false">api</code>.
For a reference of the API, see&nbsp;<a class="reference-link" href="#root/pOsGYCXsbNQG/CdNpE2pqjmI6/GLks18SNjxmC/_help_Q2z6av6JZVWm">Frontend API</a>.</p>
For a reference of the API, see&nbsp;<a class="reference-link" href="#root/_help_Q2z6av6JZVWm">Frontend API</a>.</p>
<h3>Tutorial</h3>
<p>For more information on building widgets, take a look at <a href="#root/_help_SynTBQiBsdYJ">Widget Basics</a>.</p>

View File

@ -20,15 +20,14 @@
<h2>Creating a custom widget</h2>
<ol>
<li>Create a&nbsp;<a class="reference-link" href="#root/_help_6f9hih2hXXZk">Code</a>&nbsp;note.</li>
<li
>Set the language to:
<li>Set the language to:
<ol>
<li>JavaScript (frontend) for legacy widgets using jQuery.</li>
<li>JSX for Preact widgets. You might need to go to Options → Code to enable
the language first.</li>
</ol>
</li>
<li>Apply the <code spellcheck="false">#widget</code> <a href="#root/_help_HI6GBBIduIgv">label</a>.</li>
</li>
<li>Apply the <code spellcheck="false">#widget</code> <a href="#root/_help_HI6GBBIduIgv">label</a>.</li>
</ol>
<h2>Getting started with a simple example</h2>
<p>Let's start by creating a widget that shows a message near the content
@ -62,81 +61,79 @@ export default defineWidget({
should appear underneath the content area.</p>
<h2>Widget location (parent widget)</h2>
<p>A widget can be placed in one of the following sections of the applications:</p>
<figure
class="table">
<table class="ck-table-resized">
<colgroup>
<col style="width:15.59%;">
<col style="width:30.42%;">
<col style="width:16.68%;">
<col style="width:37.31%;">
</colgroup>
<thead>
<tr>
<th>Value for <code spellcheck="false">parentWidget</code>
</th>
<th>Description</th>
<th>Sample widget</th>
<th>Special requirements</th>
</tr>
</thead>
<tbody>
<tr>
<th><code spellcheck="false">left-pane</code>
</th>
<td>Appears within the same pane that holds the&nbsp;<a class="reference-link"
href="#root/_help_oPVyFC7WL2Lp">Note Tree</a>.</td>
<td>Same as above, with only a different <code spellcheck="false">parentWidget</code>.</td>
<td>None.</td>
</tr>
<tr>
<th><code spellcheck="false">center-pane</code>
</th>
<td>In the content area. If a split is open, the widget will span all of the
splits.</td>
<td>See example above.</td>
<td>None.</td>
</tr>
<tr>
<th><code spellcheck="false">note-detail-pane</code>
</th>
<td>
<p>In the content area, inside the note detail area. If a split is open,
the widget will be contained inside the split.</p>
<p>This is ideal if the widget is note-specific.</p>
</td>
<td><a class="reference-link" href="#root/_help_GhurYZjh8e1V">Note context aware widget</a>
</td>
<td>
<ul>
<li>The widget must export a <code spellcheck="false">class</code> and not an
instance of the class (e.g. <code spellcheck="false">no new</code>) because
it needs to be multiplied for each note, so that splits work correctly.</li>
<li
>Since the <code spellcheck="false">class</code> is exported instead of an
instance, the <code spellcheck="false">parentWidget</code> getter must be
<code
spellcheck="false">static</code>, otherwise the widget is ignored.</li>
</ul>
</td>
</tr>
<tr>
<th><code spellcheck="false">right-pane</code>
</th>
<td>In the&nbsp;<a class="reference-link" href="#root/_help_RnaPdbciOfeq">Right Sidebar</a>,
as a dedicated section.</td>
<td><a class="reference-link" href="#root/_help_M8IppdwVHSjG">Right pane widget</a>
</td>
<td>
<ul>
<li>Although not mandatory, it's best to use a <code spellcheck="false">RightPanelWidget</code> instead
of a <code spellcheck="false">BasicWidget</code> or a <code spellcheck="false">NoteContextAwareWidget</code>.</li>
</ul>
</td>
</tr>
</tbody>
<table
class="ck-table-resized">
<colgroup>
<col style="width:15.59%;">
<col style="width:30.42%;">
<col style="width:16.68%;">
<col style="width:37.31%;">
</colgroup>
<thead>
<tr>
<th>Value for <code spellcheck="false">parentWidget</code>
</th>
<th>Description</th>
<th>Sample widget</th>
<th>Special requirements</th>
</tr>
</thead>
<tbody>
<tr>
<th><code spellcheck="false">left-pane</code>
</th>
<td>Appears within the same pane that holds the&nbsp;<a class="reference-link"
href="#root/_help_oPVyFC7WL2Lp">Note Tree</a>.</td>
<td>Same as above, with only a different <code spellcheck="false">parentWidget</code>.</td>
<td>None.</td>
</tr>
<tr>
<th><code spellcheck="false">center-pane</code>
</th>
<td>In the content area. If a split is open, the widget will span all of the
splits.</td>
<td>See example above.</td>
<td>None.</td>
</tr>
<tr>
<th><code spellcheck="false">note-detail-pane</code>
</th>
<td>
<p>In the content area, inside the note detail area. If a split is open,
the widget will be contained inside the split.</p>
<p>This is ideal if the widget is note-specific.</p>
</td>
<td><a class="reference-link" href="#root/_help_GhurYZjh8e1V">Note context aware widget</a>
</td>
<td>
<ul>
<li>The widget must export a <code spellcheck="false">class</code> and not an
instance of the class (e.g. <code spellcheck="false">no new</code>) because
it needs to be multiplied for each note, so that splits work correctly.</li>
<li
>Since the <code spellcheck="false">class</code> is exported instead of an
instance, the <code spellcheck="false">parentWidget</code> getter must be
<code
spellcheck="false">static</code>, otherwise the widget is ignored.</li>
</ul>
</td>
</tr>
<tr>
<th><code spellcheck="false">right-pane</code>
</th>
<td>In the&nbsp;<a class="reference-link" href="#root/_help_RnaPdbciOfeq">Right Sidebar</a>,
as a dedicated section.</td>
<td><a class="reference-link" href="#root/_help_M8IppdwVHSjG">Right pane widget</a>
</td>
<td>
<ul>
<li>Although not mandatory, it's best to use a <code spellcheck="false">RightPanelWidget</code> instead
of a <code spellcheck="false">BasicWidget</code> or a <code spellcheck="false">NoteContextAwareWidget</code>.</li>
</ul>
</td>
</tr>
</tbody>
</table>
</figure>
<p>To position the widget somewhere else, just change the value passed to
<code
spellcheck="false">get parentWidget()</code>for legacy widgets or the <code spellcheck="false">parent</code> field

View File

@ -20,16 +20,11 @@
</li>
<li>Don't set <code spellcheck="false">#widget</code>, as that attribute is
reserved for&nbsp;<a class="reference-link" href="#root/_help_MgibgPcfeuGz">Custom Widgets</a>.</li>
<li
>In the&nbsp;<a class="reference-link" href="#root/_help_x3i7MxGccDuM">Global menu</a>,
<li>In the&nbsp;<a class="reference-link" href="#root/_help_x3i7MxGccDuM">Global menu</a>,
select <em>Configure launchbar</em>.</li>
<li>In the <em>Visible Launchers</em> section, select <em>Add a custom widget</em>.</li>
<li
>Give the newly created launcher a name (and optionally a name).</li>
<li
>In the&nbsp;<a class="reference-link" href="#root/_help_OFXdgB2nNk1F">Promoted Attributes</a>&nbsp;section,
modify the <em>widget</em> field to point to the newly created note.</li>
<li
><a href="#root/pOsGYCXsbNQG/BgmBlOIl72jZ/_help_s8alTXmpFR61">Refresh</a> the
UI.</li>
<li>In the <em>Visible Launchers</em> section, select <em>Add a custom widget</em>.</li>
<li>Give the newly created launcher a name (and optionally a name).</li>
<li>In the&nbsp;<a class="reference-link" href="#root/_help_OFXdgB2nNk1F">Promoted Attributes</a>&nbsp;section,
modify the <em>widget</em> field to point to the newly created note.</li>
<li><a href="#root/_help_s8alTXmpFR61">Refresh</a> the UI.</li>
</ol>

View File

@ -1,5 +1,5 @@
# Documentation
There are multiple types of documentation for Trilium:<img class="image-style-align-right" src="api/images/1gHwZjPsyRj8/Documentation_image.png" width="205" height="162">
There are multiple types of documentation for Trilium:<img class="image-style-align-right" src="api/images/cA6KrXDtJ4Ni/Documentation_image.png" width="205" height="162">
* The _User Guide_ represents the user-facing documentation. This documentation can be browsed by users directly from within Trilium, by pressing <kbd>F1</kbd>.
* The _Developer's Guide_ represents a set of Markdown documents that present the internals of Trilium, for developers.

View File

@ -6459,6 +6459,97 @@
"type": "text",
"mime": "text/html",
"attributes": [
{
"type": "relation",
"name": "internalLink",
"value": "mHbBMPDPkVV5",
"isInheritable": false,
"position": 10
},
{
"type": "relation",
"name": "internalLink",
"value": "MgibgPcfeuGz",
"isInheritable": false,
"position": 20
},
{
"type": "relation",
"name": "internalLink",
"value": "HI6GBBIduIgv",
"isInheritable": false,
"position": 30
},
{
"type": "relation",
"name": "internalLink",
"value": "64ZTlUPgEPtW",
"isInheritable": false,
"position": 40
},
{
"type": "relation",
"name": "internalLink",
"value": "yIhgI5H7A2Sm",
"isInheritable": false,
"position": 50
},
{
"type": "relation",
"name": "internalLink",
"value": "RnaPdbciOfeq",
"isInheritable": false,
"position": 60
},
{
"type": "relation",
"name": "internalLink",
"value": "SPirpZypehBG",
"isInheritable": false,
"position": 70
},
{
"type": "relation",
"name": "internalLink",
"value": "1vHRoWCEjj0L",
"isInheritable": false,
"position": 80
},
{
"type": "relation",
"name": "internalLink",
"value": "HcABDtFCkbFN",
"isInheritable": false,
"position": 90
},
{
"type": "relation",
"name": "internalLink",
"value": "AlhDUqhENtH7",
"isInheritable": false,
"position": 100
},
{
"type": "relation",
"name": "internalLink",
"value": "pKK96zzmvBGf",
"isInheritable": false,
"position": 110
},
{
"type": "relation",
"name": "internalLink",
"value": "gOKqSJgXLcIj",
"isInheritable": false,
"position": 120
},
{
"type": "relation",
"name": "internalLink",
"value": "IjZS7iK5EXtb",
"isInheritable": false,
"position": 130
},
{
"type": "label",
"name": "iconClass",
@ -6472,97 +6563,6 @@
"value": "active-content",
"isInheritable": false,
"position": 40
},
{
"type": "relation",
"name": "internalLink",
"value": "MgibgPcfeuGz",
"isInheritable": false,
"position": 50
},
{
"type": "relation",
"name": "internalLink",
"value": "1vHRoWCEjj0L",
"isInheritable": false,
"position": 70
},
{
"type": "relation",
"name": "internalLink",
"value": "yIhgI5H7A2Sm",
"isInheritable": false,
"position": 100
},
{
"type": "relation",
"name": "internalLink",
"value": "HcABDtFCkbFN",
"isInheritable": false,
"position": 110
},
{
"type": "relation",
"name": "internalLink",
"value": "RnaPdbciOfeq",
"isInheritable": false,
"position": 120
},
{
"type": "relation",
"name": "internalLink",
"value": "SPirpZypehBG",
"isInheritable": false,
"position": 130
},
{
"type": "relation",
"name": "internalLink",
"value": "mHbBMPDPkVV5",
"isInheritable": false,
"position": 150
},
{
"type": "relation",
"name": "internalLink",
"value": "AlhDUqhENtH7",
"isInheritable": false,
"position": 160
},
{
"type": "relation",
"name": "internalLink",
"value": "pKK96zzmvBGf",
"isInheritable": false,
"position": 170
},
{
"type": "relation",
"name": "internalLink",
"value": "gOKqSJgXLcIj",
"isInheritable": false,
"position": 180
},
{
"type": "relation",
"name": "internalLink",
"value": "64ZTlUPgEPtW",
"isInheritable": false,
"position": 190
},
{
"type": "relation",
"name": "internalLink",
"value": "HI6GBBIduIgv",
"isInheritable": false,
"position": 200
},
{
"type": "relation",
"name": "internalLink",
"value": "IjZS7iK5EXtb",
"isInheritable": false,
"position": 210
}
],
"format": "markdown",
@ -9943,7 +9943,7 @@
{
"type": "relation",
"name": "internalLink",
"value": "CdNpE2pqjmI6",
"value": "yIhgI5H7A2Sm",
"isInheritable": false,
"position": 10
},
@ -9971,31 +9971,38 @@
{
"type": "relation",
"name": "internalLink",
"value": "XpOYSgsLkTJy",
"value": "CdNpE2pqjmI6",
"isInheritable": false,
"position": 50
},
{
"type": "relation",
"name": "internalLink",
"value": "A9Oc6YKKc65v",
"value": "XpOYSgsLkTJy",
"isInheritable": false,
"position": 60
},
{
"type": "relation",
"name": "internalLink",
"value": "R7abl2fc6Mxi",
"value": "A9Oc6YKKc65v",
"isInheritable": false,
"position": 70
},
{
"type": "relation",
"name": "internalLink",
"value": "6tZeKvSHEUiB",
"value": "R7abl2fc6Mxi",
"isInheritable": false,
"position": 80
},
{
"type": "relation",
"name": "internalLink",
"value": "6tZeKvSHEUiB",
"isInheritable": false,
"position": 90
},
{
"type": "label",
"name": "iconClass",
@ -10009,13 +10016,6 @@
"value": "render-note",
"isInheritable": false,
"position": 70
},
{
"type": "relation",
"name": "internalLink",
"value": "yIhgI5H7A2Sm",
"isInheritable": false,
"position": 90
}
],
"format": "markdown",
@ -11175,20 +11175,6 @@
"type": "text",
"mime": "text/html",
"attributes": [
{
"type": "relation",
"name": "internalLink",
"value": "zEY4DaJG4YT5",
"isInheritable": false,
"position": 10
},
{
"type": "relation",
"name": "internalLink",
"value": "OFXdgB2nNk1F",
"isInheritable": false,
"position": 20
},
{
"type": "relation",
"name": "internalLink",
@ -11238,13 +11224,6 @@
"isInheritable": false,
"position": 90
},
{
"type": "relation",
"name": "internalLink",
"value": "BlN9DFI679QC",
"isInheritable": false,
"position": 100
},
{
"type": "label",
"name": "iconClass",
@ -11258,6 +11237,13 @@
"value": "geomap",
"isInheritable": false,
"position": 90
},
{
"type": "relation",
"name": "internalLink",
"value": "HI6GBBIduIgv",
"isInheritable": false,
"position": 110
}
],
"format": "markdown",
@ -16248,10 +16234,94 @@
{
"type": "relation",
"name": "internalLink",
"value": "SynTBQiBsdYJ",
"value": "MgibgPcfeuGz",
"isInheritable": false,
"position": 10
},
{
"type": "relation",
"name": "internalLink",
"value": "oPVyFC7WL2Lp",
"isInheritable": false,
"position": 20
},
{
"type": "relation",
"name": "internalLink",
"value": "RnaPdbciOfeq",
"isInheritable": false,
"position": 30
},
{
"type": "relation",
"name": "internalLink",
"value": "4Gn3psZKsfSm",
"isInheritable": false,
"position": 40
},
{
"type": "relation",
"name": "internalLink",
"value": "xYmIYSP6wE3F",
"isInheritable": false,
"position": 50
},
{
"type": "relation",
"name": "internalLink",
"value": "HcABDtFCkbFN",
"isInheritable": false,
"position": 60
},
{
"type": "relation",
"name": "internalLink",
"value": "SPirpZypehBG",
"isInheritable": false,
"position": 70
},
{
"type": "relation",
"name": "internalLink",
"value": "HI6GBBIduIgv",
"isInheritable": false,
"position": 80
},
{
"type": "relation",
"name": "internalLink",
"value": "GPERMystNGTB",
"isInheritable": false,
"position": 90
},
{
"type": "relation",
"name": "internalLink",
"value": "GhurYZjh8e1V",
"isInheritable": false,
"position": 100
},
{
"type": "relation",
"name": "internalLink",
"value": "M8IppdwVHSjG",
"isInheritable": false,
"position": 110
},
{
"type": "relation",
"name": "internalLink",
"value": "Q2z6av6JZVWm",
"isInheritable": false,
"position": 120
},
{
"type": "relation",
"name": "internalLink",
"value": "SynTBQiBsdYJ",
"isInheritable": false,
"position": 130
},
{
"type": "label",
"name": "shareAlias",
@ -16265,90 +16335,6 @@
"value": "bx bx-window",
"isInheritable": false,
"position": 40
},
{
"type": "relation",
"name": "internalLink",
"value": "Q2z6av6JZVWm",
"isInheritable": false,
"position": 50
},
{
"type": "relation",
"name": "internalLink",
"value": "GhurYZjh8e1V",
"isInheritable": false,
"position": 60
},
{
"type": "relation",
"name": "internalLink",
"value": "M8IppdwVHSjG",
"isInheritable": false,
"position": 70
},
{
"type": "relation",
"name": "internalLink",
"value": "MgibgPcfeuGz",
"isInheritable": false,
"position": 80
},
{
"type": "relation",
"name": "internalLink",
"value": "SPirpZypehBG",
"isInheritable": false,
"position": 90
},
{
"type": "relation",
"name": "internalLink",
"value": "RnaPdbciOfeq",
"isInheritable": false,
"position": 100
},
{
"type": "relation",
"name": "internalLink",
"value": "oPVyFC7WL2Lp",
"isInheritable": false,
"position": 110
},
{
"type": "relation",
"name": "internalLink",
"value": "4Gn3psZKsfSm",
"isInheritable": false,
"position": 120
},
{
"type": "relation",
"name": "internalLink",
"value": "xYmIYSP6wE3F",
"isInheritable": false,
"position": 130
},
{
"type": "relation",
"name": "internalLink",
"value": "HcABDtFCkbFN",
"isInheritable": false,
"position": 140
},
{
"type": "relation",
"name": "internalLink",
"value": "HI6GBBIduIgv",
"isInheritable": false,
"position": 150
},
{
"type": "relation",
"name": "internalLink",
"value": "GPERMystNGTB",
"isInheritable": false,
"position": 160
}
],
"format": "markdown",
@ -16980,6 +16966,13 @@
"isInheritable": false,
"position": 60
},
{
"type": "relation",
"name": "internalLink",
"value": "s8alTXmpFR61",
"isInheritable": false,
"position": 70
},
{
"type": "label",
"name": "iconClass",
@ -16993,13 +16986,6 @@
"value": "launch-bar-widgets",
"isInheritable": false,
"position": 40
},
{
"type": "relation",
"name": "internalLink",
"value": "s8alTXmpFR61",
"isInheritable": false,
"position": 70
}
],
"format": "markdown",
@ -17444,6 +17430,48 @@
"type": "text",
"mime": "text/html",
"attributes": [
{
"type": "relation",
"name": "internalLink",
"value": "yIhgI5H7A2Sm",
"isInheritable": false,
"position": 10
},
{
"type": "relation",
"name": "internalLink",
"value": "WOcw2SLH6tbX",
"isInheritable": false,
"position": 20
},
{
"type": "relation",
"name": "internalLink",
"value": "poXkQfguuA0U",
"isInheritable": false,
"position": 30
},
{
"type": "relation",
"name": "internalLink",
"value": "6f9hih2hXXZk",
"isInheritable": false,
"position": 40
},
{
"type": "relation",
"name": "internalLink",
"value": "GPERMystNGTB",
"isInheritable": false,
"position": 50
},
{
"type": "relation",
"name": "internalLink",
"value": "MEtfsqa5VwNi",
"isInheritable": false,
"position": 60
},
{
"type": "label",
"name": "shareAlias",
@ -17457,48 +17485,6 @@
"value": "bx bx-server",
"isInheritable": false,
"position": 40
},
{
"type": "relation",
"name": "internalLink",
"value": "yIhgI5H7A2Sm",
"isInheritable": false,
"position": 50
},
{
"type": "relation",
"name": "internalLink",
"value": "WOcw2SLH6tbX",
"isInheritable": false,
"position": 60
},
{
"type": "relation",
"name": "internalLink",
"value": "poXkQfguuA0U",
"isInheritable": false,
"position": 70
},
{
"type": "relation",
"name": "internalLink",
"value": "MEtfsqa5VwNi",
"isInheritable": false,
"position": 80
},
{
"type": "relation",
"name": "internalLink",
"value": "6f9hih2hXXZk",
"isInheritable": false,
"position": 90
},
{
"type": "relation",
"name": "internalLink",
"value": "GPERMystNGTB",
"isInheritable": false,
"position": 100
}
],
"format": "markdown",

View File

@ -15,7 +15,7 @@ Trilium is an open-source solution for note-taking and organizing a personal kno
* <a class="reference-link" href="User%20Guide/Installation%20%26%20Setup/Desktop%20Installation.md">Desktop Installation</a>
* <a class="reference-link" href="User%20Guide/Installation%20%26%20Setup/Server%20Installation.md">Server Installation</a>
* <a class="reference-link" href="User%20Guide/Scripting/Script%20API/Frontend%20API">[missing note]</a> or <a class="reference-link" href="User%20Guide/Scripting/Script%20API/Backend%20API.dat">[missing note]</a>
* <a class="reference-link" href="User%20Guide/Scripting/Script%20API/Frontend%20API">Frontend API</a> or <a class="reference-link" href="User%20Guide/Scripting/Script%20API/Backend%20API.dat">[missing note]</a>
* [ETAPI reference](User%20Guide/Advanced%20Usage/ETAPI%20\(REST%20API\)/API%20Reference.dat)
## External links

View File

@ -1,6 +1,6 @@
# Geo Map
> [!IMPORTANT]
> <a class="reference-link" href="../Advanced%20Usage/Attributes.md">Attributes</a><a class="reference-link" href="../Advanced%20Usage/Attributes/Promoted%20Attributes.md">Promoted Attributes</a><a class="reference-link" href="../Advanced%20Usage/Attributes.md">Attributes</a>Starting with Trilium v0.97.0, the geo map has been converted from a standalone [note type](../Note%20Types.md) to a type of view for the <a class="reference-link" href="../Basic%20Concepts%20and%20Features/Notes/Note%20List.md">Note List</a>. 
> Starting with Trilium v0.97.0, the geo map has been converted from a standalone [note type](../Note%20Types.md) to a type of view for the <a class="reference-link" href="../Basic%20Concepts%20and%20Features/Notes/Note%20List.md">Note List</a>. 
<figure class="image image-style-align-center"><img style="aspect-ratio:892/675;" src="9_Geo Map_image.png" width="892" height="675"></figure>
@ -26,8 +26,8 @@ The position on the map and the zoom are saved inside the map note and restored
| | | |
| --- | --- | --- |
| 1 | To create a marker, first navigate to the desired point on the map. Then press the ![](10_Geo%20Map_image.png) button in the [Floating buttons](../Basic%20Concepts%20and%20Features/UI%20Elements/Floating%20buttons.md) (top-right) area.     <br> <br>If the button is not visible, make sure the button section is visible by pressing the chevron button (![](17_Geo%20Map_image.png)) in the top-right of the map. | |
| 2 | <img class="image_resized" style="aspect-ratio:1730/416;width:100%;" src="2_Geo Map_image.png" width="1730" height="416"> | Once pressed, the map will enter in the insert mode, as illustrated by the notification.        <br> <br>Simply click the point on the map where to place the marker, or the Escape key to cancel. |
| 1 | To create a marker, first navigate to the desired point on the map. Then press the ![](10_Geo%20Map_image.png) button in the [Floating buttons](../Basic%20Concepts%20and%20Features/UI%20Elements/Floating%20buttons.md) (top-right) area.      <br> <br>If the button is not visible, make sure the button section is visible by pressing the chevron button (![](17_Geo%20Map_image.png)) in the top-right of the map. | |
| 2 | <img class="image_resized" style="aspect-ratio:1730/416;width:100%;" src="2_Geo Map_image.png" width="1730" height="416"> | Once pressed, the map will enter in the insert mode, as illustrated by the notification.         <br> <br>Simply click the point on the map where to place the marker, or the Escape key to cancel. |
| 3 | <img class="image_resized" style="aspect-ratio:1586/404;width:100%;" src="7_Geo Map_image.png" width="1586" height="404"> | Enter the name of the marker/note to be created. |
| 4 | <img class="image_resized" style="aspect-ratio:1696/608;width:100%;" src="16_Geo Map_image.png" width="1696" height="608"> | Once confirmed, the marker will show up on the map and it will also be displayed as a child note of the map. |
@ -109,7 +109,7 @@ The value of the attribute is made up of the latitude and longitude separated by
| | | |
| --- | --- | --- |
| 1 | <figure class="image image-style-align-center image_resized" style="width:56.84%;"><img style="aspect-ratio:732/918;" src="12_Geo Map_image.png" width="732" height="918"></figure> | Go to Google Maps on the web and look for a desired location, right click on it and a context menu will show up.        <br> <br>Simply click on the first item displaying the coordinates and they will be copied to clipboard.        <br> <br>Then paste the value inside the text box into the `#geolocation` attribute of a child note of the map (don't forget to surround the value with a `"` character). |
| 1 | <figure class="image image-style-align-center image_resized" style="width:56.84%;"><img style="aspect-ratio:732/918;" src="12_Geo Map_image.png" width="732" height="918"></figure> | Go to Google Maps on the web and look for a desired location, right click on it and a context menu will show up.         <br> <br>Simply click on the first item displaying the coordinates and they will be copied to clipboard.         <br> <br>Then paste the value inside the text box into the `#geolocation` attribute of a child note of the map (don't forget to surround the value with a `"` character). |
| 2 | <figure class="image image-style-align-center image_resized" style="width:100%;"><img style="aspect-ratio:518/84;" src="4_Geo Map_image.png" width="518" height="84"></figure> | In Trilium, create a child note under the map. |
| 3 | <figure class="image image-style-align-center image_resized" style="width:100%;"><img style="aspect-ratio:1074/276;" src="11_Geo Map_image.png" width="1074" height="276"></figure> | And then go to Owned Attributes and type `#geolocation="`, then paste from the clipboard as-is and then add the ending `"` character. Press Enter to confirm and the map should now be updated to contain the new note. |
@ -120,7 +120,7 @@ Similarly to the Google Maps approach:
| | | |
| --- | --- | --- |
| 1 | <img class="image_resized" style="aspect-ratio:562/454;width:100%;" src="1_Geo Map_image.png" width="562" height="454"> | Go to any location on openstreetmap.org and right click to bring up the context menu. Select the “Show address” item. |
| 2 | <img class="image_resized" style="aspect-ratio:696/480;width:100%;" src="Geo Map_image.png" width="696" height="480"> | The address will be visible in the top-left of the screen, in the place of the search bar.        <br> <br>Select the coordinates and copy them into the clipboard. |
| 2 | <img class="image_resized" style="aspect-ratio:696/480;width:100%;" src="Geo Map_image.png" width="696" height="480"> | The address will be visible in the top-left of the screen, in the place of the search bar.         <br> <br>Select the coordinates and copy them into the clipboard. |
| 3 | <img class="image_resized" style="aspect-ratio:640/276;width:100%;" src="5_Geo Map_image.png" width="640" height="276"> | Simply paste the value inside the text box into the `#geolocation` attribute of a child note of the map and then it should be displayed on the map. |
## Adding GPS tracks (.gpx)
@ -131,7 +131,7 @@ Trilium has basic support for displaying GPS tracks on the geo map.
| --- | --- | --- |
| 1 | <figure class="image image-style-align-center"><img style="aspect-ratio:226/74;" src="3_Geo Map_image.png" width="226" height="74"></figure> | To add a track, simply drag & drop a .gpx file inside the geo map in the note tree. |
| 2 | <figure class="image image-style-align-center"><img style="aspect-ratio:322/222;" src="14_Geo Map_image.png" width="322" height="222"></figure> | In order for the file to be recognized as a GPS track, it needs to show up as `application/gpx+xml` in the _File type_ field. |
| 3 | <figure class="image image-style-align-center"><img style="aspect-ratio:620/530;" src="6_Geo Map_image.png" width="620" height="530"></figure> | When going back to the map, the track should now be visible.        <br> <br>The start and end points of the track are indicated by the two blue markers. |
| 3 | <figure class="image image-style-align-center"><img style="aspect-ratio:620/530;" src="6_Geo Map_image.png" width="620" height="530"></figure> | When going back to the map, the track should now be visible.         <br> <br>The start and end points of the track are indicated by the two blue markers. |
> [!NOTE]
> The starting point of the track will be displayed as a marker, with the name of the note underneath. The start marker will also respect the icon and the `color` of the note. The end marker is displayed with a distinct icon.
@ -152,7 +152,7 @@ To enable read-only mode simply press the _Lock_ icon from the <a class="refere
### Map Style
The styling of the map can be adjusted in the _Collection Properties_ tab in the <a class="reference-link" href="../Basic%20Concepts%20and%20Features/UI%20Elements/Ribbon.md">Ribbon</a> or manually via the `#map:style` attribute.
The styling of the map can be adjusted in the _Collection Properties_ (above the map, by pressing on the Gear icon) or manually via the `#map:style` attribute.
The geo map comes with two different types of styles:
@ -166,12 +166,23 @@ The geo map comes with two different types of styles:
* These come both in a light and a dark version.
* The vector styles come from [VersaTiles](https://versatiles.org/), a free and open-source project providing map tiles based on OpenStreetMap.
### Custom map style / tiles
Starting with v0.102.0 it is possible to use custom tile sets, but only in raster format.
To do so, manually set the `#map:style` [label](../Advanced%20Usage/Attributes/Labels.md) to the URL of the tile set. For example, to use Esri.NatGeoWorldMap, set the value to [`https://server.arcgisonline.com/ArcGIS/rest/services/NatGeo_World_Map/MapServer/tile/{z}/{y}/{x}`.](https://server.arcgisonline.com/ArcGIS/rest/services/NatGeo_World_Map/MapServer/tile/{z}/{y}/{x}.)
> [!NOTE]
> Currently it is not possible to use a custom map style.
> For a list of tile sets, see the [Leaflet Providers preview](https://leaflet-extras.github.io/leaflet-providers/preview/) page. Select a desired tile set and just copy the URL from the _Plain JavaScript_ example.
### Scale
Custom vector map support is planned, but not yet implemented.
Activating this option via the <a class="reference-link" href="../Basic%20Concepts%20and%20Features/UI%20Elements/Ribbon.md">Ribbon</a> or manually via `#map:scale` will display an indicator in the bottom-left of the scale of the map.
### Other options
The following options can be configured either via the Collection properties pane above the map, by clicking on the settings (Gear icon). Alternatively, each of these options also have a corresponding [label](../Advanced%20Usage/Attributes/Labels.md) that can be set manually.
* Scale, which illustrates the scale of the map in kilometers and miles in the bottom-left of the map.
* The name of the markers is displayed by default underneath the pin on the map. Since v0.102.0, it is possible to hide these labels which increases the performance and decreases clutter when there are many markers on the map.
## Troubleshooting