Skip to content

Plugin for the Leaflet JavaScript library to show areas of reachability based on time or distance for different modes of travel using the openrouteservice isochrones API.

License

Notifications You must be signed in to change notification settings

traffordDataLab/leaflet.reachability

Repository files navigation

leaflet.reachability

Trafford Data Lab plugin for the Leaflet JavaScript library to show areas of reachability based on time or distance for different modes of travel using the openrouteservice isochrones API.

You can view the demo to get an idea of what it can do, or view a more customised implementation (which uses more of the available styling options) in our Explore mapping application.

We have published an article explaining the benefits of using network buffers rather than euclidean distance when determining reachability as well as creating the following short videos demonstrating example uses for the plugin:

Documentation (v2.0.1)

You will need to obtain a free API key from openrouteservice before using this plugin. Please do not use the key from the demo in your own applications. Consult the changelog to find out what has changed from previous versions.

After including the CSS and JS in your page (NOTE - you can also use minified versions e.g. .min.js/.min.css if you prefer):...

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/trafforddatalab/[email protected]/leaflet.reachability.css"/>
<script src="https://cdn.jsdelivr.net/gh/trafforddatalab/[email protected]/leaflet.reachability.js"></script>

...you can then initialise the plugin in the standard Leaflet way adding it to a map instance:

<body>
    <div id="map"></div>

    <script>
        // Create the Leaflet map object
        var map = L.map('map', { center: [53.4189, -2.33] });

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

        // Initialise the reachability plugin
        L.control.reachability({
            // add settings/options here
            apiKey: 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx'
        }).addTo(map);
    </script>
</body>

This is the minimum code required and will use all the default settings. If you have a style or theme for your application you'll most likely want the plugins to follow it. To customise the plugin for your requirements you will need to change the default options.

Options

The plugin has many options, e.g. for controlling the appearance of the user-interface, (allowing icons from popular services such as Font Awesome to be used), styling the reachability polygons and markers as well as incorporating many of the openrouteservice API options. Therefore the list of options in the tables below are presented in sections based on their use. The options within each section are listed in alphabetical order except when grouping related options or introducing certain options first makes more sense.

Main options

These are the general setup options for the plugin control e.g. where it appears on the map, whether it is permanently expanded or if it can be toggled between collapsed and expanded states etc.

Option Type Default Description
collapsed Boolean true Whether the control can be toggled between collapsed and expanded states true or is permanently expanded false.
collapseButtonContent String "^" HTML content to display within the button to collapse the control if it is expanded. You can use an icon from various icon services instead by passing "" for this value and adding the required classes to the the collapseButtonStyleClass option.
collapseButtonStyleClass String "reachability-control-collapse-button" CSS class(es) to control the styling/content of the button to collapse the control to its minimised state.
collapseButtonTooltip String "Hide reachability options" Tooltip to appear on-hover over the button to collapse the control.
controlContainerStyleClass String "" CSS class(es) to control the styling of the container for the plugin control. The control container will inherit the standard Leaflet control styling, however this option allows for customisation.
drawActiveMouseClass String "leaflet-crosshair" CSS class(es) applied to the mouse pointer when the plugin is in draw mode.
expandButtonContent String "&#x2609;" e.g. ☉ HTML content to display within the control if it is collapsed. You can use an icon from various icon services instead by passing "" for this value and adding the required classes to the the expandButtonStyleClass option.
expandButtonStyleClass String "reachability-control-expand-button" CSS class(es) to control the styling/content of the button to expand the control revealing the user interface.
expandButtonTooltip String "Show reachability options" Tooltip to appear on-hover over the button to expand the control
pane String "overlayPane" Map pane to draw the reachability polygons within.
position String "topleft" Control position on the map.
zIndexMouseMarker Number 9000 CSS z-index of an invisible marker which follows and captures mouse/touch events when the control is in draw mode to prevent triggering other map events. Must be greater than any other layer on the map.

User interface options

The options below control the styling and content of the user interface as well as for choosing which reachability options should be selected by default.

NOTE: The maximum number of isochrones which can be requested at one time from the API is 10. Care should be taken choosing the interval values (or the custom range values) for the distance and time options. If the user selects the intervals checkbox it is possible that the maximum isochrone request number could be exceeded. Take the following distance (km) example: rangeControlDistanceMax = 1.1, rangeControlDistanceInterval = 0.1. The range select list would contain 11 items (0.1km - 1.1km). If the user selected 1.1km with intervals they would be requesting 11 isochrones which would result in an error.

