Git Product home page Git Product logo

leaflet-routing-machine's Introduction

Leaflet Routing Machine NPM version

Find the way from A to B on a Leaflet map. The plugin supports multiple backends:

Try the Leaflet Routing Machine demo.

Features

  • Show returned route on a map
  • Edit start, end and waypoint points on the map
  • Geocoding to search start, end and waypoint locations from text
  • Wrapper to handle OSRM's API

Usage

Searching, displaying and editing a route is a complex problem with several moving parts. Leaflet Routing Machine aims to solve this problem while at offering the ability to customize how the user interacts with the routing software.

For detailed documentation, please refer to the Leaflet Routing Machine API docs.

Installing

To use Leaflet Routing Machine, copy the files under the dist folder to where you store you scripts and CSS.

If you use NPM and Browserify (or similar), you can also do:

npm install --save leaflet-routing-machine

Basics

The quickest way to add routing to your map is to use L.Routing.Control:

Include script and CSS:

<link rel="stylesheet" href="leaflet-routing-machine.css" />
<script src="leaflet-routing-machine.min.js"></script>

Create a map and add the routing control:

var map = L.map('map');

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

L.Routing.control({
    waypoints: [
        L.latLng(57.74, 11.94),
        L.latLng(57.6792, 11.949)
    ]
}).addTo(map);

By default, the control lets the user add new waypoints by both drag-n-drop on the route's line in the map, or by adding new waypoints in the control's sidebar.

Unless geocoding is enabled (see below), your code should set start and end waypoints for the control, since it can otherwise only be done by typing location names.

Geocoding support

To let the user enter location addresses, a so called geocoder must be used. OSRM does not provide a geocoding service, so an external service has to be used. Leaflet Routing Machine can support any geocoding service, as long as it implements the IGeocoder interface used by Leaflet Control Geocoder. An easy alternative (used by the examples) is to simply use Leaflet Control Geocoder straight away.

Enable the geocoder with options when creating the control:

L.Routing.control({
    geocoder: L.Control.Geocoder.nominatim()
}).addTo(map);

(This example assumes Leaflet Control Geocoder has already been loaded.)

Getting and modifying waypoints

The waypoints can be modified externally with either setWaypoints or spliceWaypoints:

// Replace existing waypoints:
control.setWaypoints([
    L.latLng(57.74, 11.94),
    L.latLng(57.6792, 11.949)
]);

// Add a new waypoint before the current waypoints
control.spliceWaypoints(0, 0, L.latLng(57.68, 11.98));

// Remove the first waypoint
control.spliceWaypoints(0, 1);

Building

To build the packaged files in dist, run

npm install

This requires Node and npm, as well as grunt.

leaflet-routing-machine's People

Contributors

2803media avatar alanbell avatar johnrees avatar medokin avatar oliverheilig avatar perliedman avatar rossanag avatar telling avatar themarex avatar

Watchers

 avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.