fix(docs): layout in geomap

This commit is contained in:
Elian Doran 2025-04-04 22:50:53 +03:00
parent 418da69b8a
commit 65ddfe8776
No known key found for this signature in database
22 changed files with 90 additions and 35 deletions

View File

@ -5451,6 +5451,13 @@
"value": "bx bx-map-alt", "value": "bx bx-map-alt",
"isInheritable": false, "isInheritable": false,
"position": 10 "position": 10
},
{
"type": "relation",
"name": "internalLink",
"value": "XpOYSgsLkTJy",
"isInheritable": false,
"position": 20
} }
], ],
"format": "markdown", "format": "markdown",
@ -5561,7 +5568,7 @@
"dataFileName": "Geo Map_image.jpg" "dataFileName": "Geo Map_image.jpg"
}, },
{ {
"attachmentId": "Mx2xwNIk76ZS", "attachmentId": "Mb9kRm63MxjE",
"title": "image.png", "title": "image.png",
"role": "image", "role": "image",
"mime": "image/png", "mime": "image/png",
@ -5569,20 +5576,28 @@
"dataFileName": "12_Geo Map_image.png" "dataFileName": "12_Geo Map_image.png"
}, },
{ {
"attachmentId": "oaahbsMRbqd2", "attachmentId": "Mx2xwNIk76ZS",
"title": "image.png", "title": "image.png",
"role": "image", "role": "image",
"mime": "image/png", "mime": "image/png",
"position": 10, "position": 10,
"dataFileName": "13_Geo Map_image.png" "dataFileName": "13_Geo Map_image.png"
}, },
{
"attachmentId": "oaahbsMRbqd2",
"title": "image.png",
"role": "image",
"mime": "image/png",
"position": 10,
"dataFileName": "14_Geo Map_image.png"
},
{ {
"attachmentId": "pGf1p74KKGU4", "attachmentId": "pGf1p74KKGU4",
"title": "image.png", "title": "image.png",
"role": "image", "role": "image",
"mime": "image/jpg", "mime": "image/jpg",
"position": 10, "position": 10,
"dataFileName": "14_Geo Map_image.png" "dataFileName": "15_Geo Map_image.png"
}, },
{ {
"attachmentId": "tfa1TRUatWEh", "attachmentId": "tfa1TRUatWEh",
@ -5590,7 +5605,7 @@
"role": "image", "role": "image",
"mime": "image/png", "mime": "image/png",
"position": 10, "position": 10,
"dataFileName": "15_Geo Map_image.png" "dataFileName": "16_Geo Map_image.png"
}, },
{ {
"attachmentId": "USbvJ38T4AKA", "attachmentId": "USbvJ38T4AKA",
@ -5598,7 +5613,7 @@
"role": "image", "role": "image",
"mime": "image/png", "mime": "image/png",
"position": 10, "position": 10,
"dataFileName": "16_Geo Map_image.png" "dataFileName": "17_Geo Map_image.png"
}, },
{ {
"attachmentId": "x6yBLIsY2LSv", "attachmentId": "x6yBLIsY2LSv",
@ -5606,7 +5621,15 @@
"role": "image", "role": "image",
"mime": "image/png", "mime": "image/png",
"position": 10, "position": 10,
"dataFileName": "17_Geo Map_image.png" "dataFileName": "18_Geo Map_image.png"
},
{
"attachmentId": "yJMyBRYA3Kwi",
"title": "image.png",
"role": "image",
"mime": "image/png",
"position": 10,
"dataFileName": "19_Geo Map_image.png"
}, },
{ {
"attachmentId": "ZvTlu9WMd37z", "attachmentId": "ZvTlu9WMd37z",
@ -5614,7 +5637,7 @@
"role": "image", "role": "image",
"mime": "image/png", "mime": "image/png",
"position": 10, "position": 10,
"dataFileName": "18_Geo Map_image.png" "dataFileName": "20_Geo Map_image.png"
} }
] ]
} }

Binary file not shown.

Before

Width:  |  Height:  |  Size: 43 KiB

After

Width:  |  Height:  |  Size: 815 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 117 KiB

After

Width:  |  Height:  |  Size: 43 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 31 KiB

After

Width:  |  Height:  |  Size: 117 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 15 KiB

After

Width:  |  Height:  |  Size: 31 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 4.2 KiB