Option Type Default Description
settingsContainerStyleClass String "reachability-control-settings-container" The HTML container holding the user interface controls which is displayed if collapsed is false, or when the user expands the control using the expand button.
settingsButtonStyleClass String "reachability-control-settings-button" Generic class to style the setting buttons uniformly - further customisation per button is available with specific options below.
activeStyleClass String "reachability-control-active" Indicates to the user which button is active in the settings panel and to show that the control is active if the draw or delete options are selected and the control is in its collapsed state.
errorStyleClass String "reachability-control-error" Gives feedback to the user via the buttons in the user interface that something went wrong, e.g. selecting delete when there are no reachability polgons on the map etc.
drawButtonContent String "drw" HTML content of the button which activates and deactivates the control's draw mode. You can use an icon from various icon services instead by passing "" for this value and adding the required classes to the the drawButtonStyleClass option.
drawButtonStyleClass String "" CSS class(es) to control the styling/content of the draw button.
drawButtonTooltip String "Draw reachability" Tooltip to appear on-hover over the draw button.
deleteButtonContent String "del" HTML content of the button which activates and deactivates the control's delete mode. You can use an icon from various icon services instead by passing "" for this value and adding the required classes to the the deleteButtonStyleClass option.
deleteButtonStyleClass String "" CSS class(es) to control the styling/content of the delete button.
deleteButtonTooltip String "Delete reachability" Tooltip to appear on-hover over the delete button.
distanceButtonContent String "dst" HTML content of the button to select distance as the reachability measure. You can use an icon from various icon services instead by passing "" for this value and adding the required classes to the distanceButtonStyleClass option.
distanceButtonStyleClass String "" CSS class(es) to control the styling/content of the distance button.
distanceButtonTooltip String "Reachability based on distance" Tooltip to appear on-hover over the distance button.
timeButtonContent String "tme" HTML content of the button to select time as the reachability measure. You can use an icon from various icon services instead by passing "" for this value and adding the required classes to the timeButtonStyleClass option.
timeButtonStyleClass String "" CSS class(es) to control the styling/content of the time button.
timeButtonTooltip String "Reachability based on time" Tooltip to appear on-hover over the time button.
rangeTypeDefault String "time" Selects whether distance or time is selected by default as the reachability measure. Any value other than "distance" passed to the API is assumed to be "time". Corresponds to range_type in the API documentation.
travelModeButton1Content String "car" HTML content of the first travel mode button. You can use an icon from various icon services instead by passing "" for this value and adding the required classes to the travelModeButton1StyleClass option.
travelModeButton1StyleClass String "" CSS class(es) to control the styling/content of the first travel mode button.
travelModeButton1Tooltip String "Travel mode: car" Tooltip to appear on-hover over the first travel mode button.
travelModeButton2Content String "cyc" HTML content of the second travel mode button. You can use an icon from various icon services instead by passing "" for this value and adding the required classes to the travelModeButton2StyleClass option.
travelModeButton2StyleClass String "" CSS class(es) to control the styling/content of the second travel mode button.
travelModeButton2Tooltip String "Travel mode: cycling" Tooltip to appear on-hover over the second travel mode button.
travelModeButton3Content String "wlk" HTML content of the third travel mode button. You can use an icon from various icon services instead by passing "" for this value and adding the required classes to the travelModeButton3StyleClass option.
travelModeButton3StyleClass String "" CSS class(es) to control the styling/content of the third travel mode button.
travelModeButton3Tooltip String "Travel mode: walking" Tooltip to appear on-hover over the third travel mode button.
travelModeButton4Content String "wch" HTML content of the fourth travel mode button. You can use an icon from various icon services instead by passing "" for this value and adding the required classes to the travelModeButton4StyleClass option.
travelModeButton4StyleClass String "" CSS class(es) to control the styling/content of the fourth travel mode button.
travelModeButton4Tooltip String "Travel mode: wheelchair" Tooltip to appear on-hover over the fourth travel mode button.
travelModeDefault String null Sets the default travel profile. If this is not equal to one of the travel profile options (see openrouteservice API options below) it will use the value of travelMode1Profile
rangeControlDistanceTitle String "Dist." Title displayed above the range select list when distance is selected as the reachability measure.
rangeControlDistanceUnits String "km" Units for the distance measure. Can be "m" (metres), "km" (kilometres) or "mi" (miles). Corresponds to units in the API documentation.
rangeControlDistance Array null Custom range of distance values measured in rangeControlDistanceUnits specified as an array which supersedes rangeControlDistanceMax and rangeControlDistanceInterval if not null. See NOTE: above, maximum number of values is 10.
rangeControlDistanceMax Number 3 Maximum distance value to display in the range selection list, measured in rangeControlDistanceUnits.
rangeControlDistanceInterval Number 0.5 Distance intervals between 0 and the rangeControlDistanceMax value, measured in rangeControlDistanceUnits. Corresponds to interval in the API documentation. See NOTE: above regarding choosing appropriate values.
rangeControlTimeTitle String "Time" Title displayed above the range select list when time is selected as the reachability measure.
rangeControlTime Array null Custom range of time values measured in minutes but multipled by 60 to convert to seconds when passed to the API as this is the only unit of time allowed. specified as an array which supersedes rangeControlTimeMax and rangeControlTimeInterval if not null. See NOTE: above, maximum number of values is 10.
rangeControlTimeMax Number 30 Maximum time value to display in the range selection list, measured in minutes but multipled by 60 to convert to seconds when passed to the API as this is the only unit of time allowed.
rangeControlTimeInterval Number 5 Time intervals between 0 and rangeControlTimeMax value, measured in minutes but multipled by 60 to convert to seconds when passed to the API as this is the only unit of time allowed. Corresponds to interval in the API documentation. See NOTE: above regarding choosing appropriate values.
rangeIntervalsLabel String "intervals" Text displayed next to the checkbox which controls whether reachability areas should be drawn for all intervals up to the value chosen by the user or just the chosen value.

Reachability polygon options

The options below give you control over the styling and interactive behaviour of the reachability polygons which are created when a call is made to the openrouteservice API.

Option Type Default Description
clickFn Function null External function called when a click/touch event occurs on a reachability polygon.
mouseOutFn Function null External function called when a mouseout event occurs on a reachability polygon.
mouseOverFn Function null External function called when a mouseover event occurs on a reachability polygon.
styleFn Function null External function to style the reachability polygon(s) returned from the API. See example 2 below for reference.

Reachability origin marker options

The following options allow you to decide whether markers denoting the origin of the reachability polygons (i.e. the point chosen by the user on the map) should be displayed, and if so, give you control over their styling and interactive behaviour.

Option Type Default Description
showOriginMarker Boolean true Whether a marker at the origin of a reachability polygon is displayed or not.
markerFn Function null External function to create a custom marker at the origin of a reachability polygon if showOriginMarker is true. A value of null creates a default circleMarker.
markerClickFn Function null External function called when a click/touch event occurs on a reachability origin marker.
markerOutFn Function null External function called when a mouseout event occurs on an origin marker.
markerOverFn Function null External function called when a mouseover event occurs on an origin marker.

Openrouteservice API interaction options

Options presented below are for controlling the communication between the plugin and the openrouteservice API. Some correspond to the options found in the API documentation.

Option Type Default Description
apiKey String "" REQUIRED! Your openrouteservice API key. Register for one here. Corresponds to api_key in the API documentation.
attributes String (CSV) '"area", "reachfactor", "total_pop"' Optional data returned from the API, you can choose all, none or a combination of the following. area gives the approximate area of the reachability polygon(s) measured in the square of the units chosen in the plugin option rangeControlDistanceUnits, e.g. "m^2", "km^2" or "mi^2". reachfactor is the ratio of a reachability polygon's area to the theoretically possible area reachable if there were no roads (i.e. as the crow flies). total_pop is an estimate of the number of people living in the area covered by the reachability polygon(s). This value is supplied in the openrouteservice API via Global Human Settlement (GHS) data. Corresponds to attributes in the API documentation.
smoothing number 0 Applies a level of generalisation to the reachability polygons generated as a smoothing_factor between 0 and 100. The algorithm is (maximum_radius_of_isochrone / 100) * smoothing_factor with values closer to 100 resulting in more generalised shapes. Corresponds to smoothing in the API documentation.
travelModeProfile1 String "driving-car" Travel profile used when the first travel mode button is selected. Possible values are "driving-car", "driving-hgv", "cycling-regular", "cycling-road", "cycling-mountain", "cycling-electric", "foot-walking", "foot-hiking" and "wheelchair". Corresponds to profile in the API documentation.
travelModeProfile2 String "cycling-regular" Travel profile used when the second travel mode button is selected. Possible values are "driving-car", "driving-hgv", "cycling-regular", "cycling-road", "cycling-mountain", "cycling-electric", "foot-walking", "foot-hiking", "wheelchair" and null. If the value is null the second travel mode button won't be displayed. Corresponds to profile in the API documentation.
travelModeProfile3 String "foot-walking" Travel profile used when the third travel mode button is selected. Possible values are "driving-car", "driving-hgv", "cycling-regular", "cycling-road", "cycling-mountain", "cycling-electric", "foot-walking", "foot-hiking", "wheelchair" and null. If the value is null the third travel mode button won't be displayed. Corresponds to profile in the API documentation.
travelModeProfile4 String "wheelchair" Travel profile used when the fourth travel mode button is selected. Possible values are "driving-car", "driving-hgv", "cycling-regular", "cycling-road", "cycling-mountain", "cycling-electric", "foot-walking", "foot-hiking", "wheelchair" and null. If the value is null the fourth travel mode button won't be displayed. Corresponds to profile in the API documentation.

