---
title: Customise
description: Watmark JS was designed to be customisable and flexible.
---

# Customise

Watmark JS was designed to be customisable and flexible.

In addition to the available options, you can customise Waymark JS using CSS and JavaScript.

> [!TIP]
> The Map above has lots of (Patriotic) customisations to help illustrate some of the concepts outlined here. Be sure to view the <a href="/examples/editor/custom.html" target="_blank">source code</a>.

## Options

Waymark has lots of options so you can create custom Maps with Overlays to suit your needs.

Be sure to check out the full list of:

- **[Map Options](map#map-options)** &ndash; for setting up the Map view, including custom [Basemaps](map#basemaps) and [Types](map#types).
- **[Veiwer Options](viewer#options)** &ndash; enabling and configuring Viewer features, including the Image Gallery, Overlay Filter, Marker Clustering and Elevation Profile.

- **[Editor Options](editor#options)** &ndash; 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.

For example, the HTML for a "Pub" Marker looks like this:

```html
<div
  class="waymark-marker waymark-marker-pub waymark-marker-marker waymark-marker-medium"
>
  <div class="waymark-marker-background" style="background:#70af00;"></div>
  <div style="color:#ffffff;" class="waymark-marker-icon waymark-icon-text">
    🍻
  </div>
</div>
```

We can use the `.waymark-marker-pub` class to target the Pub Marker, and the `.waymark-marker-background` and `.waymark-marker-icon` classes to style the Marker's content.

```css
/* Target by the "Pub" Type Key  */
.waymark-marker.waymark-marker-pub .waymark-marker-background {
  /* Marker Background Colour */
  background-color: white !important;
}
.waymark-marker.waymark-marker-pub .waymark-icon-text {
  /* Marker Icon Colour */
  color: red !important;
}
```

> [!TIP]
> Use your browser’s inspector ([Firefox](https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/Open_the_Inspector) / [Chrome](https://developer.chrome.com/docs/devtools/open/)) to explore the Markup and Styling of Waymark JS elements.

## Interaction

Once the Map is initialised using the `init` method, you can interact with it using JavaScript.

Because Waymark JS utilises [jQuery](https://api.jquery.com/) and [Leaflet](https://leafletjs.com/reference.html), you can also use these APIs to interact with the Map and its elements.

The Leaflet Map object is available through the `map` property on the `Waymark_Map` Instance. For example, to add an event handler to execute each time an Overlay popup is displayed:

```javascript
// Once the map is initialised, i.e. after
// editor.init({ ... });

// Get the Leaflet Map object
const map = editor.map;

// Leaflet Popup
map.on("popupopen", function (e) {
  // Get the layer from Leaflet
  const layer = e.popup._source;

  // Remove all active classes
  jQuery(".waymark-marker").removeClass("active");

  // Get the container with jQuery
  const marker = jQuery(layer._icon);

  // Add active class
  marker.addClass("active");
});
```

Using jQuery, we can also interact with the Map and its elements. For example, to add a class to the Map container and create a toggle button:

```javascript
// Get the container with jQuery
const map_container = jQuery("#waymark-map");

// Add a class to the container
map_container.addClass("oh-canada");

// Create a toggle button
const toggle_button = jQuery("<button />")
  .addClass("canada-toggle")
  .html("🇨🇦🇨🇦🇨🇦<small>Click Me!</small>")
  .on("click", () => {
    map_container.toggleClass("oh-canada");
  });

// Append to the container
map_container.append(toggle_button);
```

## Callback Function

Waymark JS provides the _global_ callback function `waymark_loaded_callback` that is executed every time a Map is [initialised](viewer#initialisation). This accepts a single argument, which is the Waymark Map instance.

Once defined on your page (accessible in the global scope), we can use the instance object to perform additional actions. For example, we can add a custom class to the Map container:

```javascript
// Define the callback function
function waymark_loaded_callback(instance) {
  // Get the Map container
  const map_container = instance.map.getContainer();

  // Add a custom class
  map_container.classList.add("oh-canada");
}
```

> [!TIP]
> Check out the Waymark WordPress plugin [source code](https://github.com/OpenGIS/Waymark/tree/master/assets/js) and the [Map First](https://github.com/OpenGIS/Map-First) WordPress theme for an example of integrating Waymark JS with WordPress.
