Convert Figma logo to code with AI

perliedman logoleaflet-routing-machine

Control for routing in Leaflet

1,137
360
1,137
126

Quick Overview

The leaflet-routing-machine is a Leaflet plugin that provides advanced routing functionality, including support for multiple routing providers, waypoints, and customizable routing options. It is designed to be a powerful and flexible tool for building web-based mapping applications that require routing capabilities.

Pros

  • Extensive Routing Functionality: The plugin supports a wide range of routing features, including support for multiple routing providers, waypoints, and customizable routing options.
  • Customizable Appearance: The plugin allows for extensive customization of the appearance of the routing interface, including the ability to change the colors, icons, and other visual elements.
  • Integrates Seamlessly with Leaflet: The plugin is designed to work seamlessly with the Leaflet mapping library, making it easy to integrate into existing Leaflet-based applications.
  • Active Development and Community: The project has an active development team and a growing community of users and contributors, ensuring ongoing support and improvements.

Cons

  • Dependency on Leaflet: The plugin is tightly coupled with the Leaflet mapping library, which may be a limitation for developers who are not using Leaflet in their projects.
  • Limited Documentation: While the project has good documentation, it may not be as comprehensive or user-friendly as some developers would prefer.
  • Performance Considerations: Depending on the complexity of the routing requirements and the size of the map, the plugin may have performance implications that need to be carefully considered.
  • Potential Licensing Concerns: The project is licensed under the MIT license, which may not be suitable for all use cases.

Code Examples

Here are a few examples of how to use the leaflet-routing-machine plugin:

  1. Basic Routing:
var map = L.map('map').setView([51.505, -0.09], 13);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);

var control = L.Routing.control({
    waypoints: [
        L.latLng(51.5, -0.1),
        L.latLng(51.5, -0.05)
    ]
}).addTo(map);
  1. Customizing the Routing Options:
var control = L.Routing.control({
    waypoints: [
        L.latLng(51.5, -0.1),
        L.latLng(51.5, -0.05)
    ],
    routeWhileDragging: true,
    reverseWaypoints: true,
    showAlternatives: true,
    altLineOptions: {
        styles: [
            {color: 'black', opacity: 0.15, weight: 9},
            {color: 'white', opacity: 0.8, weight: 6},
            {color: 'blue', opacity: 0.5, weight: 2}
        ]
    }
}).addTo(map);
  1. Using Multiple Routing Providers:
var control = L.Routing.control({
    waypoints: [
        L.latLng(51.5, -0.1),
        L.latLng(51.5, -0.05)
    ],
    routeWhileDragging: true,
    router: L.Routing.osrm({
        serviceUrl: 'https://router.project-osrm.org/route/v1'
    }),
    altRouter: L.Routing.mapbox({
        apiKey: 'your-mapbox-api-key'
    })
}).addTo(map);

Getting Started

To get started with the leaflet-routing-machine plugin, follow these steps:

  1. Include the necessary dependencies in your HTML file:
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet@1.7.1/dist

Convert Figma logo designs to code with AI

Visual Copilot

Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.

Try Visual Copilot

README

Leaflet Routing Machine NPM version Leaflet 1.0 compatible! Join the chat at https://gitter.im/leaflet-routing-machine/Lobby

This plugin is barely maintained! It has been a good long while since I had any reason to work with routing or Leaflet, and it does not look like that will change. I do not spend time on maintaining this plugin, and only rarely can I find time to respond to issues. If you want to take over as maintainer, feel free to contact me at per@liedman.net.

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

Features

  • Standard Leaflet control, with Leaflet look and feel
  • Routing from start to destination, with possibility of via points
  • Add, edit and remove waypoints through both address input and using the map
  • Multiple language support
  • Highly customizable for advanced use
  • Customizable look (theming / skins)
  • Open Source released under ISC License (more or less equivalent with the MIT license)

Go to the Leaflet Routing Machine site for more information, demos, tutorials and more.

Update 2020-04-06: Out of the box, Leaflet Routing Machine relies on OSRM's demo server. At this moment, the demo server (which is outside scope of the plugin and outside control of the plugin's author) is no longer maintained, and its SSL certificate has expired. The plugin will not work unless you configure a routing backend yourself. I am sorry to say that, to my knowledge, there is no good default.

Support and New Features

Leaflet Routing Machine is in many ways already a feature complete routing UI. Most likely, your requirements are already covered and require very little adaptation.

For questions and discussions, you might want to look at the Leaflet Routing Machine gitter.

Building

npm install

This requires Node and npm, as well as grunt.

Usage

Download latest release, or obtain the latest release via unpkg.com.

<link rel="stylesheet" href="https://unpkg.com/leaflet-routing-machine@3.2.12/dist/leaflet-routing-machine.css" />
<script src="https://unpkg.com/leaflet-routing-machine@3.2.12/dist/leaflet-routing-machine.js"></script>

or via npm:

npm install --save leaflet-routing-machine
var L = require('leaflet');
require('leaflet-routing-machine');

...

LRM attaches itself onto L.

Go to the Leaflet Routing Machine site for more information, demos, tutorials and more.

NPM DownloadsLast 30 Days