Control plugins for the Leaflet JavaScript library that makes it possible to insert a address and get the route to a "fix" address.
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
dist/v1
routingtoaddresscontrol
.eslintrc.js
README.md
package-lock.json

README.md

LeafletControlRouteToAddress

Control plugins for the Leaflet JavaScript library that makes it possible to insert an address and get the route to a "fix" address.

Demo

You can view an example to get an idea of what it can do. I have published an article explaining the plugin:

Quickstart

  1. Download the latest release.
  2. Include the CSS and JS in your page
...
<link rel="stylesheet" href="LeafletControlRoutingtoaddress.css" />
<script src="LeafletControlRoutingtoaddress.js"></script>
...
  1. Initialize the plugin You can initialize the plugin in the standard Leaflet way adding it to a map instance. To add the basic routing control to your map instance, use this Javascript code.
...
<script>
    var mymap = L.map('mapid').setView([50.27264, 7.26469], 13);

    L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png')
            .addTo(mymap);

    L.leafletControlRoutingtoaddress({
        position: 'topright',
        router: 'osrm',
        token: '',
        placeholder: 'Please insert your address here.',
        errormessage: 'Address not valid.',
        distance: 'Entfernung:',
        duration: 'Fahrzeit',
        target: 'Koblenz, Rheinland-Pfalz, Deutschland',
        requesterror: '"Too Many Requests" or "Not Authorized - Invalid Token"'

    }).addTo(mymap);
</script>
...

Note that in the basic version, the control uses OSRM. OSRM is sometimes busy and can not provide a routing. If you like to use Mapbox this is possible. To add the mapbox routing control to your map instance, use this Javascript code.

...
<script>
    var mymap = L.map('mapid').setView([50.27264, 7.26469], 13);

    L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png')
            .addTo(mymap);

    L.leafletControlRoutingtoaddress({
        position: 'topright',
        router: 'mapbox',
        token: 'pk.xxx',
        placeholder: 'Please insert your address here.',
        errormessage: 'Address not valid.',
        distance: 'Entfernung:',
        duration: 'Fahrzeit',
        target: 'Koblenz, Rheinland-Pfalz, Deutschland',
        requesterror: '"Too Many Requests" or "Not Authorized - Invalid Token"'

    }).addTo(mymap);
</script>
...

To use Mapbox you'll need a Mapbox access token. You can find your access tokens, create new ones, or delete existing ones on the Mapbox Access Tokens page.

Options

Options

You can pass a number of options to the plugin to control various settings.

Option Type Default Description
title string 'Print map' Sets the text which appears as the tooltip of the print/export control
position Leaflet control position 'topright' Position if the control
router string 'osrm' Sets the router - possible values are mapbox or osrm
token string '' You need this if you use mapbox. Mapbox access token. You can find your access tokens, create new ones, or delete existing ones on the Mapbox Access Tokens page.
placeholder string 'Please insert your address here.' Sets the text which appears as the placeholder of the control. leaflet control plugin routingtoaddress 1
errormessage string 'Address not valid.' Sets the text which appears as the errormessage of the control. leaflet control plugin routingtoaddress 4
distance string 'Entfernung:' Sets the text which appears as the distance label the control. leaflet control plugin routingtoaddress 5
duration string 'Fahrzeit:' Sets the text which appears as the duration label of the control. leaflet control plugin routingtoaddress 6
target string 'Koblenz, Rheinland-Pfalz, Deutschland' Sets the text which set the target address.
requesterror string 'Too Many Requests" or "Not Authorized - Invalid Token' Sets the text which appears as the requesterror of the control. leaflet control plugin routingtoaddress 3

Development of the plugin - see in the folder routingtoaddresscontrol

If you are interested in the develment of this plugin, you can view the development levels in the routingtoaddresscontrol directory.

  1. Start with boilerplate https://github.com/astridx/leafletjs-plugin-boilerplate
  2. Rename boilerpalte
  3. Add text fields for inserting addresses (places.js und css)
  4. Add options (placeholder and fix address)
  5. add handler, set to top
  6. no jquery and geocoder for searching address, , todo if adresse nicht gefunden
  7. create marker (in add methode refernez zu map, delete marker todo if adresse nicht gefunden no starign point)
  8. Route as JSON.
  9. Show route on map.
  10. Set bounding box.
  11. Catch errors.
  12. Use places.
  13. Show details.
  14. Add Mapbox router.