Events

The following table lists all the events fired by the plugin via the map object. You can listen for these events within your application to perform additional actions etc. Instances of "reachability:no_data" and "reachability:error" being fired will result in further details being recorded in the console log where possible.

Event Data Description
"reachability:control_added" Event Fired when the control is added to the map.
"reachability:control_removed" Event Fired when the control is removed from the map.
"reachability:control_expanded" Event Fired when the control is expanded from its collapsed state.
"reachability:control_collapsed" Event Fired when the control is collapsed from its expanded state.
"reachability:draw_activated" Event Fired when the draw button is activated.
"reachability:draw_deactivated" Event Fired when the draw button is deactivated.
"reachability:delete_activated" Event Fired when the delete button is activated. Delete can only be activated if there is more than one reachability area currently on the map. If there is only one then it will be automatically deleted and the "reachability:delete" event will fired instead. If no reachability areas are on the map the button will highlight an error to the user.
"reachability:delete_deactivated" Event Fired when the delete button is deactivated.
"reachability:delete" Event Fired when a reachability area is deleted from the map.
"reachability:api_call_start" Event Fired when a call to the openrouteservice API is started.
"reachability:api_call_end" Event Fired when a call to the openrouteservice API is ended.
"reachability:displayed" Event Fired when reachability polygon(s) are displayed on the map following an openrouteservice API call. See example 3 for reference.
"reachability:no_data" Event Fired when the openrouteservice API returns no reachability areas following a call.
"reachability:error" Event Fired when a call to the openrouteservice API cannot be made for some reason.

API/plugin output

Upon completion of a successful call to the openrouteservice API, two objects belonging to the plugin instance will contain data, isolinesGroup and latestIsolines. If the plugin was initialised like this...

var reachabilityControl = L.control.reachability({
    // add settings/options here
    apiKey: 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx'
}).addTo(map);

...the objects can be read like this...

reachabilityControl.isolinesGroup;
reachabilityControl.latestIsolines;

Both objects are types of the Leaflet L.geoJSON layer object. The object isolinesGroup contains all the sets of reachability area polygons (and origin markers if showOriginMarker is true) that are currently drawn on the map. As the name suggests, latestIsolines contains the latest reachability areas returned from the most recent call to the API. If the user chooses to show the intervals between 0 and the value they have selected in the distance or time range select list, latestIsolines will contain a group of polygons, whereas if the intervals box is not checked it will only contain a single polygon. Important to also bear in mind, unless the showOriginMarker option is set to false, the latestIsolines group will also contain an additional feature for the origin marker.

Within the properties object of each reachability polygon are various key/value pairs of data about the polygon, as shown in the example output below for a single reachability area created with an origin marker. (Please note that the order of the key/value pairs cannot be guaranteed and may be different from those shown below. The presence of "Area", "Area units", "Population" and "Reach factor" are dependent on the value of the attributes parameter - see above.):

