Instruction icons in CSS¶

Instruction Icons CSS¶

.leaflet-routing-icon {
    background-image: url('https://apis.mapmyindia.com/map_v3/osrm.directions.icons.color.svg');
    -webkit-background-size: 455px 20px;   background-size: 455px 20px;
    background-repeat: no-repeat;    margin: 0;    content: '';
    display: inline-block;    vertical-align: top;    width: 20px;    height: 20px;
}
.leaflet-routing-icon.lanes.invalid {    filter: invert(50%);}
.leaflet-routing-alt-minimized .leaflet-routing-icon {
    background-image: url('https://apis.mapmyindia.com/map_v3/osrm.directions.icons.color.svg');
}
.leaflet-routing-icon-continue         { background-position: 2px 0px; }
.leaflet-routing-icon-sharp-right      { background-position: -24px 0px; }
.leaflet-routing-icon-turn-right       { background-position: -50px 0px; }
.leaflet-routing-icon-bear-right       { background-position: -74px 0px; }
.leaflet-routing-icon-u-turn           { background-position: -101px 0px; }
.leaflet-routing-icon-sharp-left       { background-position: -127px 0px; }
.leaflet-routing-icon-turn-left        { background-position: -150px 0px; }
.leaflet-routing-icon-bear-left        { background-position: -175px 0px; }
.leaflet-routing-icon-depart           { background-position: -202px 0px; }
.leaflet-routing-icon-enter-roundabout { background-position: -227px 0px; }
.leaflet-routing-icon-arrive           { background-position: -253px 0px; }
.leaflet-routing-icon-via              { background-position: -278px 0px; }
.leaflet-routing-icon-fork             { background-position: -305px 0px; }
.leaflet-routing-icon-ramp-right       { background-position: -331px 0px; }
.leaflet-routing-icon-ramp-left        { background-position: -352px 0px; }
.leaflet-routing-icon-merge-left       { background-position: -376px 0px; }
.leaflet-routing-icon-merge-right      { background-position: -403px 0px; }

For any queries and support, please contact:

Email us at apisupport@mappls.com

Support Need support? contact us!