diff --git a/docs/content/5.customise.md b/docs/content/5.customise.md index d0f3ad8..0d5c965 100644 --- a/docs/content/5.customise.md +++ b/docs/content/5.customise.md @@ -23,6 +23,93 @@ Be sure to check out the full list of: - **[Editor Options](editor#options)** – to customise the Editor Mode, including the GeoJSON output and confirmation messages. +### Localization + +All text displayed by Waymark JS is fully customisable and can be translated/localised into any language. + +You can modify the default strings using the `config.language` option when initialising the Map. In the example above, all text displayed by the Editor user interface will be in French. + +```javascript +// Add translations for the Editor +config.language = { + action_fullscreen_activate: "Plein écran", + action_fullscreen_deactivate: "Sortir du plein écran", + action_locate_activate: "Montre-moi où je suis", + + // Etc.. + + show_direction: "Montrer la direction", + reverse_direction: "Inverser la direction", + sleep_wake_message: "Cliquez ou survolez pour réveiller", +}; + +// Initialise with our options +editor.init(config); +``` + +The full list of localisation strings is: + +```javascript +const english = { + // Common (Viewer & Editor) + action_fullscreen_activate: "View Fullscreen", + action_fullscreen_deactivate: "Exit Fullscreen", + action_locate_activate: "Show me where I am", + action_zoom_in: "Zoom in", + action_zoom_out: "Zoom out", + label_total_length: "Total Length: ", + label_max_elevation: "Max. Elevation: ", + label_min_elevation: "Min. Elevation: ", + label_ascent: "Total Ascent: ", + label_descent: "Total Descent: ", + + // Editor only + add_line_title: "Draw a Line", + add_photo_title: "Upload an Image", + add_marker_title: "Place a Marker", + add_rectangle_title: "Draw a Rectangle", + add_polygon_title: "Draw a Polygon", + add_circle_title: "Draw a Circle", + upload_file_title: + "Read Lines and Markers from file (GPX/KML/GeoJSON supported, which most apps should Export to)", + action_duplicate: "Duplicate", + action_delete: "Delete", + action_edit: "Edit", + action_edit_done: "Finish editing", + action_upload_image: "Upload Image", + object_title_placeholder: "Title", + object_image_placeholder: "Image URL", + object_description_placeholder: "Description", + object_type_label: "Type", + marker_latlng_label: "Lat,Lng", + action_delete_confirm: "Are you sure you want to delete this", + action_search_placeholder: "Search...", + object_label_marker: "Marker", + object_label_line: "Line", + object_label_shape: "Shape", + object_label_marker_plural: "Markers", + object_label_line_plural: "Lines", + object_label_shape_plural: "Shapes", + error_message_prefix: "Waymark Error", + info_message_prefix: "Waymark Info", + debug_message_prefix: "Waymark Debug", + error_file_type: "This file type is not supported.", + error_file_conversion: "Could not convert this file to GeoJSON.", + error_file_upload: "File upload error.", + error_photo_meta: "Could not retrieve Image metadata.", + info_exif_yes: "Image location metadata (EXIF) detected!", + info_exif_no: "Image location metadata (EXIF) NOT detected.", + error_no_wpmedia: "WordPress Media Library not found", + no_direction: "No Direction", + show_direction: "Show Direction", + reverse_direction: "Reverse Direction", + sleep_wake_message: "Click or Hover to Wake", +}; +``` + +> [!TIP] +> If a translation is not provided, the default English string will be used. + ## Styling Most elements can be styled using CSS and have sensibly named `waymark-` classes. diff --git a/docs/public/examples/editor-pub.html b/docs/public/examples/editor-pub.html deleted file mode 100644 index b2f029e..0000000 --- a/docs/public/examples/editor-pub.html +++ /dev/null @@ -1,64 +0,0 @@ - - - - - - - Waymark | Editor | Pub - - - - - - - - - - - -
- - - - diff --git a/docs/public/examples/editor-route.html b/docs/public/examples/editor-route.html deleted file mode 100644 index 43a1ae3..0000000 --- a/docs/public/examples/editor-route.html +++ /dev/null @@ -1,99 +0,0 @@ - - - - - - - Waymark | Editor | Route - - - - - - - - - - -
- - - - diff --git a/docs/public/examples/editor/custom.html b/docs/public/examples/editor/custom.html index 8c2433f..18f8265 100644 --- a/docs/public/examples/editor/custom.html +++ b/docs/public/examples/editor/custom.html @@ -1,5 +1,5 @@ - + @@ -28,7 +28,7 @@ color: #fff; } #waymark-map button.canada-toggle small { - display: block; + display: block; } #waymark-map.oh-canada button.canada-toggle { /* Invert colours */ @@ -42,10 +42,14 @@ } /* Target by the "Beer" Type Key */ - #waymark-map.oh-canada .waymark-marker.waymark-marker-beer .waymark-marker-background { + #waymark-map.oh-canada + .waymark-marker.waymark-marker-beer + .waymark-marker-background { background-color: white !important; } - #waymark-map.oh-canada .waymark-marker.waymark-marker-beer .waymark-icon-text { + #waymark-map.oh-canada + .waymark-marker.waymark-marker-beer + .waymark-icon-text { color: red !important; } @@ -69,8 +73,8 @@ /* Hide */ .leaflet-bottom.leaflet-right, #waymark-data { - display: none; - } + display: none; + } @@ -92,7 +96,7 @@ // Disable Save Confirmation config.editor_options = { - confirm_delete: false + confirm_delete: false, }; // Iterate over Marker Types @@ -108,11 +112,72 @@ line_type.line_colour = "#ff0000"; }); + // French Translations + + config.language = { + action_fullscreen_activate: "Plein écran", + action_fullscreen_deactivate: "Sortir du plein écran", + action_locate_activate: "Montre-moi où je suis", + action_zoom_in: "Zoomer", + action_zoom_out: "Dézoomer", + label_total_length: "Longueur totale: ", + label_max_elevation: "Altitude max: ", + label_min_elevation: "Altitude min: ", + label_ascent: "Dénivelé positif: ", + label_descent: "Dénivelé négatif: ", + //Editor + add_line_title: "Dessiner une ligne", + add_photo_title: "Télécharger une image", + add_marker_title: "Placer un marqueur", + add_rectangle_title: "Dessiner un rectangle", + add_polygon_title: "Dessiner un polygone", + add_circle_title: "Dessiner un cercle", + upload_file_title: + "Lire des lignes et des marqueurs à partir d'un fichier (GPX/KML/GeoJSON pris en charge, que la plupart des applications devraient exporter)", + action_duplicate: "Dupliquer", + action_delete: "Supprimer", + action_edit: "Modifier", + action_edit_done: "Terminer l'édition", + action_upload_image: "Télécharger une image", + object_title_placeholder: "Titre", + object_image_placeholder: "URL de l'image", + object_description_placeholder: "Description", + object_type_label: "Type", + marker_latlng_label: "Lat,Lng", + action_delete_confirm: "Êtes-vous sûr de vouloir supprimer ceci", + action_search_placeholder: "Rechercher...", + object_label_marker: "Marqueur", + object_label_line: "Ligne", + object_label_shape: "Forme", + object_label_marker_plural: "Marqueurs", + object_label_line_plural: "Lignes", + object_label_shape_plural: "Formes", + error_message_prefix: "Erreur Waymark", + info_message_prefix: "Info Waymark", + debug_message_prefix: "Déboguer Waymark", + error_file_type: "Ce type de fichier n'est pas pris en charge.", + error_file_conversion: + "Impossible de convertir ce fichier en GeoJSON.", + error_file_upload: "Erreur de téléchargement de fichier.", + + error_photo_meta: + "Impossible de récupérer les métadonnées de l'image.", + info_exif_yes: + "Métadonnées de localisation de l'image (EXIF) détectées!", + info_exif_no: + "Métadonnées de localisation de l'image (EXIF) NON détectées.", + error_no_wpmedia: "Bibliothèque de médias WordPress introuvable", + no_direction: "Pas de direction", + show_direction: "Montrer la direction", + reverse_direction: "Inverser la direction", + sleep_wake_message: "Cliquez ou survolez pour réveiller", + }; + // Initialise with our options editor.init(config); // The Map is ready after initialisation - + // The Leaflet Map const map = editor.map; @@ -140,15 +205,14 @@ // Create a toggle button const toggle_button = jQuery("