JS

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 source code.

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 – for setting up the Map view, including custom Basemaps and Types.
  • Veiwer Options – enabling and configuring Viewer features, including the Image Gallery, Overlay Filter, Marker Clustering and Elevation Profile.
  • 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.

// 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:

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:

<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.

/* 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 / Chrome) 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 and Leaflet, 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:

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

// Get the Leaflet Map objectconst 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:

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

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

// Create a toggle buttonconst 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);

!TIP Check out the Waymark WordPress plugin source code for an example of integrating Waymark JS with a WordPress.