After

Width:  |  Height:  |  Size: 15 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 397 KiB

After

Width:  |  Height:  |  Size: 4.2 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 42 KiB

After

Width:  |  Height:  |  Size: 397 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 359 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 42 KiB

View File

@ -21,16 +21,16 @@ 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 ![](16_Geo%20Map_image.png)button on the top-right of the map.    <br> <br>If the button is not visible, make sure the button section is visible by pressing the chevron button ( ![](2_Geo%20Map_image.png)) in the top-right of the map. | | 1 | To create a marker, first navigate to the desired point on the map. Then press the ![](12_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 (![](19_Geo%20Map_image.png)) in the top-right of the map. | |
| 2 | ![](3_Geo%20Map_image.png) | 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. | | 2 | ![](3_Geo%20Map_image.png) | 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 | ![](9_Geo%20Map_image.png) | Enter the name of the marker/note to be created. | | 3 | ![](9_Geo%20Map_image.png) | Enter the name of the marker/note to be created. |
| 4 | ![](17_Geo%20Map_image.png) | Once confirmed, the marker will show up on the map and it will also be displayed as a child note of the map. | | 4 | ![](18_Geo%20Map_image.png) | Once confirmed, the marker will show up on the map and it will also be displayed as a child note of the map. |
## How the location of the markers is stored ## How the location of the markers is stored
The location of a marker is stored in the `#geolocation` attribute of the child notes: The location of a marker is stored in the `#geolocation` attribute of the child notes:
![](18_Geo%20Map_image.png) ![](20_Geo%20Map_image.png)
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. 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.
@ -70,9 +70,9 @@ The value of the attribute is made up of the latitude and longitude separated by
| | | | | | | |
| --- | --- | --- | | --- | --- | --- |
| 1 | ![](13_Geo%20Map_image.png) | 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 | ![](14_Geo%20Map_image.png) | 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 | ![](5_Geo%20Map_image.png) | In Trilium, create a child note under the map. | | 2 | ![](5_Geo%20Map_image.png) | In Trilium, create a child note under the map. |
| 3 | ![](12_Geo%20Map_image.png) | 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. | | 3 | ![](13_Geo%20Map_image.png) | 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. |
### Adding from OpenStreetMap ### Adding from OpenStreetMap
@ -91,12 +91,12 @@ Trilium has basic support for displaying GPS tracks on the geo map.
| | | | | | | |
| --- | --- | --- | | --- | --- | --- |
| 1 | ![](4_Geo%20Map_image.png) | To add a track, simply drag & drop a .gpx file inside the geo map in the note tree. | | 1 | ![](4_Geo%20Map_image.png) | To add a track, simply drag & drop a .gpx file inside the geo map in the note tree. |
| 2 | ![](15_Geo%20Map_image.png) | 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. | | 2 | ![](16_Geo%20Map_image.png) | 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 | ![](7_Geo%20Map_image.png) | 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 | ![](7_Geo%20Map_image.png) | 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. |
## Troubleshooting ## Troubleshooting
![](14_Geo%20Map_image.png) ![](15_Geo%20Map_image.png)
### Grid-like artifacts on the map ### Grid-like artifacts on the map

View File

@ -5451,6 +5451,13 @@
"value": "bx bx-map-alt", "value": "bx bx-map-alt",
"isInheritable": false, "isInheritable": false,
"position": 10 "position": 10
},
{
"type": "relation",
"name": "internalLink",
"value": "XpOYSgsLkTJy",
"isInheritable": false,
"position": 20
} }
], ],
"format": "html", "format": "html",
@ -5561,7 +5568,7 @@
"dataFileName": "Geo Map_image.jpg" "dataFileName": "Geo Map_image.jpg"
}, },
{ {
"attachmentId": "Mx2xwNIk76ZS", "attachmentId": "Mb9kRm63MxjE",
"title": "image.png", "title": "image.png",
"role": "image", "role": "image",
"mime": "image/png", "mime": "image/png",
@ -5569,20 +5576,28 @@
"dataFileName": "12_Geo Map_image.png" "dataFileName": "12_Geo Map_image.png"
}, },
{ {
"attachmentId": "oaahbsMRbqd2", "attachmentId": "Mx2xwNIk76ZS",
"title": "image.png", "title": "image.png",
"role": "image", "role": "image",
"mime": "image/png", "mime": "image/png",
"position": 10, "position": 10,
"dataFileName": "13_Geo Map_image.png" "dataFileName": "13_Geo Map_image.png"
}, },
{
"attachmentId": "oaahbsMRbqd2",
"title": "image.png",
"role": "image",
"mime": "image/png",
"position": 10,
"dataFileName": "14_Geo Map_image.png"
},
{ {
"attachmentId": "pGf1p74KKGU4", "attachmentId": "pGf1p74KKGU4",
"title": "image.png", "title": "image.png",
"role": "image", "role": "image",
"mime": "image/jpg", "mime": "image/jpg",
"position": 10, "position": 10,
"dataFileName": "14_Geo Map_image.png" "dataFileName": "15_Geo Map_image.png"
}, },
{ {
"attachmentId": "tfa1TRUatWEh", "attachmentId": "tfa1TRUatWEh",
@ -5590,7 +5605,7 @@
"role": "image", "role": "image",
"mime": "image/png", "mime": "image/png",
"position": 10, "position": 10,
"dataFileName": "15_Geo Map_image.png" "dataFileName": "16_Geo Map_image.png"
}, },
{ {
"attachmentId": "USbvJ38T4AKA", "attachmentId": "USbvJ38T4AKA",
@ -5598,7 +5613,7 @@
"role": "image", "role": "image",
"mime": "image/png", "mime": "image/png",
"position": 10, "position": 10,
"dataFileName": "16_Geo Map_image.png" "dataFileName": "17_Geo Map_image.png"
}, },
{ {
"attachmentId": "x6yBLIsY2LSv", "attachmentId": "x6yBLIsY2LSv",
@ -5606,7 +5621,15 @@
"role": "image", "role": "image",
"mime": "image/png", "mime": "image/png",
"position": 10, "position": 10,
"dataFileName": "17_Geo Map_image.png" "dataFileName": "18_Geo Map_image.png"
},
{
"attachmentId": "yJMyBRYA3Kwi",
"title": "image.png",
"role": "image",
"mime": "image/png",
"position": 10,
"dataFileName": "19_Geo Map_image.png"
}, },
{ {
"attachmentId": "ZvTlu9WMd37z", "attachmentId": "ZvTlu9WMd37z",
@ -5614,7 +5637,7 @@
"role": "image", "role": "image",
"mime": "image/png", "mime": "image/png",
"position": 10, "position": 10,
"dataFileName": "18_Geo Map_image.png" "dataFileName": "20_Geo Map_image.png"
} }
] ]
} }

