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.
To see available icons, see icons.md
git clone https://github.com/mapbox/directions-icons.git
cd directions-icons
npm install
npm start
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.
To add a new icon:
- Create an svg
- Name it
type_modifierand save it tosrc/svg/. Example:turn_left.svg - run
node index.js
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.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent