feat(docs): fix case for Geo Map and add photo

This commit is contained in:
Elian Doran 2025-04-04 22:01:06 +03:00
parent be3e213ba3
commit 4cef5a3e16
No known key found for this signature in database
60 changed files with 386 additions and 421 deletions

View File

@ -1873,14 +1873,6 @@
"mime": "image/png",
"position": 10,
"dataFileName": "Floating buttons_image.png"
},
{
"attachmentId": "FNh39vXBEZxT",
"title": "image.png",
"role": "image",
"mime": "image/png",
"position": 10,
"dataFileName": "1_Floating buttons_image.png"
}
]
}
@ -4221,14 +4213,6 @@
"mime": "image/png",
"position": 10,
"dataFileName": "1_Image references_image.png"
},
{
"attachmentId": "kXBghrixmV2J",
"title": "image.png",
"role": "image",
"mime": "image/png",
"position": 10,
"dataFileName": "2_Image references_image.png"
}
]
}
@ -5104,14 +5088,6 @@
"format": "markdown",
"dataFileName": "Mermaid Diagrams.md",
"attachments": [
{
"attachmentId": "0giz1mqLMRDs",
"title": "ELK off.svg",
"role": "image",
"mime": "image/svg+xml",
"position": 10,
"dataFileName": "Mermaid Diagrams_ELK off.svg"
},
{
"attachmentId": "EN4DhmgiSH6t",
"title": "image.png",
@ -5128,14 +5104,6 @@
"position": 10,
"dataFileName": "1_Mermaid Diagrams_image.png"
},
{
"attachmentId": "IKxo3tblVDHq",
"title": "ELK on.svg",
"role": "image",
"mime": "image/svg+xml",
"position": 10,
"dataFileName": "Mermaid Diagrams_ELK on.svg"
},
{
"attachmentId": "TpPwoCFIePXm",
"title": "image.png",
@ -5292,7 +5260,7 @@
"KSZ04uQ2D1St",
"81SGnPGMk7Xc"
],
"title": "Geo map",
"title": "Geo Map",
"notePosition": 200,
"prefix": null,
"isExpanded": false,
@ -5308,7 +5276,7 @@
}
],
"format": "markdown",
"dataFileName": "Geo map.md",
"dataFileName": "Geo Map.md",
"attachments": [
{
"attachmentId": "1f07O0Z25ZRr",
@ -5316,7 +5284,7 @@
"role": "image",
"mime": "image/png",
"position": 10,
"dataFileName": "Geo map_image.png"
"dataFileName": "Geo Map_image.png"
},
{
"attachmentId": "3oh61qhNLu7D",
@ -5324,7 +5292,7 @@
"role": "image",
"mime": "image/png",
"position": 10,
"dataFileName": "1_Geo map_image.png"
"dataFileName": "1_Geo Map_image.png"
},
{
"attachmentId": "6wUkw5RWE39e",
@ -5332,7 +5300,7 @@
"role": "image",
"mime": "image/png",
"position": 10,
"dataFileName": "2_Geo map_image.png"
"dataFileName": "2_Geo Map_image.png"
},
{
"attachmentId": "aCSNn9QlgHFi",
@ -5340,7 +5308,7 @@
"role": "image",
"mime": "image/png",
"position": 10,
"dataFileName": "3_Geo map_image.png"
"dataFileName": "3_Geo Map_image.png"
},
{
"attachmentId": "aCuXZY7WV4li",
@ -5348,7 +5316,7 @@
"role": "image",
"mime": "image/png",
"position": 10,
"dataFileName": "4_Geo map_image.png"
"dataFileName": "4_Geo Map_image.png"
},
{
"attachmentId": "agH6yREFgsoU",
@ -5356,7 +5324,7 @@
"role": "image",
"mime": "image/png",
"position": 10,
"dataFileName": "5_Geo map_image.png"
"dataFileName": "5_Geo Map_image.png"
},
{
"attachmentId": "AHyDUM6R5HeG",
@ -5364,7 +5332,7 @@
"role": "image",
"mime": "image/png",
"position": 10,
"dataFileName": "6_Geo map_image.png"
"dataFileName": "6_Geo Map_image.png"
},
{
"attachmentId": "CcjWLhE3KKfv",
@ -5372,7 +5340,7 @@
"role": "image",
"mime": "image/png",
"position": 10,
"dataFileName": "7_Geo map_image.png"
"dataFileName": "7_Geo Map_image.png"
},
{
"attachmentId": "DapDey8gMiFc",
@ -5380,7 +5348,7 @@
"role": "image",
"mime": "image/png",
"position": 10,
"dataFileName": "8_Geo map_image.png"
"dataFileName": "8_Geo Map_image.png"
},
{
"attachmentId": "fQy8R1vxKhwN",
@ -5388,7 +5356,7 @@
"role": "image",
"mime": "image/png",
"position": 10,
"dataFileName": "9_Geo map_image.png"
"dataFileName": "9_Geo Map_image.png"
},
{
"attachmentId": "gJ4Yz80jxcbn",
@ -5396,7 +5364,15 @@
"role": "image",
"mime": "image/png",
"position": 10,
"dataFileName": "10_Geo map_image.png"
"dataFileName": "10_Geo Map_image.png"
},
{
"attachmentId": "I39BinT2gsN9",
"title": "image.png",
"role": "image",
"mime": "image/png",
"position": 10,
"dataFileName": "11_Geo Map_image.png"
},
{
"attachmentId": "IeXU8SLZU7Oz",
@ -5404,7 +5380,7 @@
"role": "image",
"mime": "image/jpg",
"position": 10,
"dataFileName": "Geo map_image.jpg"
"dataFileName": "Geo Map_image.jpg"
},
{
"attachmentId": "Mx2xwNIk76ZS",
@ -5412,7 +5388,7 @@
"role": "image",
"mime": "image/png",
"position": 10,
"dataFileName": "11_Geo map_image.png"
"dataFileName": "12_Geo Map_image.png"
},
{
"attachmentId": "oaahbsMRbqd2",
@ -5420,7 +5396,7 @@
"role": "image",
"mime": "image/png",
"position": 10,
"dataFileName": "12_Geo map_image.png"
"dataFileName": "13_Geo Map_image.png"
},
{
"attachmentId": "pGf1p74KKGU4",
@ -5428,7 +5404,7 @@
"role": "image",
"mime": "image/jpg",
"position": 10,
"dataFileName": "13_Geo map_image.png"
"dataFileName": "14_Geo Map_image.png"
},
{
"attachmentId": "tfa1TRUatWEh",
@ -5436,7 +5412,7 @@
"role": "image",
"mime": "image/png",
"position": 10,
"dataFileName": "14_Geo map_image.png"
"dataFileName": "15_Geo Map_image.png"
},
{
"attachmentId": "USbvJ38T4AKA",
@ -5444,7 +5420,7 @@
"role": "image",
"mime": "image/png",
"position": 10,
"dataFileName": "15_Geo map_image.png"
"dataFileName": "16_Geo Map_image.png"
},
{
"attachmentId": "x6yBLIsY2LSv",
@ -5452,7 +5428,7 @@
"role": "image",
"mime": "image/png",
"position": 10,
"dataFileName": "16_Geo map_image.png"
"dataFileName": "17_Geo Map_image.png"
},
{
"attachmentId": "ZvTlu9WMd37z",
@ -5460,7 +5436,7 @@
"role": "image",
"mime": "image/png",
"position": 10,
"dataFileName": "17_Geo map_image.png"
"dataFileName": "18_Geo Map_image.png"
}
]
}

View File

@ -7,7 +7,7 @@ For example:
* [Text Notes](#root/_hidden/_options/_optionsTextNotes) are represented internally as HTML, using the [CKEditor](Technologies%20used/CKEditor.md) representation. Note that due to the custom plugins, some HTML elements are specific to Trilium only, for example the admonitions.
* [Code Notes](#root/_hidden/_options/_optionsCodeNotes) are plain text and are represented internally as-is.
* [Geo map](../Note%20Types/Geo%20map.md) notes contain only minimal information (viewport, zoom) as a JSON.
* [Geo map](../Note%20Types/Geo%20Map.md) notes contain only minimal information (viewport, zoom) as a JSON.
* [Canvas](../Note%20Types/Canvas.md) notes are represented as JSON, with Trilium's own information alongside with [Excalidraw](Technologies%20used/Excalidraw.md)'s internal JSON representation format.
* [Mind Map](../Note%20Types/Mind%20Map.md) notes are represented as JSON, with the internal format of [MindElixir](Technologies%20used/MindElixir.md).

View File

@ -1,5 +1,5 @@
# Leaflet
Leaflet is the library behind [Geo map](../../Note%20Types/Geo%20map.md) notes.
Leaflet is the library behind [Geo map](../../Note%20Types/Geo%20Map.md) notes.
## Plugins

Binary file not shown.

Before

Width:  |  Height:  |  Size: 11 KiB

View File

@ -38,4 +38,4 @@ The following note types are supported by Trilium:
| [Canvas](Note%20Types/Canvas.md) | Allows easy drawing of sketches, diagrams, handwritten content. Uses the same technology behind [excalidraw.com](https://excalidraw.com). |
| [Web View](Note%20Types/Web%20View.md) | Displays the content of an external web page, similar to a browser. |
| [Mind Map](Note%20Types/Mind%20Map.md) | Easy for brainstorming ideas, by placing them in a hierarchical layout. |
| [Geo map](Note%20Types/Geo%20map.md) | Displays the children of the note as a geographical map, one use-case would be to plan vacations. It even has basic support for tracks. Notes can also be created from it. |
| [Geo map](Note%20Types/Geo%20Map.md) | Displays the children of the note as a geographical map, one use-case would be to plan vacations. It even has basic support for tracks. Notes can also be created from it. |

View File

Before

Width:  |  Height:  |  Size: 515 KiB

After

Width:  |  Height:  |  Size: 515 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 176 KiB

View File

Before

Width:  |  Height:  |  Size: 43 KiB

After

Width:  |  Height:  |  Size: 43 KiB

View File

Before

Width:  |  Height:  |  Size: 117 KiB

After

Width:  |  Height:  |  Size: 117 KiB

View File

Before

Width:  |  Height:  |  Size: 31 KiB

After

Width:  |  Height:  |  Size: 31 KiB

View File

Before

Width:  |  Height:  |  Size: 15 KiB

After

Width:  |  Height:  |  Size: 15 KiB

View File

Before

Width:  |  Height:  |  Size: 4.2 KiB

After

Width:  |  Height:  |  Size: 4.2 KiB

View File

Before

Width:  |  Height:  |  Size: 397 KiB

After

Width:  |  Height:  |  Size: 397 KiB

View File

Before

Width:  |  Height:  |  Size: 42 KiB

After

Width:  |  Height:  |  Size: 42 KiB

View File

Before

Width:  |  Height:  |  Size: 191 KiB

After

Width:  |  Height:  |  Size: 191 KiB

View File

Before

Width:  |  Height:  |  Size: 8.8 KiB

After

Width:  |  Height:  |  Size: 8.8 KiB

View File

Before

Width:  |  Height:  |  Size: 323 KiB

After

Width:  |  Height:  |  Size: 323 KiB

View File

Before

Width:  |  Height:  |  Size: 5.2 KiB

After

Width:  |  Height:  |  Size: 5.2 KiB

View File

Before

Width:  |  Height:  |  Size: 12 KiB

After

Width:  |  Height:  |  Size: 12 KiB

View File

Before

Width:  |  Height:  |  Size: 28 KiB

After

Width:  |  Height:  |  Size: 28 KiB

View File

Before

Width:  |  Height:  |  Size: 102 KiB

After

Width:  |  Height:  |  Size: 102 KiB

View File

Before

Width:  |  Height:  |  Size: 260 KiB

After

Width:  |  Height:  |  Size: 260 KiB

View File

Before

Width:  |  Height:  |  Size: 35 KiB

After

Width:  |  Height:  |  Size: 35 KiB

View File

@ -1,10 +1,14 @@
# Geo map
# Geo Map
![](11_Geo%20Map_image.png)
This note type displays the children notes on a geographical map, based on an attribute. It is also possible to add new notes at a specific location using the built-in interface.
## Creating a new geo map
| | | |
| --- | --- | --- |
| 1 | ![](8_Geo%20map_image.png) | Right click on any note on the note tree and select _Insert child note__Geo Map (beta)_. |
| 2 | ![](10_Geo%20map_image.png) | By default the map will be empty and will show the entire world. |
| 1 | ![](8_Geo%20Map_image.png) | Right click on any note on the note tree and select _Insert child note__Geo Map (beta)_. |
| 2 | ![](10_Geo%20Map_image.png) | By default the map will be empty and will show the entire world. |
## Repositioning the map
@ -17,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 ![](15_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. |
| 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. |
| 4 | ![](16_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. |
| 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. |
| 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. |
| 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. |
## How the location of the markers is stored
The location of a marker is stored in the `#geolocation` attribute of the child notes:
![](17_Geo%20map_image.png)
![](18_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.
@ -50,7 +54,7 @@ If moved by mistake, there is currently no way to undo the change. If the mouse
## Icon and color of the markers
![image](Geo%20map_image.jpg)
![image](Geo%20Map_image.jpg)
The markers will have the same icon as the note.
@ -66,9 +70,9 @@ The value of the attribute is made up of the latitude and longitude separated by
| | | |
| --- | --- | --- |
| 1 | ![](12_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. |
| 3 | ![](11_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. |
| 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). |
| 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. |
### Adding from OpenStreetMap
@ -76,9 +80,9 @@ Similarly to the Google Maps approach:
| | | |
| --- | --- | --- |
| 1 | ![](1_Geo%20map_image.png) | Go to any location on openstreetmap.org and right click to bring up the context menu. Select the “Show address” item. |
| 2 | ![](Geo%20map_image.png) | 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 | ![](6_Geo%20map_image.png) | 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. |
| 1 | ![](1_Geo%20Map_image.png) | Go to any location on openstreetmap.org and right click to bring up the context menu. Select the “Show address” item. |
| 2 | ![](Geo%20Map_image.png) | 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 | ![](6_Geo%20Map_image.png) | 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)
@ -86,13 +90,13 @@ 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. |
| 2 | ![](14_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. |
| 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. |
| 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
![](13_Geo%20map_image.png)
![](14_Geo%20Map_image.png)
### Grid-like artifacts on the map

View File

Before

Width:  |  Height:  |  Size: 18 KiB

After

Width:  |  Height:  |  Size: 18 KiB

View File

Before

Width:  |  Height:  |  Size: 58 KiB

After

Width:  |  Height:  |  Size: 58 KiB

File diff suppressed because one or more lines are too long

Before

Width:  |  Height:  |  Size: 15 KiB

File diff suppressed because one or more lines are too long

Before

Width:  |  Height:  |  Size: 19 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 474 B

View File

@ -1873,14 +1873,6 @@
"mime": "image/png",
"position": 10,
"dataFileName": "Floating buttons_image.png"
},
{
"attachmentId": "FNh39vXBEZxT",
"title": "image.png",
"role": "image",
"mime": "image/png",
"position": 10,
"dataFileName": "1_Floating buttons_image.png"
}
]
}
@ -4221,14 +4213,6 @@
"mime": "image/png",
"position": 10,
"dataFileName": "1_Image references_image.png"
},
{
"attachmentId": "kXBghrixmV2J",
"title": "image.png",
"role": "image",
"mime": "image/png",
"position": 10,
"dataFileName": "2_Image references_image.png"
}
]
}
@ -5104,14 +5088,6 @@
"format": "html",
"dataFileName": "Mermaid Diagrams.html",
"attachments": [
{
"attachmentId": "0giz1mqLMRDs",
"title": "ELK off.svg",
"role": "image",
"mime": "image/svg+xml",
"position": 10,
"dataFileName": "Mermaid Diagrams_ELK off.svg"
},
{
"attachmentId": "EN4DhmgiSH6t",
"title": "image.png",
@ -5128,14 +5104,6 @@
"position": 10,
"dataFileName": "1_Mermaid Diagrams_image.png"
},
{
"attachmentId": "IKxo3tblVDHq",
"title": "ELK on.svg",
"role": "image",
"mime": "image/svg+xml",
"position": 10,
"dataFileName": "Mermaid Diagrams_ELK on.svg"
},
{
"attachmentId": "TpPwoCFIePXm",
"title": "image.png",
@ -5292,7 +5260,7 @@
"KSZ04uQ2D1St",
"81SGnPGMk7Xc"
],
"title": "Geo map",
"title": "Geo Map",
"notePosition": 200,
"prefix": null,
"isExpanded": false,
@ -5308,7 +5276,7 @@
}
],
"format": "html",
"dataFileName": "Geo map.html",
"dataFileName": "Geo Map.html",
"attachments": [
{
"attachmentId": "1f07O0Z25ZRr",
@ -5316,7 +5284,7 @@
"role": "image",
"mime": "image/png",
"position": 10,
"dataFileName": "Geo map_image.png"
"dataFileName": "Geo Map_image.png"
},
{
"attachmentId": "3oh61qhNLu7D",
@ -5324,7 +5292,7 @@
"role": "image",
"mime": "image/png",
"position": 10,
"dataFileName": "1_Geo map_image.png"
"dataFileName": "1_Geo Map_image.png"
},
{
"attachmentId": "6wUkw5RWE39e",
@ -5332,7 +5300,7 @@
"role": "image",
"mime": "image/png",
"position": 10,
"dataFileName": "2_Geo map_image.png"
"dataFileName": "2_Geo Map_image.png"
},
{
"attachmentId": "aCSNn9QlgHFi",
@ -5340,7 +5308,7 @@
"role": "image",
"mime": "image/png",
"position": 10,
"dataFileName": "3_Geo map_image.png"
"dataFileName": "3_Geo Map_image.png"
},
{
"attachmentId": "aCuXZY7WV4li",
@ -5348,7 +5316,7 @@
"role": "image",
"mime": "image/png",
"position": 10,
"dataFileName": "4_Geo map_image.png"
"dataFileName": "4_Geo Map_image.png"
},
{
"attachmentId": "agH6yREFgsoU",
@ -5356,7 +5324,7 @@
"role": "image",
"mime": "image/png",
"position": 10,
"dataFileName": "5_Geo map_image.png"
"dataFileName": "5_Geo Map_image.png"
},
{
"attachmentId": "AHyDUM6R5HeG",
@ -5364,7 +5332,7 @@
"role": "image",
"mime": "image/png",
"position": 10,
"dataFileName": "6_Geo map_image.png"
"dataFileName": "6_Geo Map_image.png"
},
{
"attachmentId": "CcjWLhE3KKfv",
@ -5372,7 +5340,7 @@
"role": "image",
"mime": "image/png",
"position": 10,
"dataFileName": "7_Geo map_image.png"
"dataFileName": "7_Geo Map_image.png"
},
{
"attachmentId": "DapDey8gMiFc",
@ -5380,7 +5348,7 @@
"role": "image",
"mime": "image/png",
"position": 10,
"dataFileName": "8_Geo map_image.png"
"dataFileName": "8_Geo Map_image.png"
},
{
"attachmentId": "fQy8R1vxKhwN",
@ -5388,7 +5356,7 @@
"role": "image",
"mime": "image/png",
"position": 10,
"dataFileName": "9_Geo map_image.png"
"dataFileName": "9_Geo Map_image.png"
},
{
"attachmentId": "gJ4Yz80jxcbn",
@ -5396,7 +5364,15 @@
"role": "image",
"mime": "image/png",
"position": 10,
"dataFileName": "10_Geo map_image.png"
"dataFileName": "10_Geo Map_image.png"
},
{
"attachmentId": "I39BinT2gsN9",
"title": "image.png",
"role": "image",
"mime": "image/png",
"position": 10,
"dataFileName": "11_Geo Map_image.png"
},
{
"attachmentId": "IeXU8SLZU7Oz",
@ -5404,7 +5380,7 @@
"role": "image",
"mime": "image/jpg",
"position": 10,
"dataFileName": "Geo map_image.jpg"
"dataFileName": "Geo Map_image.jpg"
},
{
"attachmentId": "Mx2xwNIk76ZS",
@ -5412,7 +5388,7 @@
"role": "image",
"mime": "image/png",
"position": 10,
"dataFileName": "11_Geo map_image.png"
"dataFileName": "12_Geo Map_image.png"
},
{
"attachmentId": "oaahbsMRbqd2",
@ -5420,7 +5396,7 @@
"role": "image",
"mime": "image/png",
"position": 10,
"dataFileName": "12_Geo map_image.png"
"dataFileName": "13_Geo Map_image.png"
},
{
"attachmentId": "pGf1p74KKGU4",
@ -5428,7 +5404,7 @@
"role": "image",
"mime": "image/jpg",
"position": 10,
"dataFileName": "13_Geo map_image.png"
"dataFileName": "14_Geo Map_image.png"
},
{
"attachmentId": "tfa1TRUatWEh",
@ -5436,7 +5412,7 @@
"role": "image",
"mime": "image/png",
"position": 10,
"dataFileName": "14_Geo map_image.png"
"dataFileName": "15_Geo Map_image.png"
},
{
"attachmentId": "USbvJ38T4AKA",
@ -5444,7 +5420,7 @@
"role": "image",
"mime": "image/png",
"position": 10,
"dataFileName": "15_Geo map_image.png"
"dataFileName": "16_Geo Map_image.png"
},
{
"attachmentId": "x6yBLIsY2LSv",
@ -5452,7 +5428,7 @@
"role": "image",
"mime": "image/png",
"position": 10,
"dataFileName": "16_Geo map_image.png"
"dataFileName": "17_Geo Map_image.png"
},
{
"attachmentId": "ZvTlu9WMd37z",
@ -5460,7 +5436,7 @@
"role": "image",
"mime": "image/png",
"position": 10,
"dataFileName": "17_Geo map_image.png"
"dataFileName": "18_Geo Map_image.png"
}
]
}

View File

@ -24,7 +24,7 @@
Trilium only, for example the admonitions.</li>
<li><a href="#root/_hidden/_options/_optionsCodeNotes">Code Notes</a>&nbsp;are
plain text and are represented internally as-is.</li>
<li><a href="../Note%20Types/Geo%20map.html">Geo map</a>&nbsp;notes contain
<li><a href="../Note%20Types/Geo%20Map.html">Geo map</a>&nbsp;notes contain
only minimal information (viewport, zoom) as a JSON.</li>
<li><a href="../Note%20Types/Canvas.html">Canvas</a>&nbsp;notes are represented
as JSON, with Trilium's own information alongside with&nbsp;<a href="Technologies%20used/Excalidraw.html">Excalidraw</a>'s

View File

@ -13,7 +13,7 @@
<h1 data-trilium-h1>Leaflet</h1>
<div class="ck-content">
<p>Leaflet is the library behind&nbsp;<a href="../../Note%20Types/Geo%20map.html">Geo map</a>&nbsp;notes.</p>
<p>Leaflet is the library behind&nbsp;<a href="../../Note%20Types/Geo%20Map.html">Geo map</a>&nbsp;notes.</p>
<h2>Plugins</h2>
<p>Leaflet is also highly customizable via external plugins.</p>
<p>Currently we use:</p>