{
    "type":"FeatureCollection",
    "features":[
        {
            "type":"Feature",
            "geometry":{
                "type":"Polygon",
                "coordinates":[
                    [[-2.370967,53.431257],[-2.36845,53.430113],[-2.36371,53.422503],[-2.364027,53.41888],[-2.363917,53.416437],[-2.364106,53.409888],[-2.364085,53.409858],[-2.355248,53.405067],[-2.351026,53.401611],[-2.350658,53.401514],[-2.349777,53.401307],[-2.342775,53.401318],[-2.339174,53.401537],[-2.327938,53.404358],[-2.321353,53.404366],[-2.31331,53.401548],[-2.306582,53.406475],[-2.300036,53.416301],[-2.298577,53.420985],[-2.297909,53.423529],[-2.298552,53.42516],[-2.299297,53.426989],[-2.300775,53.429392],[-2.300912,53.429455],[-2.308067,53.434208],[-2.311778,53.438383],[-2.313744,53.440942],[-2.313902,53.440948],[-2.315041,53.440358],[-2.324808,53.436981],[-2.334137,53.434914],[-2.344139,53.438308],[-2.346769,53.438204],[-2.349127,53.437997],[-2.349301,53.43793],[-2.355581,53.435077],[-2.367244,53.433695],[-2.369887,53.434701],[-2.370145,53.434762],[-2.370967,53.431257]]
                ]
            },
            "properties":{
                "Area":15.41,
                "Area units":"km^2",
                "Latitude":53.423855,
                "Longitude":-2.332535,
                "Measure":"time",
                "Population":62534,
                "Range":10,
                "Range units":"min",
                "Reach factor":0.1978,
                "Travel mode":"cycling-regular"
            }
        },
        {
            "type":"Feature",
            "geometry":{
                "type":"Point",
                "coordinates":[-2.332535,53.423855]
            },
            "properties":{}
        }
    ]
}

The table below describes the contents of the polygon properties object. NOTE: keys marked with an * are dependant on the values chosen in the attributes parameter (see above):

Key Type Description
*"Area" Number Approximate area covered by the polygon, measured in "Area units". For this key to be present, the attributes parameter must contain the string "area".
*"Area units" String Units for the "Area" value. This will be set to the square of the units of the plugin option rangeControlDistanceUnits, e.g. "m^2", "km^2" or "mi^2". For this key to be present, the attributes parameter must contain the string "area".
"Latitude" Number Latitude of the point of origin for the reachability polygon.
"Longitude" Number Longitude of the point of origin for the reachability polygon.
"Measure" String Either "time" or "distance".
*"Population" Number Estimate of the number of people living in the area covered by the polygon. This value is supplied in the openrouteservice API via Global Human Settlement (GHS) data.
"Range" Number Range value of the reachability polygon measured in "Range units".
"Range units" String If "Measure" is "time" this value will be "min" (minutes), otherwise it will be set to the units of the plugin option rangeControlDistanceUnits, e.g. "m", "km" or "mi".
*"Reach factor" Number The ratio of a reachability polygon's area to the theoretically possible area reachable if there were no roads (i.e. as the crow flies).
"Travel mode" String The openrouteservice API mode of travel profile of the reachability polygon e.g. "foot-walking", "wheelchair", "cycling-regular", "driving-car" etc.

These properties can be bound to a popup or displayed within a custom container when the user selects a reachability area etc.

Version

If the plugin was initialised with an object called reachabilityControl, you can obtain the version number using reachabilityControl.version. This will return a string in the Semantic Versioning format "MAJOR.MINOR.PATCH" e.g. "2.0.1".

Examples

The following code examples, in addition to the demo page, demonstrate the types of customisation possible using the options and events in the tables above. The plugin has been designed to follow the same coding style and methodology as shown in the Leaflet tutorials and so should provide a familiar method of integrating and interacting with the plugin in your applications.

Example 1: Changing the HTML content of the expand button to an icon

This example is applicable to all the buttons associated with the plugin. For this example we will be using Font Awesome 4.7.0 icons but you can apply the same principle to other versions or icon libraries.

First include the icon library file:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"/>

Then specify the options within the code to initialise the plugin. Here we are using expandButtonContent and expandButtonStyleClass to show a map marker icon instead of the default ☉ character:

// Create the Leaflet map object
var map = L.map('map', { center: [53.4189, -2.33] });

// Initialise the reachability plugin
L.control.reachability({
    // add settings/options here
    apiKey: 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx',
    expandButtonContent: '',
    expandButtonStyleClass: 'reachability-control-expand-button fa fa-map-marker'
}).addTo(map);

Example 2: Styling the reachability polygons

The easiest way to style the reachability polygons is by creating a function and passing it via the styleFn option. This is demonstrated in the example below which colours all the polygons red with transparency:

