---
title: Editor
description: The Editor Mode allows users to create and edit Overlays on a Map.
---

# 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](map#types).

Every time the Map is edited, the Map is converted to GeoJSON and output into the value 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](editor#options). 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](https://github.com/OpenGIS/Waymark/blob/master/assets/js/admin.js).

## Creation

```javascript
// Create an Editor Instance
const 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.

```javascript
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:

```javascript
// Create an Editor Instance
const 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.

```javascript
editor.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](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API), the `load_json` method is called within the `fetch` promise to ensure the data is available:

```javascript
// Load GeoJSON
fetch("../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.

```html
<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:

```javascript
//Map Data
const map_data = editor.map_data.toGeoJSON();
```

Every time the Map is edited, the Map GeoJSON is output into the value 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](editor#options). 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](editor#options), and adding a Marker to the Map.

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

    <!-- Stylesheet -->
    <link
      rel="stylesheet"
      href="https://www.ogis.org/waymark-js/dist/latest/css/waymark-js.min.css"
    />

    <!-- JS -->
    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
    <script src="https://www.ogis.org/waymark-js/dist/latest/js/waymark-js.min.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.ogis.org/waymark-js/assets/img/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](map#types) and loading GeoJSON data from a file.

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

    <!-- Stylesheet -->
    <link
      rel="stylesheet"
      href="https://www.ogis.org/waymark-js/dist/latest/css/waymark-js.min.css"
    />

    <!-- JS -->
    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
    <script src="https://www.ogis.org/waymark-js/dist/latest/js/waymark-js.min.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>
```