View File

@ -122,7 +122,7 @@
<td>Easy for brainstorming ideas, by placing them in a hierarchical layout.</td>
</tr>
<tr>
<td><a class="reference-link" href="Note%20Types/Geo%20map.html">Geo map</a>
<td><a class="reference-link" href="Note%20Types/Geo%20Map.html">Geo map</a>
</td>
<td>Displays the children of the note as a geographical map, one use-case
would be to plan vacations. It even has basic support for tracks. Notes

Binary file not shown.

After

Width:  |  Height:  |  Size: 176 KiB

View File

@ -0,0 +1,298 @@
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="../../style.css">
<base target="_parent">
<title data-trilium-title>Geo Map</title>
</head>
<body>
<div class="content">
<h1 data-trilium-h1>Geo Map</h1>
<div class="ck-content">
<figure class="image">
<img style="aspect-ratio:892/675;" src="11_Geo Map_image.png" width="892"
height="675">
</figure>
<p>This note type displays the children notes on a geographical map, based
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>
<figure class="table">
<table>
<thead>
<tr>
<th>&nbsp;</th>
<th>&nbsp;</th>
<th>&nbsp;</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>
<img src="8_Geo Map_image.png">
</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>
<img src="10_Geo Map_image.png">
</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>
<li>Use the mouse wheel, two-finger gesture on a touchpad or the +/- buttons
on the top-left to adjust the zoom.</li>
</ul>
<p>The position on the map and the zoom are saved inside the map note and
restored when visiting again the note.</p>
<h2>Adding a marker using the map</h2>
<figure class="table">
<table>
<thead>
<tr>
<th>&nbsp;</th>
<th>&nbsp;</th>
<th>&nbsp;</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>&nbsp;</td>
<td>To create a marker, first navigate to the desired point on the map. Then
press the
<img src="16_Geo Map_image.png">button on the top-right of the map.&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="2_Geo Map_image.png">) in the top-right of the map.</td>
</tr>
<tr>
<td>2</td>
<td>
<img src="3_Geo Map_image.png">
</td>
<td>Once pressed, the map will enter in the insert mode, as illustrated by
the notification.&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 src="9_Geo Map_image.png">
</td>
<td>Enter the name of the marker/note to be created.</td>
</tr>
<tr>
<td>4</td>
<td>
<img src="17_Geo Map_image.png">
</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>
<h2>How the location of the markers is stored</h2>
<p>The location of a marker is stored in the <code>#geolocation</code> attribute
of the child notes:</p>
<p>
<img src="18_Geo Map_image.png">
</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>
<p>It's possible to reposition existing markers by simply drag and dropping
them to the new destination.</p>
<p>As soon as the mouse is released, the new position is saved.</p>
<p>If moved by mistake, there is currently no way to undo the change. If
the mouse was not yet released, it's possible to force a refresh of the
page (<kbd>Ctrl</kbd>+<kbd>R</kbd> ) to cancel it.</p>
<h2>Interaction with the markers</h2>
<ul>
<li>Hovering over a marker will display the content of the note it belongs
to.
<ul>
<li>Clicking on the note title in the tooltip will navigate to the note in
the current view.</li>
</ul>
</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 allowing:
<ul>
<li>Opening the note in a new tab, split or window.</li>
<li>Opening the location using an external application (if the operating system
supports it).</li>
<li>Removing the marker from the map, which will remove the <code>#geolocation</code> attribute
of the note. To add it back again, the coordinates have to be manually
added back in.</li>
</ul>
</li>
</ul>
<h2>Icon and color of the markers</h2>
<p>
<img src="Geo Map_image.jpg" alt="image">
</p>
<p>The markers will have the same icon as the note.</p>
<p>It's possible to add a custom color to a marker by assigning them a <code>#color</code> attribute
such as <code>#color=green</code>.</p>
<h2>Adding the coordinates manually</h2>
<p>In a nutshell, create a child note and set the <code>#geolocation</code> attribute
to the coordinates.</p>
<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>
<figure class="table">
<table>
<thead>
<tr>
<th>&nbsp;</th>
<th>&nbsp;</th>
<th>&nbsp;</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>
<img src="13_Geo Map_image.png">
</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;
<br>
<br>Simply click on the first item displaying the coordinates and they will
be copied to clipboard.&nbsp;&nbsp;&nbsp;
<br>
<br>Then paste the value inside the text box into the <code>#geolocation</code> attribute
of a child note of the map (don't forget to surround the value with a <code>"</code> character).</td>
</tr>
<tr>
<td>2</td>
<td>
<img src="5_Geo Map_image.png">
</td>
<td>In Trilium, create a child note under the map.</td>
</tr>
<tr>
<td>3</td>
<td>
<img src="12_Geo Map_image.png">
</td>
<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.
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>
<figure class="table">
<table>
<thead>
<tr>
<th>&nbsp;</th>
<th>&nbsp;</th>
<th>&nbsp;</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>
<img src="1_Geo Map_image.png">
</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 src="Geo Map_image.png">
</td>
<td>The address will be visible in the top-left of the screen, in the place
of the search bar.&nbsp;&nbsp;&nbsp;
<br>
<br>Select the coordinates and copy them into the clipboard.</td>
</tr>
<tr>
<td>3</td>
<td>
<img src="6_Geo Map_image.png">
</td>
<td>Simply paste the value inside the text box into the <code>#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>
<figure
class="table">
<table>
<thead>
<tr>
<th>&nbsp;</th>
<th>&nbsp;</th>
<th>&nbsp;</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>
<img src="4_Geo Map_image.png">
</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>
<img src="15_Geo Map_image.png">
</td>
<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>
</tr>
<tr>
<td>3</td>
<td>
<img src="7_Geo Map_image.png">
</td>
<td>When going back to the map, the track should now be visible.&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>
<h2>Troubleshooting</h2>
<p>
<img src="14_Geo Map_image.png">
</p>
<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>
</div>
</div>
</body>
</html>

View File

@ -1,285 +0,0 @@
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="../../style.css">
<base target="_parent">
<title data-trilium-title>Geo map</title>
</head>
<body>
<div class="content">
<h1 data-trilium-h1>Geo map</h1>
<div class="ck-content">
<h2>Creating a new geo map</h2>
<table>
<thead>
<tr>
<th></th>
<th></th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>
<img src="8_Geo map_image.png">
</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>
<img src="10_Geo map_image.png">
</td>
<td>By default the map will be empty and will show the entire world.</td>
</tr>
</tbody>
</table>
<h2>Repositioning the map</h2>
<ul>
<li>Click and drag the map in order to move across the map.</li>
<li>Use the mouse wheel, two-finger gesture on a touchpad or the +/- buttons
on the top-left to adjust the zoom.</li>
</ul>
<p>The position on the map and the zoom are saved inside the map note and
restored when visiting again the note.</p>
<h2>Adding a marker using the map</h2>
<table>
<thead>
<tr>
<th></th>
<th></th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td></td>
<td>To create a marker, first navigate to the desired point on the map. Then
press the
<img src="15_Geo map_image.png">button on the top-right of the map.&nbsp;&nbsp;
<br>
<br>If the button is not visible, make sure the button section is visible
by pressing the chevron button (
<img src="2_Geo map_image.png">) in the top-right of the map.</td>
</tr>
<tr>
<td>2</td>
<td>
<img src="3_Geo map_image.png">
</td>
<td>Once pressed, the map will enter in the insert mode, as illustrated by
the notification.&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 src="9_Geo map_image.png">
</td>
<td>Enter the name of the marker/note to be created.</td>
</tr>
<tr>
<td>4</td>
<td>
<img src="16_Geo map_image.png">
</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>
<h2>How the location of the markers is stored</h2>
<p>The location of a marker is stored in the <code>#geolocation</code> attribute
of the child notes:</p>
<p>
<img src="17_Geo map_image.png">
</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>
<p>It's possible to reposition existing markers by simply drag and dropping
them to the new destination.</p>
<p>As soon as the mouse is released, the new position is saved.</p>
<p>If moved by mistake, there is currently no way to undo the change. If
the mouse was not yet released, it's possible to force a refresh of the
page (<kbd>Ctrl</kbd>+<kbd>R</kbd> ) to cancel it.</p>
<h2>Interaction with the markers</h2>
<ul>
<li>Hovering over a marker will display the content of the note it belongs
to.
<ul>
<li>Clicking on the note title in the tooltip will navigate to the note in
the current view.</li>
</ul>
</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 allowing:
<ul>
<li>Opening the note in a new tab, split or window.</li>
<li>Opening the location using an external application (if the operating system
supports it).</li>
<li>Removing the marker from the map, which will remove the <code>#geolocation</code> attribute
of the note. To add it back again, the coordinates have to be manually
added back in.</li>
</ul>
</li>
</ul>
<h2>Icon and color of the markers</h2>
<p>
<img src="Geo map_image.jpg" alt="image">
</p>
<p>The markers will have the same icon as the note.</p>
<p>It's possible to add a custom color to a marker by assigning them a <code>#color</code> attribute
such as <code>#color=green</code>.</p>
<h2>Adding the coordinates manually</h2>
<p>In a nutshell, create a child note and set the <code>#geolocation</code> attribute
to the coordinates.</p>
<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>
<img src="12_Geo map_image.png">
</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;
<br>
<br>Simply click on the first item displaying the coordinates and they will
be copied to clipboard.&nbsp;&nbsp;
<br>
<br>Then paste the value inside the text box into the <code>#geolocation</code> attribute
of a child note of the map (don't forget to surround the value with a <code>"</code> character).</td>
</tr>
<tr>
<td>2</td>
<td>
<img src="5_Geo map_image.png">
</td>
<td>In Trilium, create a child note under the map.</td>
</tr>
<tr>
<td>3</td>
<td>
<img src="11_Geo map_image.png">
</td>
<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.
Press Enter to confirm and the map should now be updated to contain the
new note.</td>
</tr>
</tbody>
</table>
<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 src="1_Geo map_image.png">
</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 src="Geo map_image.png">
</td>
<td>The address will be visible in the top-left of the screen, in the place
of the search bar.&nbsp;&nbsp;
<br>
<br>Select the coordinates and copy them into the clipboard.</td>
</tr>
<tr>
<td>3</td>
<td>
<img src="6_Geo map_image.png">
</td>
<td>Simply paste the value inside the text box into the <code>#geolocation</code> attribute
of a child note of the map and then it should be displayed on the map.</td>
</tr>
</tbody>
</table>
<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>
<img src="4_Geo map_image.png">
</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>
<img src="14_Geo map_image.png">
</td>
<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>
</tr>
<tr>
<td>3</td>
<td>
<img src="7_Geo map_image.png">
</td>
<td>When going back to the map, the track should now be visible.&nbsp;&nbsp;
<br>
<br>The start and end points of the track are indicated by the two blue markers.</td>
</tr>
</tbody>
</table>
<h2>Troubleshooting</h2>
<p>
<img src="13_Geo map_image.png">
</p>
<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>
</div>
</div>
</body>
</html>

File diff suppressed because one or more lines are too long

Before

Width:  |  Height:  |  Size: 15 KiB

File diff suppressed because one or more lines are too long

Before

Width:  |  Height:  |  Size: 19 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 474 B

View File

@ -273,7 +273,7 @@
</li>
<li><a href="User%20Guide/Note%20Types/Mind%20Map.html" target="detail">Mind Map</a>
</li>
<li><a href="User%20Guide/Note%20Types/Geo%20map.html" target="detail">Geo map</a>
<li><a href="User%20Guide/Note%20Types/Geo%20Map.html" target="detail">Geo Map</a>
</li>
</ul>
</li>