Leaflet.RouteEditor

Minimalist Leaflet plugin to edit GPS traces:

• load and download GPS traces
• add, drag and remove (Ctrl/Cmd+click) anchor points to edit the GPS trace

Check the demo!

Requirements

Developed with Leaflet 1.9.3 but so simple it probably works with other versions too.

Usage

Simply add the single file from the dist folder to your project like below:

<script src="https://unpkg.com/[email protected]/dist/L.Control.RouteEditor.min.js"></script>

Then, add an instance of L.Control.RouteEditor to the map: L.control.routeEditor().addTo(map). See the Reference below to learn how to customize the plugin to your needs.

Reference

L.Control.RouteEditor

The route editor in itself, adding an instance of it to the map enables plotting a route, and loading and downloading GPS routes.

Options

Option | Type | Default | Description --- | --- | --- | --- position | String | 'topright' | Inherited from L.Control. The position of the control (one of the map corners). Possible values are 'topleft', 'topright', 'bottomleft' or 'bottomright.' load | String | boolean | 'load' | HTML code for the load button. Use false to hide the button. download | String | boolean | 'download' | HTML code for the download button. Use false to hide the button. clear | String | boolean | 'clear' | HTML code for the clear button. Use false to hide the button. filename | String | 'file' | Default name for the exported files. format | String | 'gpx' | File format given to the exported files, currently only supports 'gpx'. polylineOptions | Object | { weight: 5 } | Styling options for the displayed line, see Leaflet doc. anchorIconOptions | Object | { iconUrl: 'img/marker.svg', iconSize: [12, 12] } | Styling options for the displayed anchor points, see Leaflet doc. routeProvider | instance of L.RouteProvider | L.routeProvider.straightLine() | Specify the route provider to use. elevationProvider | instance of L.ElevationProvider | L.elevationProvider() | Specify the elevation provider to use. onUpdate | function | function () {} | Callback function called after each route update.

Methods

Method | Returns | Description --- | --- | --- loadRouteFromURL(<String> url) | no return value | Tries to load a GPS trace on the map from a file located at the given URL. getRouteAsGpx() | String | Converts the current GPS trace to GPX data. clear() | no return value | Removes the current GPS trace.

See also the methods inherited from Leaflet Control.

L.RouteProvider

The simplest route provider, connecting the anchor points in straight line. Extend this class to create a new route provider by providing your own implementation of getRoute.

L.RouteProvider.StraightLine

Another simple route provider connecting the anchor points in straight line but adding intermediate GPS points between the anchor points.

Options

Option | Type | Default | Description --- | --- | --- | --- step | Number | 10 | A parameter that controls the distance between the GPS points created on straight lines.

L.RouteProvider.BRouter

Route provider for a BRouter instance.

Options

Option | Type | Default | Description --- | --- | --- | --- domain | String | no default value | The domain name of the BRouter server used. profile | String | no default value | The routing profile used.

L.RouteProvider.GraphHopper

Route provider for a GraphHopper instance or Routing API.

Options

Option | Type | Default | Description --- | --- | --- | --- domain | String | 'graphhopper.com' | The domain name of the BRouter server used. profile | String | 'bike' | The routing profile used. token | String | 'boolean' | false | Your GraphHopper access token or false if you host your own instance.

L.RouteProvider.Mapbox

Route provider for the Mapbox Directions API.

Options

Option | Type | Default | Description --- | --- | --- | --- profile | String | 'cycling' | The routing profile used. token | String | no default value | Your Mapbox access token.

L.RouteProvider.OSRM

Route provider for a OSRM instance.

Options

Option | Type | Default | Description --- | --- | --- | --- domain | String | no default value | The domain name of the OSRM server used. profile | String | 'cycling' | The routing profile used.

L.ElevationProvider

Extend this class to create a new elevation provider by providing your own implementation of setElevation.

Example

The example below adds a RouteEditor control with icons from Font Awesome and routing provided by a BRouter instance.

let map = L.map('map').setView([50.85, 4.34], 12);

L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
    maxZoom: 19,
    attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
}).addTo(map);

L.control.routeEditor({
    load: '<i class="fa-solid fa-upload"></i>',
    download: '<i class="fa-solid fa-download"></i>',
    clear: '<i class="fa-solid fa-trash"></i>',
    routeProvider: L.routeProvider.bRouter({
        domain: 'routing.gpx.studio',
        profile: 'all',
    })
}).addTo(map);

This code is used in the demo.

Styling

The buttons can be styled by adding CSS rules to the following classes:

• leaflet-control-route-editor for the buttons container
• leaflet-control-route-editor-load for the load button
• leaflet-control-route-editor-download for the download button
• leaflet-control-route-editor-clear for the clear button

On top of that, the line and the markers can be customized (see Reference).

Contributing

Implementations of L.RouteProvider and L.ElevationProvider for well-known APIs are very welcome.