Editor

The Editor Mode allows users to create and edit Overlays (Markers, Lines, and Shapes) on a Map. Each Overlay can be customised with a Title, Description, Image URL and categorised using Types.

Every time the Map is edited, the Map is converted to GeoJSON and output into (the inner HTML of) a <textarea> element. This can be used to easily integrate Waymark JS with a form. You can specify the container ID using the data_div_id option. The default <textarea id="waymark-data"> will be created automatically if the container is not found.

!IMPORTANT Waymark JS does not currently handle reading from file. You can see how Waymark JS can be integrated with a WordPress back-end to handle this here.

Creation

// Create an Editor Instanceconst editor = window.Waymark_Map_Factory.editor();

Options

These options, provided in the editor_options object, are used to customise the Editor Mode.

Option	Values	Description	Example
`confirm_delete`	`1`/`0`	Whether to show a confirmation message when deleting an object.	`1`
`data_div_id`	string	The ID of a element to output the GeoJSON into. By default this is a `<textarea>`.	`waymark-data`

Example Config

This configuration disables the confirmation message when deleting an object and specifies a custom container for the GeoJSON output.

const config = {
  editor_options: {
    confirm_delete: "0",
    data_div_id: "data",
  },};

Initialisation

Once the configuration is set, the init method is called to initialise the Map:

// Create an Editor Instanceconst editor = window.Waymark_Map_Factory.editor();

// Initialise with our options
editor.init(config);

The Map is now displayed on the page according to the provided options.

Loading Data

As with the Viewer, data can be loaded into the Map using the load_json method, which accepts a GeoJSON object as an argument.

viewer.load_json({
  type: "FeatureCollection",
  features: [
    {
      geometry: { type: "Point", coordinates: [-85.038, 49.4595] },
      type: "Feature",
      properties: { type: "food" },
    },
  ],});

Data can be loaded asynchronously using the Fetch API, the load_json method is called within the fetch promise to ensure the data is available:

// Load GeoJSONfetch("../examples/assets/geo/route.geojson")
  .then((response) => response.json())
  .then((geojson) => {
    editor.load_json(geojson);
  });

Alternatively, if a GeoJSON string exists in the Data Container, it will be loaded into the Map when the Editor is initialised. For example, if the Data Container is a <textarea> element with an ID of waymark-data, the GeoJSON will be loaded into the Map when the Editor is initialised.

<textarea id="waymark-data" name="map_data">
  {
    "type": "FeatureCollection",
    "features": [
      {
        "type": "Feature",
        "geometry": {
          "type": "Point",
          "coordinates": [-85.038, 49.4595]
        },
        "properties": {
          "type": "food"
        }
      }
    ]
  }
</textarea>

This is useful for integrating Waymark JS with a <form>.

Retrieving Data

The Map data can be retrieved as GeoJSON using the toGeoJSON method:

//Map Dataconst map_data = editor.map_data.toGeoJSON();

Every time the Map is edited, the Map GeoJSON is output into the inner HTML of the Data Container. By default this is a <textarea> element with an ID of waymark-data to easily integrate Waymark JS with a form.

You can specify an alternative container ID using the data_div_id option. The default <textarea id="waymark-data"> will be created automatically if a container is not found.

Examples

Marker With Custom Icon

Here we are creating a new Editor Instance, setting some options, and adding a Marker to the Map.

<!doctype html><html>
  <head>
    <meta charset="utf-8" />

    <!-- Stylesheet -->
    <link rel="stylesheet" href="../dist/css/waymark-js.css" />

    <!-- JS -->
    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
    <script src="dist/js/waymark-js.js"></script>
  </head>
  <body>
    <!-- Map Container -->
    <div id="waymark-map"></div>

    <script>
      // Create and initilise the Editor with the default options
      const editor = window.Waymark_Map_Factory.editor();

      editor.init({
        // Don't confirm delete
        editor_options: {
          confirm_delete: "0",
        },

        map_options: {
          // Our Pub Icon
          marker_types: [
            {
              marker_title: "Pub",
              marker_icon: "ion-beer",
              marker_colour: "brown",
            },
          ],
        },
      });

      editor.load_json({
        type: "FeatureCollection",
        features: [
          {
            type: "Feature",
            properties: {
              type: "pub",
              title: "The Scarlet Ibis",
              description:
                "Great pub, great food! Especially after a Long Ride 🚴🍔🍟🍺🍺💤",
              image_large_url: "https://www.waymark.dev/assets/geo/pub.jpeg",
            },
            geometry: {
              type: "Point",
              coordinates: [-128.0094, 50.6539],
            },
          },
        ],
      });
    </script>
  </body></html>

Multiple Overlays From File

Here we are creating a new Editor Instance initialised with some Types and loading GeoJSON data from a file.

<!doctype html><html>
  <head>
    <meta charset="utf-8" />

    <!-- Stylesheet -->
    <link rel="stylesheet" href="../dist/css/waymark-js.css" />

    <!-- JS -->
    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
    <script src="dist/js/waymark-js.js"></script>
  </head>
  <body>
    <div id="waymark-map"></div>

    <script>
      // Create an Editor Instance
      const editor = window.Waymark_Map_Factory.editor();

      // Initialise with our options
      editor.init({
        // Editor Specific Options
        editor_options: {
          confirm_delete: "0",
        },

        // General Map Options
        map_options: {
          debug_mode: true,

          // Line Types
          line_types: [
            {
              line_title: "Route",
              line_colour: "green",
            },
          ],

          // Marker Types
          marker_types: [
            {
              marker_title: "Photo",
              icon_type: "icon",
              marker_icon: "ion-camera",
              marker_colour: "#70af00",
              icon_colour: "#ffffff",
            },
            {
              marker_title: "Information",
              icon_type: "icon",
              marker_icon: "ion-information-circled",
              marker_colour: "#fbfbfb",
              icon_colour: "#0069a5",
            },
            {
              marker_title: "Alert",
              icon_type: "icon",
              marker_icon: "ion-android-alert",
              marker_colour: "#da3d20",
              icon_colour: "white",
            },
            {
              marker_title: "Food",
              icon_type: "icon",
              marker_icon: "ion-pizza",
              marker_colour: "#da3d20",
              icon_colour: "#ffba00",
            },
            {
              marker_title: "Beer",
              icon_type: "icon",
              marker_icon: "ion-beer",
              marker_colour: "#fbfbfb",
              icon_colour: "#754423",
            },
            {
              marker_title: "Camp",
              icon_type: "icon",
              marker_icon: "ion-android-home",
              marker_colour: "#a43233",
              icon_colour: "#ffffff",
            },
          ],
        },
      });

      // Load GeoJSON asycnhronously from file
      const geojson = fetch("./assets/geo/route.geojson")
        .then((response) => response.json())
        .then((data) => {
          editor.load_json(data);
        });
    </script>
  </body></html>