Travel & Notes - Installation guide

  1. Where to install Travel & Notes?
  2. Installation Guide for Nulls
  3. Installation guide for geeks
    1. What to do in the HTML file?
    2. Some additional explanations on Javascript
    3. The contents of the TravelNotesConfig.json file
    4. The contents of the TravelNotesLayers.json file
    5. The contents of the TravelNotesNoteDialogFR.json and TravelNotesNoteDialogEN.json file
    6. The contents of the configuration file that can be loaded with the button 📂 in the notes dialog
    7. "Search OpenStreetMap" settings
  4. Using the viewer
  5. Translations

1. Where to install Travel & Notes?

For security reasons, it is no longer possible to use Travel & Notes from a computer disc. It is essential to go through either a remote web server, or a local LAMP or MAMP web server. See https://www.mozilla.org/en-US/security/advisories/mfsa2019-21/#CVE-2019-11730

2. Installation Guide for Nulls

No great computer skills? Download the last version, and install the contents of the docs/demo/ directory in a directory on your server and open the index.html file. That's all :-).

3. Installation guide for geeks

3.1. What to do in the HTML file?

Although Travel & Notes uses Leaflet to display the map, it is not necessary to install this one because both Leaflet's stylesheets and Javascript are integrated into Travel Notes.

<head>
    ...
    <link rel="stylesheet" href="TravelNotes.min.css" />
    ...
</head>

And in the <body> load TravelNotes and TravelNotes plugins 

<body>
    ...
    <script src="TravelNotes.min.js"></script>
    <noscript>Oh oh. Javascript is not enabled. It's impossible to display this page without javascript.</noscript>
    <!-- 
        Route providers scripts for Mapbox, Stadia Maps (MapzenValhalla), GraphHopper and OpenRouteService have only to be installed 
        if you have an API key for Mapbox, Stadia Maps, GraphHopper or openRouteService.
        Route providers scripts for OSRM, public transport and polyline have only to be installed 
        if you will work with these providers.  -->
    <script src="TravelNotesProviders/MapboxRouteProvider.min.js"></script>
    <script src="TravelNotesProviders/MapzenValhallaRouteProvider.min.js"></script>
    <script src="TravelNotesProviders/GraphHopperRouteProvider.min.js"></script>
    <script src="TravelNotesProviders/OpenRouteServiceRouteProvider.min.js"></script>
    <script src="TravelNotesProviders/OSRMRouteProvider.min.js"></script>
    <script src="TravelNotesProviders/PublicTransportRouteProvider.min.js"></script>
    <script src="TravelNotesProviders/PolylineRouteProvider.min.js"></script>
</body>

Travel & Notes will automatically create the map and all necessary controls.

3.2. Some additional explanations on Javascript

See the JS code documentation for more information.

Note, however, that only the TravelNotes object is accessible from additional JS code (via window.TaN - window.L.TravelNotes is deprecated and removed from the code).

If you want to use other objects, you need to download the sources and import them into your code as EcmaScript modules.

3.3. The contents of the TravelNotesConfig.json file

This file is used to modify certain behavior of TravelNotes. Be careful when editing this file. You must follow all the rules for writing json files.

The contents of the TravelNotesConfig.json file:

3.4. The contents of the TravelNotesLayers.json file

This file contains the definitions of background maps of the "Maps" toolbar These definitions can be adapted.

A sample file with two different background maps, one with the Ferraris map of Belgium in 1771, the other with the Thunderforest OpenCycleMap map

[
    {
        "service":"wms",
        "url":"http://geoservices.wallonie.be/arcgis/services/CARTES_ANCIENNES/FERRARIS/MapServer/WMSServer",
        "wmsOptions":
        {
            "layers":"0",
            "format":"image/png",
            "transparent":true
        },
        "bounds":[ [ 49.15, 2.56 ], [ 50.95, 6.49 ] ],
        "minZoom":7,
        "name":"Service Public de Wallonie - Ferraris map 1770 - 1776",
        "toolbar":
        {
            "text":"1771",
            "color":"black",
            "backgroundColor":"white"
        },
        "providerName":"SPW",
        "providerKeyNeeded":false,
        "attribution":"| <a href='http://geoportail.wallonie.be/home.html' target='_blank'>Service public de Wallonie (SPW)</a>",
        "getCapabilitiesUrl":"https://geoservices.wallonie.be/arcgis/services/CARTES_ANCIENNES/FERRARIS/MapServer/WMSServer?REQUEST=GetCapabilities&SERVICE=WMS"
    },
    {
        "service":"wmts",
        "url":"https://{s}.tile.thunderforest.com/cycle/{z}/{x}/{y}.png?apikey={providerKey}",
        "name":"Thunderforest - OpenCycleMap",
        "toolbar":
        {
            "text":"🚴",
            "color":"black",
            "backgroundColor":"white"
        },
        "providerName":"Thunderforest",
        "providerKeyNeeded":true,
        "attribution":"| Tiles courtesy of <a href='http://www.thunderforest.com/' target='_blank' title='Andy Allan'>Andy Allan</a> "
    }
]

