turistforeningen / leaflet-routing

Leaflet.Routing is a routing controller for the popular Leaflet mapping framework. The module provides an intuitive interface for routing paths between waypoints using any user specified routing service.

Leaflet.Routing


Leaflet.Routing is a routing controller for the popular Leaflet mapping framework. The module provides an intuitive interface for routing paths between waypoints using any user specified routing service. A demo using the OSM data can be found here.

Features

• Route handling interface for Leaflet
• Use your own routing backend, or OSM

Usage

var routing = new L.Routing({
  position: 'topright'
  ,routing: {
    router: myRouterFunction
  }
  ,tooltips: {
    waypoint: 'Waypoint. Drag to move; Click to remove.',
    segment: 'Drag to create a new waypoint'
  }
  ,styles: {     // see http://leafletjs.com/reference.html#polyline-options
    trailer: {}  // drawing line
    ,track: {}   // calculated route result
    ,nodata: {}  // line when no result (error)
  }
  ,snapping: {
    layers: [mySnappingLayer]
    ,sensitivity: 15
    ,vertexonly: false
  }
  ,shortcut: {
    draw: {
      enable: 68    // 'd'
      ,disable: 81  // 'q'
    }
  }
});
map.addControl(routing);

Enable Drawing

routing.draw(true);

Enable Routing NOT IMPLEMENTED

routing.routing(true);

Enable Snapping NOT IMPLEMETED

routing.snapping(true);

Recalculate the complete route by routing each segment

routing.rerouteAllSegments(callback);

Get first waypoint

var first = routing.getFirst();

Get last waypoint

var last = routing.getLast();

Get all waypoints

var waypointsArray = routing.getWaypoints();

Routing to Polyline

var polyline = routing.toPolyline();

To GeoJSON

var geoJSON3D = routing.toGeoJSON();
var geoJSON2D = routing.toGeoJSON(false);

Load GeoJSON

Load GeoJSON with and without properties.waypoints.

Options

• number waypointDistance - distance between inserted waypoints for GeoJSON without waypoints.
• boolean fitBounds - fit map arround loaded GeoJSON.

routing.loadGeoJSON(geojson, [options], function(err) {
  if (err) {
    console.log(err);
  } else {
    console.log('Finished loading GeoJSON');
  }
});

Events

All events form Leaflet.Routing is prefixed with routing:.

Usage

routing.on('routing:someEvent', function() {
  console.log('routing:someEvent triggered');
});

L.Routing Events

Event name	Description
routing:draw-start	Fired when drawing mode is started
routing:draw-new	Fired when drawing mode is started for a new route
routing:draw-continue	Fired when drawing mode is started for an existing route
routing:draw-stop	Fired when drawing mode ends
routing:edit-start	Fired when editing mode starts
routing:edit-end	Fired when editing mode ends

Waypoint Events

Event name	Description
routing:routeWaypointStart	Fired when a new or existing waypoint is created or moved
routing:routeWaypointEnd	Fired when routing is finished for new or moved waypoint

Segment Events

Event name	Description
routing:rerouteAllSegmentsStart	Fired when rerouting of all segments starts
routing:rerouteAllSegmentsEnd	Fired when rerouting of all segments completes

Copyright

Copyright (c) 2014, Den Norske Turistforening

All rights reserved.

Redistribution and use in source and binary forms, with or without modification, are permitted provided that the following conditions are met:

1. Redistributions of source code must retain the above copyright notice, this list of conditions and the following disclaimer.
2. Redistributions in binary form must reproduce the above copyright notice, this list of conditions and the following disclaimer in the documentation and/or other materials provided with the distribution.

THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.

leaflet-routing's Issues

TypeError: 'undefined' is not an object (evaluating 'opts.layers[0]._map')

[Error] TypeError: 'undefined' is not an object (evaluating 'opts.layers[0]._map')
    snapToLayers (LineUtil.Snapping.js, line 21)
    _onMouseMove (L.Routing.Draw.js, line 247)
    fireEvent (leaflet.js, line 6)
    _fireMouseEvent (leaflet.js, line 6)
    s (leaflet.js, line 8)

Reproduce

• Go to /examples/load.html
• Click on all 4 markers
• Move the mouse (you should see the error in your console)

Routes on Ocean

Is there a way to calculate route for ships? I mean, given two points on map, calculate shortest (not mandatory) path without touching ground.

Fire event on waypoint remove

Add waypoints to GeoJSON without waypoints

Add waypoints with a fixed spacing if no waypoints exists when loading GeoJSON.

Custom start and end waypoint icons

There is already an config options for start and end waypoint icons, but this is currently not used.

#loadGeoJSON()

Should be able to load existing GeoJSON and build a route.

{
  "type": "LineString",
  "properties": {
    "waypoints": [{
      "coordinates": [x0, y0],
      "_index": z0
    },{
      ...
    },{
      "coordinates": [xn, yn],
      "_index": zn
    }]
  },
  "coordinates": [[x0, y0], [..], [xn, yn]]
}

Where geojson.waypoints are the location of the routing waypoints markers.

Fail gracefully when loading invalid GeoJSON

User Specified Routing Service

Is there any info about how one creates a routing service?
You seem to run your own "/route/?" what did you use to create this?
I see many OSM based routing projects here
http://wiki.openstreetmap.org/wiki/Routing

I'm new to routing and trying to figure out how I might be able to do routing on a database of linestring in a Postgres database. I can convert them to OSM if need be.

API auth failed

Uncaught Error: API auth failed app.js:21. Thanks a lot great example.

Change map bounds when loading GeoJSON

Place new waypoint "cursor" at end of route

"Press Enter" difficult on mobile

