HikingEditor

Demos

• Create or edit existing hiking

Description

The HikingEditor class is responsible for editing hiking tracks and stopovers.

To construct a new HikingEditor, you need to pass an OpenLayers map instance:

const hikingEditor = new sww.HikingEditor({
  map: map,
  type: "hiking_proposition",
});
Copy

This will allow the user to create a new hiking proposition.

To edit an existing hiking activity, you need to pass the uuid of the hiking and the type:

const hikingEditor = new sww.HikingEditor({
  map: map,
  type: "hiking_activity",
  uuid: "12345678-1234-1234-1234-123456789012",
});
Copy

When the hiking is loaded, a loaded event is fired. The event detail contains the same properties as the change event.

The constructor takes an option object HikingEditor.HikingEditorOptions with the following properties:

• map: the OpenLayers map instance
• type: the type of the hiking, one of hiking, hiking_activity or hiking_proposition
• uuid: the optional uuid of the hiking to edit

The type property can be changed with the HikingEditor.setType function:

hikingEditor.setType("hiking");
Copy

An other hiking can be loaded with the HikingEditor.loadHiking function:

hikingEditor.loadHiking("12345678-1234-1234-1234-123456789012");
Copy

Create or update hiking

To save the hiking, call the HikingEditor.save function, this will create or update the hiking on the server.

Deleting

To delete the hiking, call the HikingEditor.delete function, this will delete the hiking from the server.

Update hiking properties

To update the properties of the hiking that are not related to the geometries (for example the title, description, or any other property), call the HikingEditor.updateHikingProperties function and pass an object with the properties to update:

hikingEditor.updateHikingProperties({
  title: {"fr": "title fr", "de": "title de", "it": "title it", "en": "title en"},
  best_hiking_time: [1, 2],
});
Copy

FIXME: what if the the hiking is not saved yet ?

User interaction

• A new control point is added with a single click on the map.
• A new control point is added between on a line by dragging the line.
• The control points and stopovers can be moved by dragging.
• The control points and stopovers can be removed by double clicking on them.
• A new stopover is created by clicking on a control point.

After each user interaction, a change event is fired.

Edit mode

By default, the editor is in edit mode. In this mode, the user can add, move and remove control points. To switch to view mode, set the edit property to false:

hikingEditor.edit = false;
Copy

Snapping mode

The lines are automatically snapped to the closest hiking path. To disable snapping, set the snapping property to false:

hikingEditor.snapping = false;
Copy

Reverse the track

To reverse the track, call the HikingEditor.reverse function:

hikingEditor.reverse();
Copy

The reverse function will trigger a change event.

Undo/Redo

The editor can undo or redo the actions to the geometries of the control points. To undo the last action, call the HikingEditor.undo function:

hikingEditor.undo();
Copy

To redo the last action, call the HikingEditor.redo function:

hikingEditor.redo();
Copy

• canUndo: true if the user can undo the last action
• canRedo: true if the user can redo the last action

The undo and redo functions will trigger a change event.

Control points

The control points are the points that are between the segments of the track, they can be added, moved and removed by the user. They are represented by a small circle on the map.

Stopovers

The stopovers are a special type of control points that the user chooses to create by clicking on a control point. The first and last control points are always stopovers. They are represented by a big circle on the map.

A stopover has a name and and an optional list of features. A duration and a distance from the previous stopover is computed for each stopover.

Change Event

Every time a change is made to the stopovers, a change event is fired. The event detail contains the values of the stopovers.

To register an event listener for the change event, use the addEventListener method:

hikingEditor.addEventListener("change", (event) => {
  for (const stopover of event.detail.stopovers) {
    console.log(stopover);
  }
});
Copy

All the stopovers are returned in the stopovers property of the event detail, each stopover has the following properties:

• uid: the unique id of the stopover. this id is used to identify the stopover in the other methods.
• swissNames: an array of swiss names for this location
• name: the name of the stopover, if the name was not set by the HikingEditor.setStopOverName function, the first swiss name is used.
• features: an array of features that the user can add to the stopover
• duration: the walking time duration of the stopover from the previous stopover in minutes. This value can be overwritten by using the HikingEditor.setStopOverDuration function.
• distance: the distance of the stopover from the previous stopover in meters
• coordinates: the coordinates of the stopover in EPSG:4326 projection

In addition to the stopovers, the event detail contains the following properties:

• type: the type of the hiking, one of hiking, hiking_activity or hiking_proposition
• canUndo: true if the user can undo the last action
• canRedo: true if the user can redo the last action

Change a stopover name

To change the name of a stopover, use the HikingEditor.setStopOverName function and pass the uid of the stopover:

hikingEditor.setStopOverName(123, "Bümpliz Nord Bahnhof");
Copy

Calling this method will trigger a change event.

Set features to a stopover

Every stopover can have a list of features representing a point of interest at this location. A feature is an object with a type property and an optional title property.

To set the features of a stopover, use the HikingEditor.setStopOverFeatures function and pass the uid of the stopover:

hikingEditor.setStopOverFeatures(123, [
  { type: "shopping", title: "Food and Stuff" },
  { type: "parking" },
]);
Copy

When calling this function, existing features are replaced by the new list.

Calling this method will trigger a change event.

Set duration to a stopover

To set a custom duration of a stopover in minutes, use the HikingEditor.setStopOverDuration function and pass the uid of the stopover:

hikingEditor.setStopOverDuration(123, 30);
Copy

Calling this method will trigger a change event.

Remove stopover

To remove a stopover, use the HikingEditor.removeStopOver function and pass the uid of the stopover:

hikingEditor.removeStopOver(123);
Copy

When a stopover is removed, the custom name and features are also removed and cannot be recovered. Calling this method will trigger a change event.

GPX and KML Import

To create a hiking from a GPX or a KML file, use the HikingEditor.importGpxOrKml function and pass the file. For GPX, the line coordinates will be primarily extracted from tracks and if no tracks are found, from routes. Control points for both formats are snapped to the line - meaning that every control point has a corresponding point on the line. The first and last control points are always created as stopovers, even if no waypoints are found. The coordinates are expected to be in EPSG:4326 projection and in Cartesian order (lon, lat).