Travel & Notes - Guide d'installation

  1. Où installer Travel & Notes?
  2. Guide d'installation pour les null
  3. Guide d'installation pour les geeks
    1. Que faut-il faire dans le fichier HTML?
    2. Quelques explications complémentaires sur le Javascript
    3. Le contenu du fichier TravelNotesConfig.json
    4. Le contenu du fichier TravelNotesLayers.json
    5. Le contenu des fichiers TravelNotesNoteDialogFR.json et TravelNotesNoteDialogEN.json
    6. Le contenu du fichier de configuration pouvant être chargé avec le bouton 📂 dans la boite d'édition des notes
    7. Configurer "Rechercher dans OpenStreetMap"
  4. Utiliser le viewer
  5. Traductions

1. Où installer Travel & Notes?

Pour des raisons de sécurité, il n'est plus possible d'utiliser Travel & Notes depuis le disque d'un ordinateur. Il est indispensable de passer par l'intermédiaire soit d'un serveur web distant, soit d'un serveur web local de type LAMP or MAMP. Voir https://www.mozilla.org/en-US/security/advisories/mfsa2019-21/#CVE-2019-11730

2. Guide d'installation pour les null

Pas de grandes connaissances informatiques? Téléchargez la dernière version, copiez le contenu du répertoire docs/demo/ dans un répertoire sur votre serveur et ouvrez le fichier index.html. That's all :-).

3. Guide d'installation pour les geeks

3.1. Que faut-il faire dans le fichier HTML?

Bien que Travel & Notes utilise Leaflet pour afficher la carte, il n'est pas nécessaire d'installer celui-ci car tant les feuilles de style que le Javascript de Leaflet sont intégrés dans TravelNotes.

Dans le <head> du fichier, chargez la feuille de style de TravelNotes

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

Et dans le <body> chargez les Javascript de TravelNotes et des plugins de TravelNotes

<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 créera automatiquement la carte et tous les contrôles nécessaires.

3.2. Quelques explications complémentaires sur le Javascript

Voyez la documentation du code JS pour plus d'informations.

Notez cependant que seul l'objet TravelNotes est accessible depuis du code JS additionnel (via window.TaN - window.L.TravelNotes est déprécié et a été retiré du code).

Si vous désirez utiliser d'autres objets, vous devez télécharger les sources et les importer dans votre code comme des modules EcmaScript.

3.3. Le contenu du fichier TravelNotesConfig.json

Ce fichier permet de modifier certains comportements de TravelNotes. Soyez prudent quand vous modifiez ce fichier. Vous devez suivre toutes les règles d'écriture des fichiers json.

Le contenu du fichier TravelNotesConfig.json:

3.4. Le contenu du fichier TravelNotesLayers.json

Ce fichier contient les définitions des fonds de carte de la barre d'outils "Cartes" Ces définitions peuvent être adaptées.

Un exemple de fichier avec deux fond de carte différents, l'un avec la carte de Ferraris de la Belgique en 1771, l'autre avec la carte de OpenCycleMap de Thunderforest

[
	{
		"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> "
	}
]

Quelques explications sur le contenu du fichier pour chaque fond de carte

3.5. Le contenu des fichiers TravelNotesNoteDialogFR.json et TravelNotesNoteDialogEN.json

Ce fichier contient les définitions des boutons et de la liste des icônes prédéfinies de la boite d'édition des notes. Ces définitions peuvent être adaptées à vos besoins.

Exemple de fichier comprenant 3 boutons et 2 icônes prédéfinies:

{ "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
		}
	]
}

Deux collections d'objets doivent être présentes dans le fichier : "editionButtons" pour les boutons supplémentaires et "preDefinedIconsList" pour les icônes prédéfinies. Ces collections peuvent être vides mais doivent être présentes.

Chaque objet de la collection "editionButtons" a deux ou trois propriétés;

Chaque objet de la collection "preDefinedIconsList" a cinq propriétés:

3.6. Le contenu du fichier de configuration pouvant être chargé avec le bouton 📂 dans la boite d'édition des notes

L'organisation de ce fichier est identique aux fichiers TravelNotesNoteDialogFR.json et TravelNotesNoteDialogEN.json

3.7. Configurer "Rechercher dans OpenStreetMap"

Le fichier TravelNotesSearchDictionaryFR.csv (en français) ou TravelNotesSearchDictionaryEN.csv (en anglais) contient toutes les informations nécessaires pour configurer la recherche dans OpenStreetMap. Le fichier peut être édité avec LibreOffice ou n'importe quel autre programme capable de lire les fichiers CSV. Le fichier doit être sauvé avec Unicode comme jeu de caractères et encodé en utf-8. le point-virgule doit être utilisé comme séparateur.

L'arborescence telle qu'elle est visible dans Travel & Notes:

Et le contenu du fichier avec la même arborescence ( les cellules avec un fond rouge clair ):

Les cellules avec un fond jaune clair, vert clair ou bleu clair repreésentent les tags des objets à rechercher dans OpenStreetMap.

4. Utiliser le viewer

Le viewer permet de visualiser des fichiers qui ont été réalisés avec Travel & Notes. Il ne possède pas de contrôles ni de menus et ne permet donc pas la modification d'un voyage. Son intérêt réside dans le fait qu'il n'utilise pas trop de Javascript et qu'il est plus léger que TravelNotes.

Il s'installe comme Travel & Notes, avec deux balises <link> et deux balises <script>, une pour Leaflet et l'autre pour le 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>

Les fichiers TravelNotesViewer.min.css et TravelNotesViewer.min.js ainsi que les fichiers JSON de configuration se trouvent dans le sous-répertoire "viewer".

5. Traductions

Travel & Notes est traduit en 'fr' et en 'en'. Si vous désirez traduire Travel & Notes dans une autre langue, copiez le fichier TravelNotesEN.json et renommez-le en fonction de la langue utilisée. Ensuite, éditez ce fichier et traduisez toutes les lignes msgstr dans la langue souhaitée. Pour charger Travel & Notes dans une autre langue, ajoutez à l'url lng= et la langue à utiliser (exemple pour utiliser Travel & Notes en en: https://wwwouaiebe.github.io/TravelNotes/?lng=en.

L'organisation de ces fichiers est la plus proche possible de celle de GNU getText