Skip to content

mapbox/directions-icons

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

9 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

directions-icons

Standard set icons used for the v5 Mapbox Directions API.

On every directions API response there is a maneuver object on each step. Within the maneuver object, there are modifier and type keys. These keys are concatenated together with a _ and prefixed with direction_ to form an icon string that maps 1:1 with the icons in this repository.

{
    "maneuver": {
        "type": "turn",
        "location": {
            "type": "Point",
            "coordinates": [
                -122.447702,
                37.791708
            ]
        },
        "modifier": "left",
        "instruction": "Turn left onto Presidio Avenue"
    },
    "distance": 558,
    "duration": 53,
    "way_name": "Presidio Avenue",
    "direction": "S",
    "heading": 171,
    "mode": "driving"
}

The icons for this step would be direction_turn_left.png.

In cases where there is not a modifier the icon would be the type + .png. Example:

{
    "maneuver": {
        "type": "continue",
        "location": {
            "type": "Point",
            "coordinates": [
                -122.447702,
                37.791708
            ]
        },
        "instruction": "Continue onto Presidio Avenue"
    },
    "distance": 558,
    "duration": 53,
    "way_name": "Presidio Avenue",
    "direction": "S",
    "heading": 171,
    "mode": "driving"
}

The-icons for this step would be direction_continue.png.

Icons

To see available icons, see icons.md

Install and Usage

git clone https://github.com/mapbox/directions-icons.git
cd directions-icons
npm install
npm start

Custom colors

In index.js you can add to the colors object:

var colors = [{
    name: 'dark',
    color: '#000'
}, {
    name: 'light',
    color: '#fff'
}];

Simply add a new name and and new color and re-run with npm start. This will create a new folder color name and an updated zip.

Adding a new icon

To add a new icon:

  1. Create an svg
  2. Name it type_modifier and save it to src/svg/. Example: turn_left.svg
  3. run node index.js

License

To the extent possible under law, the author(s) have dedicated all copyright and related and neighboring rights to this software to the public domain worldwide. This software is distributed without any warranty.

CC0-1.0

About

Navigation specific icons

Resources

License

Code of conduct

Security policy

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published