Some explanations on the content of the file for each background map

3.5. The contents of the TravelNotesNoteDialogFR.json and TravelNotesNoteDialogEN.json file

This file contains the definitions of the buttons and list of predefined icons of the note editing box. These definitions can be adapted to your needs.

Sample file with 3 buttons and 2 predefined icons:

{ "editionButtons" : 
    [
        {
            "title" : "<span class='TravelNotes-Note-WhiteRed' title='Insert a red background'>Red</span>",
            "htmlBefore" : "<span class='TravelNotes-Note-WhiteRed'>",
            "htmlAfter" : "</span>"
        }, 
        {
            "title" : "<span class='TravelNotes-Note-WhiteGreen' title='Insert a green background'>Green</span>",
            "htmlBefore" : "<span class='TravelNotes-Note-WhiteGreen'>",
            "htmlAfter" : "</span>"
        }, 
        {
            "title": "Ø",
            "htmlBefore": "Ø"
        }
    ],
    "preDefinedIconsList" :
    [
        {
            "name" : "Bikes allowed",
            "icon" : "<div class='TravelNotes-MapNote TravelNotes-MapNoteCategory-0005'></div>",
            "tooltip" : "Bikes allowed",
            "width" : 40,
            "height" : 40
        },
        {
            "name" : "Bus station",
            "icon" : "<div class='TravelNotes-MapNote TravelNotes-MapNoteCategory-0006'></div>",
            "tooltip" : "Bus station",
            "width" : 40,
            "height" : 40
        }
    ]
}

Two collections of objects must be present in the file: "editionButtons" for the additional buttons and "preDefinedIconsList" for the predefined icons. These collections may be empty but must be present.

Each object in the "editionButtons" collection has two or three properties;

Each object in the "preDefinedIconsList" collection has five properties:

3.6. The contents of the configuration file that can be loaded with the button 📂 in the notes dialog

The organization of this file is identical to the files TravelNotesNoteDialogFR.json and TravelNotesNoteDialogEN.json

3.7. "Search OpenstreetMap" settings

The TravelNotesSearchDictionaryFR.csv (in French) or TravelNotesSearchDictionaryEN.csv (in English) file contains all the information needed to configure the search in OpenStreetMap. The file can be edited with LibreOffice or any other program capable of reading CSV files. The file must be saved with Unicode as the character set and encoded in utf-8. the semicolon must be used as a separator.

The tree structure as it is visible in Travel & Notes:

And the contents of the file with the same tree structure (cells with a light red background):

The cells with a light yellow, light green or light blue background represent the tags of the objects to be searched in OpenStreetMap.

4. Using the viewer

The viewer allows you to view files that have been made with TravelNotes. It does not have controls or menus and therefore does not allow modification of a travel. Its interest lies in the fact that it does not use too much JavaScript and that it is lighter than TravelNotes

It installs like Travel & Notes, with two tags <link> and two tags <script> one for Leaflet and the other for the viewer.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta name="ROBOTS" content="NOINDEX, NOFOLLOW" />
        <title>Travel & Notes by wwwouaiebe</title>
        <link rel="stylesheet" href="leaflet/leaflet.css" />
        <link rel="stylesheet" href="TravelNotesViewer.min.css" />
    </head>
    <body>
        <script src="leaflet/leaflet.js"></script><noscript>Oh oh. Javascript is not enabled. It's impossible to display this page without javascript.</noscript>
        <script src="TravelNotesViewer.min.js"></script>
    </body>
</html>

The TravelNotesViewer.min.css and TravelNotesViewer.min.js files as well as the configuration JSON files are in the "viewer" sub-directory

5. Translations

Travel & Notes is translated into 'fr' and 'en'. If you want to translate Travel & Notes into another language, copy the TravelNotesEN.json file and rename it according to the language used. Then, edit this file and translate all the lines in the desired language. To load Travel & Notes in another language, add to the url lng = and the language to use (example to use Travel & Notes in english: https://wwwouaiebe.github.io/TravelNotes/?lng=en.)

The organization of these files is as close as possible to that of GNU getText