A user has made the observation that after using the compas/drop-pin to set location on mobile that it is not so easy to bring up a keyboard again to click enter

Publish to Bower

Error in routing events documentation

The routing events documentation here
https://github.com/Turistforeningen/leaflet-routing#lrouting-events
suggests the events are bound to routing.on() where the code binds them to the map object:
https://github.com/Turistforeningen/leaflet-routing/blob/gh-pages/src/L.Routing.Draw.js#L84

Also the documentation says one of the events is "routing:draw-stop" but in the code its "routing:draw-end".

So binding events to the routing object wasn't working, but binding to map does:
map.on('routing:draw-end')

how to design the backend by myself.

I have one data made by myself ,but i don't know how to design the backend of routing.please give some advice,thanks.

Do not re-route 2nd line segment when deleting from end

Previous route left on map when point added/edited

When I add or edit a point along an existing route, the old route remains on the map, but slightly opaque. Not sure why this is happening or how to stop it. If I refresh the routing using the points,

Document router interface

Document the router function interface that must be provided to L.Routing.

Routing Problem

Hi i need you help... when i try add a new point in the map, the plugin add the layer but not draw the line, like there were no road... i'm ussing google layer.

unmodified route

modified in a place that works

modified in a place that does not works..

thanks and good job XD

Override leaflet drawing shortcuts

Demo?

Is there a public demo available?
If not, do you happen to know which public (OSM) routing service would fit in without much modifications?

Document options.icons.normal

Document the options.icons.normal setting.

Init routing

Hi

I am struggling to use your lib. I am using the L.Control.Geocoder control by Per Liedman which gives me LatLong coords for two points. How can I then trigger the routing function? I search around the web for an example combining leaflet + routing, but I find it really hard to find. Also: I am specifically looking for bike routes, so OSRM is not an option at the moment.

Add public changelog overview

Option to remove first the cursor marker

Make it possible to remove the cursor marker icon and have a crosshair cursor instead.

Add #clearAll() method

Add method for removing all waypoints and corresponding line-segments. This is useful when a user wants to start over with a fresh canvas.

how to add my own router background ？

my router can only be the geojson？

Fire event on waypoint add

issue of windows.location.hash

app.js
it is showing api = ""
where api is windows.location.hash
when i printed api it is showing hash = "".
is there any alternative for hash ?

Broken Demo

Demo page on this project is not loading the osm.

Question: are you still maintaining/supporting this software

There seems to be little activity on this software and then demo's don't seem to work. So should I conclude you are not supporting this software any longer?

How to handle loading existing routes?

How should existing routes be handled if the user want to load them and continue routing?

Typehad is broken in demo

Link should be: http://twitter.github.io/typeahead.js/releases/latest/typeahead.bundle.min.js

Leaflet 1.0: Removed MultiPolyline and MultiPolygon in LineUtil.Snapping.js

LineUtil.Snapping.js includes MultiPolyline and MultiPolygon cases, which are removed since Leaflet 1.0:

• Removed MultiPolyline and MultiPolygon classes since multiple rings are now handled by Polyline and Polygon classes respectively. Layers with multiple rings now perform much better (since each is now physically a single path object instead of being a FeatureGroup of layers).

Changelog 1.0-beta1

It would now need to handle multi-dimensional arrays with Polyline and Polygon. In addition, the instanceof L.Polyline condition also matches Polygons as the Polygon class extends from Polyline.

But I'm wondering if there really is a use-case for snapping to all kinds of geometries.

Still seems to work fine when restricting geometries to LineString like in the osm.html example.

Examples not published on gh-pages

Not sure why this produces a 404

https://turistforeningen.github.io/leaflet-routing/examples/osm.html

OSM demo not working (301 for routing.php)

The OSM demo linked in the project page is not working because the XHR requests for snapping data and routing API fail with a 301 Moved Permanently response for the routing.php, which acts as a proxy for non-CORS enabled services:

http://www2.turistforeningen.no/routing.php?url=http://www.openstreetmap.org/api/0.6/map&bbox=8.615341186523438,61.47371010902601,8.828372955322266,61.52547772030421&1=2

If this is on purpose, there might be an alternative using Overpass API and perhaps GeoJSON Path Finder?

Document action events

route update event/callback

A client needs some way to get informed after the route has been updated in order to update route statistics like track length or an elevation diagram. Hooking into the router callback only gives you the updated segments and I find it easier to always work with the complete route.

Possible solutions could be:
a) fire an update event in routeWaypoint before cb is called
b) an option to pass a callback that is used instead of the debug callbacks passed e.g. from L.Routing.Draw._onMouseClick

I can provide a PR for that. What are your thoughts/preferences?

About custom waypoints and routing

Hi,

I got 20 points of a way and i want to use my way data on map. But i couldnt figure out of it. I got an array which has lat & long values. I can create geojson but in your example i couldnt understand the third value: etc

[8.90724154784554,61.4991902326406,1136], this is your data, and what does 1136 means?
thank you

Use L.Polyline for snapping layer?

In your example you use some proxy to load .OSM data for the snapping layer.

Is it possible to use Polylines already drawn on the leaflet map for the snapping layer?

OSM router not respond

Hi. Help me please with problem
I try to draw route, but it dont work because my 'build-route url' http://www2.turistforeningen.no/routing.php?url=http://www.yournavigation.org/api/1.0/gosmore.php&format=geojson&v=foot&fast=1&layer=mapnik&flat=51.48182022464805&flon=-0.16329678241163492&tlat=51.58262629388259
not respond and i can not create route.

Also I try demo http://turistforeningen.github.io/leaflet-routing/examples/osm.html and it does not work too

As I understood this routing service is unavailable now. Can I replace it by any other routing service?