// Create the Leaflet map object
var map = L.map('map', { center: [53.4189, -2.33] });

// Function to style the reachability polygons
function styleIsolines(feature) {
    return {
        color: '#ff0000',
        opacity: 0.5,
        fillOpacity: 0.2
    };
}

// Initialise the reachability plugin
L.control.reachability({
    // add settings/options here
    apiKey: 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx',
    styleFn: styleIsolines
}).addTo(map);

Notice the feature parameter in the styleIsolines function. This can be used to conditionally style the reachability polygons based on their property values. The following example demonstrates how to style each polygon based on its range. NOTE: the example assumes the default range values for distance and time:

// Create the Leaflet map object
var map = L.map('map', { center: [53.4189, -2.33] });

// Function to return a colour based on the 'Range' value of the reachability polygons
function getColourByRange(value) {
    switch (value) {
        case 5:
            return '#ff0000';
        case 10:
            return '#00ff00';
        case 15:
            return '#0000ff';
        case 20:
            return '#ffff00';
        case 25:
            return '#ff00ff';
        default:
            return '#00ffff'
    }
}

// Function to style the reachability polygons
function styleIsolines(feature) {
    // Get the value of the range property of the feature
    var rangeVal = feature.properties['Range'];
    // If the range is based on distance, multiply the value by 10 to match the time range values
    if (feature.properties['Measure'] == 'distance') rangeVal = rangeVal * 10;

    return {
        color: getColourByRange(rangeVal),
        opacity: 0.5,
        fillOpacity: 0.2
    };
}

// Initialise the reachability plugin
L.control.reachability({
    // add settings/options here
    apiKey: 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx',
    styleFn: styleIsolines
}).addTo(map);

This is similar to the method introduced in the Leaflet Interactive Choropleth Map tutorial.

Example 3: Responding to events

The following example demonstrates responding to the reachability:displayed event to create popups containing information about the reachability areas created:

// Create the Leaflet map object
var map = L.map('map', { center: [53.4189, -2.33] });

// Listen for the event fired when reachability areas are created on the map
map.on('reachability:displayed', function (e) {
    var properties,
        content;

    // Iterate through the reachability polygons just created, binding a popup to each one
    reachabilityControl.latestIsolines.eachLayer(function (layer) {
        // Ensure we only bind popups to the polygons and not the origin marker.
        // Marker layers don't have the 'feature' property
        if (layer.hasOwnProperty('feature')) {
            properties = layer.feature.properties;
            content = 'Reachability 0 - ' + properties['Range'] + ' ' + properties['Range units'] + '<br />based on ' + properties['Travel mode'] + ' profile';
            layer.bindPopup(content);
        }
    });
});

// Initialise the reachability plugin
L.control.reachability({
    // add settings/options here
    apiKey: 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx'
}).addTo(map);

Example 4: Customising the travel mode buttons

The following example demonstrates how to customise the travel mode buttons for your usage requirements, in this instance to compare the difference in reachability between cycling on a road bike compared to a mountain bike.

This example again uses Font Awesome 4.7.0 icons but you can apply the same principle to other versions or icon libraries.

First include the icon library file:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"/>

Then specify the options within the code to initialise the plugin.

// Create the Leaflet map object
var map = L.map('map', { center: [53.4189, -2.33] });

// Initialise the reachability plugin
L.control.reachability({
    // add settings/options here
    apiKey: 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx',
    travelModeButton1Content: '',
    travelModeButton1StyleClass: 'fa fa-bicycle',
    travelModeButton1Tooltip: 'Road bike',
    travelModeProfile1: 'cycling-road',
    travelModeButton2Content: '',
    travelModeButton2StyleClass: 'fa fa-bicycle',
    travelModeButton2Tooltip: 'Mountain bike',
    travelModeProfile2: 'cycling-mountain',
    travelModeProfile3: null,   // we don't want the third...
    travelModeProfile4: null    // ...or fourth travel mode buttons
}).addTo(map);

Licence

This software is provided under the terms of the MIT License.

Attribution

© openrouteservice.org by HeiGIT | Map data © OpenStreetMap contributors

About

Plugin for the Leaflet JavaScript library to show areas of reachability based on time or distance for different modes of travel using the openrouteservice isochrones API.

Topics

Resources

License

Stars

Watchers

Forks

Packages

No packages published