Binary file not shown.

Before

Width:  |  Height:  |  Size: 43 KiB

After

Width:  |  Height:  |  Size: 815 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 117 KiB

After

Width:  |  Height:  |  Size: 43 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 31 KiB

After

Width:  |  Height:  |  Size: 117 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 15 KiB

After

Width:  |  Height:  |  Size: 31 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 4.2 KiB

After

Width:  |  Height:  |  Size: 15 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 397 KiB

After

Width:  |  Height:  |  Size: 4.2 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 42 KiB

After

Width:  |  Height:  |  Size: 397 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 359 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 42 KiB

View File

@ -57,8 +57,13 @@
<p>The position on the map and the zoom are saved inside the map note and <p>The position on the map and the zoom are saved inside the map note and
restored when visiting again the note.</p> restored when visiting again the note.</p>
<h2>Adding a marker using the map</h2> <h2>Adding a marker using the map</h2>
<figure class="table"> <figure class="table" style="width:163.53%;">
<table> <table class="ck-table-resized">
<colgroup>
<col style="width:1.69%;">
<col style="width:66.49%;">
<col style="width:31.82%;">
</colgroup>
<thead> <thead>
<tr> <tr>
<th>&nbsp;</th> <th>&nbsp;</th>
@ -69,19 +74,21 @@
<tbody> <tbody>
<tr> <tr>
<td>1</td> <td>1</td>
<td>&nbsp;</td> <td colspan="2">To create a marker, first navigate to the desired point on the map. Then
<td>To create a marker, first navigate to the desired point on the map. Then
press the press the
<img src="16_Geo Map_image.png">button on the top-right of the map.&nbsp;&nbsp;&nbsp; <img src="12_Geo Map_image.png" width="18" height="18">button in the&nbsp;<a class="reference-link" href="../Basic%20Concepts%20and%20Features/UI%20Elements/Floating%20buttons.html">Floating buttons</a>&nbsp;(top-right)
area.
<br> <br>
<br>If the button is not visible, make sure the button section is visible <br>If the button is not visible, make sure the button section is visible
by pressing the chevron button ( by pressing the chevron button (
<img src="2_Geo Map_image.png">) in the top-right of the map.</td> <img src="19_Geo Map_image.png" width="11"
height="10">) in the top-right of the map.</td>
</tr> </tr>
<tr> <tr>
<td>2</td> <td>2</td>
<td> <td>
<img src="3_Geo Map_image.png"> <img class="image_resized" style="aspect-ratio:1730/416;width:100%;" src="3_Geo Map_image.png"
width="1730" height="416">
</td> </td>
<td>Once pressed, the map will enter in the insert mode, as illustrated by <td>Once pressed, the map will enter in the insert mode, as illustrated by
the notification.&nbsp;&nbsp;&nbsp; the notification.&nbsp;&nbsp;&nbsp;
@ -92,14 +99,16 @@
<tr> <tr>
<td>3</td> <td>3</td>
<td> <td>
<img src="9_Geo Map_image.png"> <img class="image_resized" style="aspect-ratio:1586/404;width:100%;" src="9_Geo Map_image.png"
width="1586" height="404">
</td> </td>
<td>Enter the name of the marker/note to be created.</td> <td>Enter the name of the marker/note to be created.</td>
</tr> </tr>
<tr> <tr>
<td>4</td> <td>4</td>
<td> <td>
<img src="17_Geo Map_image.png"> <img class="image_resized" style="aspect-ratio:1696/608;width:99.95%;"
src="18_Geo Map_image.png" width="1696" height="608">
</td> </td>
<td>Once confirmed, the marker will show up on the map and it will also be <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> displayed as a child note of the map.</td>
@ -111,7 +120,7 @@
<p>The location of a marker is stored in the <code>#geolocation</code> attribute <p>The location of a marker is stored in the <code>#geolocation</code> attribute
of the child notes:</p> of the child notes:</p>
<p> <p>
<img src="18_Geo Map_image.png"> <img src="20_Geo Map_image.png">
</p> </p>
<p>This value can be added manually if needed. The value of the attribute <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> is made up of the latitude and longitude separated by a comma.</p>
@ -169,7 +178,7 @@
<tr> <tr>
<td>1</td> <td>1</td>
<td> <td>
<img src="13_Geo Map_image.png"> <img src="14_Geo Map_image.png">
</td> </td>
<td>Go to Google Maps on the web and look for a desired location, right click <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; on it and a context menu will show up.&nbsp;&nbsp;&nbsp;
@ -190,7 +199,7 @@
<tr> <tr>
<td>3</td> <td>3</td>
<td> <td>
<img src="12_Geo Map_image.png"> <img src="13_Geo Map_image.png">
</td> </td>
<td>And then go to Owned Attributes and type <code>#geolocation="</code>, then <td>And then go to Owned Attributes and type <code>#geolocation="</code>, then
paste from the clipboard as-is and then add the ending <code>"</code> character. paste from the clipboard as-is and then add the ending <code>"</code> character.
@ -265,7 +274,7 @@
<tr> <tr>
<td>2</td> <td>2</td>
<td> <td>
<img src="15_Geo Map_image.png"> <img src="16_Geo Map_image.png">
</td> </td>
<td>In order for the file to be recognized as a GPS track, it needs to show <td>In order for the file to be recognized as a GPS track, it needs to show
up as <code>application/gpx+xml</code> in the <em>File type</em> field.</td> up as <code>application/gpx+xml</code> in the <em>File type</em> field.</td>
@ -284,7 +293,7 @@
</figure> </figure>
<h2>Troubleshooting</h2> <h2>Troubleshooting</h2>
<p> <p>
<img src="14_Geo Map_image.png"> <img src="15_Geo Map_image.png">
</p> </p>
<h3>Grid-like artifacts on the map</h3> <h3>Grid-like artifacts on the map</h3>
<p>This occurs if the application is not at 100% zoom which causes the pixels <p>This occurs if the application is not at 100% zoom which causes the pixels