Cycleway Styling (BNA)

This style was developed to aid in editing for the ​PeopleforBikes Bicycle Network Analysis (BNA). It adds line decorations to visualize on and off-road cycle tags, as well as relevant on-street parking. Notably, it displays individual sides of the road, and includes cycleway buffers. Deprecated tags are shown in different colors to suggest edits. The style works with the internal JOSM Default style, but is optimized for use with the Potlatch 2 style enabled as well.

Legend

Code

meta 
{
        title: "Cycleway Styling (BNA)";
        description: "This style was developed to aid in editing for the PeopleforBikes Bicycle Network Analysis (BNA). It adds line decorations to visualize on and off-road cycle tags, as well as relevant on-street parking. Notably, it displays individual sides of the road, and includes cycleway buffers. Deprecated tags are shown in different colors to suggest edits.";
        version: "0.7_2023-03-14";
        author: "pkoby";
        link: "https://josm.openstreetmap.de/wiki/Styles/CyclewaysStylingBNA";
}

way::base {
        offset: 0;  
}

way::justlane {
        offset: prop("offset", "base");
}
way[highway][cycleway=lane]::justlane {
        color: #55f;
        dashes: 5,2;
        width: 4;
        offset: prop("offset")-10;
}
way::justlane2 {
        offset: prop("offset", "base");
}
way[highway][cycleway=lane]::justlane2 {
        color: #55f;
        dashes: 5,2;
        width: 4;
        offset: prop("offset")+10;
}

way::lane {
        offset: prop("offset", "base");
}
way[highway][cycleway:both=lane]::lane,way[highway][cycleway:right=lane]::lane {
        color: blue;
        dashes: 5,2;
        width: 4;
        offset: prop("offset")-10;
}
way::lane2 {
        offset: prop("offset", "base");
}
way[highway][cycleway:both=lane]::lane2,way[highway][cycleway:left=lane]::lane2 {
        color: blue;
        dashes: 5,2;
        width: 4;
        offset: prop("offset")+10;
}

way::twolanesnobuff {
        offset: prop("offset", "base");
}
way[highway][cycleway:left=lane][cycleway:right=lane][!cycleway:left:buffer][!cycleway:right:buffer]::twolanesnobuff {
        color: #ff4400;
        dashes: 5,2;
        width: 4;
        offset: prop("offset")-10;
        z-index: 10;
}
way::twolanesnobuff2 {
        offset: prop("offset", "base");
}
way[highway][cycleway:left=lane][cycleway:right=lane][!cycleway:left:buffer][!cycleway:right:buffer]::twolanesnobuff2 {
        color: #ff4400;
        dashes: 5,2;
        width: 4;
        offset: prop("offset")+10;
        z-index: 10;
}

way::advisorylane {
        offset: prop("offset", "base");
}
way[highway][cycleway:lane=advisory]::advisorylane,way[highway][cycleway:both:lane=advisory]::advisorylane,way[highway][cycleway:right:lane=advisory]::advisorylane {
        color: orange;
        dashes: 5,9;
        width: 4;
        offset: prop("offset")-10;
        z-index: 5;
}
way::advisorylane2 {
        offset: prop("offset", "base");
}
way[highway][cycleway:lane=advisory]::advisorylane2,way[highway][cycleway:both:lane=advisory]::advisorylane2,way[highway][cycleway:left:lane=advisory]::advisorylane2 {
        color: orange;
        dashes: 5,9;
        width: 4;
        offset: prop("offset")+10;
        z-index: 5;
}

way::sharedparking {
        offset: prop("offset", "base");
}
way[highway][cycleway=shared_parking_lane]::sharedparking,way[highway][cycleway:both=shared_parking_lane]::sharedparking,way[highway][cycleway:right=shared_parking_lane]::sharedparking {
        color: yellow;
        dashes: 5,2;
        width: 4;
        offset: prop("offset")-10;
        opacity: 0.7;
}
way::sharedparking2 {
        offset: prop("offset", "base");
}
way[highway][cycleway=shared_parking_lane]::sharedparking2,way[highway][cycleway:both=shared_parking_lane]::sharedparking2,way[highway][cycleway:left=shared_parking_lane]::sharedparking2 {
        color: yellow;
        dashes: 5,2;
        width: 4;
        offset: prop("offset")+10;
        opacity: 0.7;
}

way::buffered_lane {
        offset: prop("offset", "base");
}
way[highway][cycleway=buffered_lane]::buffered_lane,way[highway][cycleway:both=buffered_lane]::buffered_lane,way[highway][cycleway:right=buffered_lane]::buffered_lane {
        color: #f50;
        dashes: 5,2;
        width: 4;
        offset: prop("offset")-10;
}
way::buffered_lane2 {
        offset: prop("offset", "base");
}
way[highway][cycleway=buffered_lane]::buffered_lane2,way[highway][cycleway:both=buffered_lane]::buffered_lane2,way[highway][cycleway:left=buffered_lane]::buffered_lane2 {
        color: #f50;
        dashes: 5,2;
        width: 4;
        offset: prop("offset")+10;
}

way::opplane {
        offset: prop("offset", "base");
}
way[highway][cycleway:right=opposite_lane]::opplane {
        color: #0af;
        dashes: 5,2;
        width: 4;
        offset: prop("offset")-10;
}
way::opplane2 {
        offset: prop("offset", "base");
}
way[highway][cycleway:left=opposite_lane]::opplane2 {
        color: #0af;
        dashes: 5,2;
        width: 4;
        offset: prop("offset")+10;
}

way::busway {
        offset: prop("offset", "base");
}
way[highway][cycleway=share_busway]::busway,way[highway][cycleway:both=share_busway]::busway,way[highway][cycleway:right=share_busway]::busway {
        color: #f33;
        dashes: 24,4;
        width: 4;
        offset: prop("offset")-10;
}
way::busway2 {
        offset: prop("offset", "base");
}
way[highway][cycleway=share_busway]::busway2,way[highway][cycleway:both=share_busway]::busway2,way[highway][cycleway:left=share_busway]::busway2 {
        color: #f33;
        dashes: 24,4;
        width: 4;
        offset: prop("offset")+10;
}

way::shoulder {
        offset: prop("offset", "base");
}
way[highway][cycleway=shoulder]::shoulder,way[highway][cycleway:both=shoulder]::shoulder,way[highway][cycleway:right=shoulder]::shoulder {
        color: #248;
        dashes: 8,18;
        width: 4;
        offset: prop("offset")-10;
}
way::shoulder2 {
        offset: prop("offset", "base");
}
way[highway][cycleway=shoulder]::shoulder2,way[highway][cycleway:both=shoulder]::shoulder2,way[highway][cycleway:left=shoulder]::shoulder2 {
        color: #248;
        dashes: 8,18;
        width: 4;
        offset: prop("offset")+10;
}

way::separate {
        offset: prop("offset", "base");
}
way[highway][cycleway=separate]::separate,way[highway][cycleway:both=separate]::separate,way[highway][cycleway:right=separate]::separate {
        color: blue;
        dashes: 2,8;
        width: 4;
        offset: prop("offset")-10;
}
way::separate2 {
        offset: prop("offset", "base");
}
way[highway][cycleway=separate]::separate2,way[highway][cycleway:both=separate]::separate2,way[highway][cycleway:left=separate]::separate2 {
        color: blue;
        dashes: 2,8;
        width: 4;
        offset: prop("offset")+10;
}

way::justtrack {
        offset: prop("offset", "base");
}
way[highway][cycleway=track]::justtrack {
        color: #55f;
        dashes: 24,4;
        width: 4;
        offset: prop("offset")-10;
}
way::justtrack2 {
        offset: prop("offset", "base");
}
way[highway][cycleway=track]::justtrack2 {
        color: #55f;
        dashes: 24,4;
        width: 4;
        offset: prop("offset")+10;
}

way::track {
        offset: prop("offset", "base");
}
way[highway][cycleway:both=track]::track,way[highway][cycleway:right=track]::track {
        color: blue;
        dashes: 24,4;
        width: 4;
        offset: prop("offset")-10;
}
way::track2 {
        offset: prop("offset", "base");
}
way[highway][cycleway=track]::track2,way[highway][cycleway:both=track]::track2,way[highway][cycleway:left=track]::track2 {
        color: blue;
        dashes: 24,4;
        width: 4;
        offset: prop("offset")+10;
}

way::twotrack {
        offset: prop("offset", "base");
}
way[highway][cycleway:right=track][cycleway:right:oneway=no]::twotrack {
        color: #0af;
        dashes: 24,4;
        width: 4;
        offset: prop("offset")-15;
}
way::twotrack2 {
        offset: prop("offset", "base");
}
way[highway][cycleway:left=track][cycleway:left:oneway=no]::twotrack2 {
        color: #0af;
        dashes: 24,4;
        width: 4;
        offset: prop("offset")+15;
}

way::opptrack {
        offset: prop("offset", "base");
}
way[highway][cycleway:right=track][oneway=yes][oneway:bicycle=no]::opptrack,way[highway][cycleway:right=opposite_track][oneway=yes]::opptrack {
        color: #0af;
        dashes: 24,4;
        width: 4;
        offset: prop("offset")-10;
}
way::opptrack2 {
        offset: prop("offset", "base");
}
way[highway][cycleway:left=track][oneway=yes][oneway:bicycle=no]::opptrack2,way[highway][cycleway:left=opposite_track][oneway=yes]::opptrack2 {
        color: #0af;
        dashes: 24,4;
        width: 4;
        offset: prop("offset")+10;
}

way::sharedlane {
        offset: prop("offset", "base");
}
way[highway][cycleway:both=shared_lane]::sharedlane,way[highway][cycleway:right=shared_lane]::sharedlane {
        color: blue;
        dashes: 4,10;
        width: 4;
        offset: prop("offset")-10;
}
way::sharedlane2 {
        offset: prop("offset", "base");
}
way[highway][cycleway:both=shared_lane]::sharedlane2,way[highway][cycleway:left=shared_lane]::sharedlane2 {
        color: blue;
        dashes: 4,10;
        width: 4;
        offset: prop("offset")+10;
}

way::justsharedlane {
        offset: prop("offset", "base");
}
way[highway][cycleway=shared_lane]::justsharedlane {
        color: #55f;
        dashes: 4,10;
        width: 4;
        offset: prop("offset")-10;
}
way::justsharedlane2 {
        offset: prop("offset", "base");
}
way[highway][cycleway=shared_lane]::justsharedlane2 {
        color: #55f;
        dashes: 4,10;
        width: 4;
        offset: prop("offset")+10;
}

way::buffer {
        offset: prop("offset", "base");
}
way[highway][cycleway:both:buffer=yes]::buffer,way[highway][cycleway:right:buffer=yes]::buffer {
        color: #0f0;
        width: 4;
        offset: prop("offset")-6;
}
way::buffer2 {
        offset: prop("offset", "base");
}
way[highway][cycleway:both:buffer=yes]::buffer2,way[highway][cycleway:left:buffer=yes]::buffer2 {
        color: #0f0;
        width: 4;
        offset: prop("offset")+6;
}

way::nobuffer {
        offset: prop("offset", "base");
}
way[highway][cycleway:both:buffer=no]::nobuffer,way[highway][cycleway:right:buffer=no]::nobuffer {
        color: red;
        width: 4;
        offset: prop("offset")-6;
}
way::nobuffer2 {
        offset: prop("offset", "base");
}
way[highway][cycleway:both:buffer=no]::nobuffer2,way[highway][cycleway:left:buffer=no]::nobuffer2 {
        color: red;
        width: 4;
        offset: prop("offset")+6;
}

way::wrongbuffer {
        offset: prop("offset", "base");
}
way[highway][cycleway:buffer=yes]::wrongbuffer,way[highway][cycleway:buffer=no]::wrongbuffer {
        color: yellow;
        width: 4;
        offset: prop("offset")-6;
}
way::wrongbuffer2 {
        offset: prop("offset", "base");
}
way[highway][cycleway:buffer=yes]::wrongbuffer2,way[highway][cycleway:buffer=no]::wrongbuffer2 {
        color: yellow;
        width: 4;
        offset: prop("offset")+6;
}

way::parkparallel {
        offset: prop("offset", "base");
}
way[highway][parking:both=lane][parking:both:orientation=parallel]::parkparallel,way[highway][parking:both=street_side][parking:both:orientation=parallel]::parkparallel,way[highway][parking:right=lane][parking:right:orientation=parallel]::parkparallel,way[highway][parking:right=street_side][parking:right:orientation=parallel]::parkparallel {
        color: #ff0;
        dashes: 10,4;
        width: 5;
        offset: prop("offset")-15;
        opacity: 0.5;
}
way::parkparallel2 {
        offset: prop("offset", "base");
}
way[highway][parking:both=lane][parking:both:orientation=parallel]::parkparallel2,way[highway][parking:both=street_side][parking:both:orientation=parallel]::parkparallel2,way[highway][parking:left=lane][parking:left:orientation=parallel]::parkparallel2,way[highway][parking:left=street_side][parking:left:orientation=parallel]::parkparallel2 {
        color: #ff0;
        dashes: 10,4;
        width: 5;
        offset: prop("offset")+15;
        opacity: 0.5;
}

way::parkparallelold {
        offset: prop("offset", "base");
}
way[highway][parking:lane=parallel]::parkparallelold,way[highway][parking:lane:both=parallel]::parkparallelold,way[highway][parking:lane:right=parallel]::parkparallelold {
        color: #f00;
        dashes: 10,4;
        width: 5;
        offset: prop("offset")-15;
        opacity: 0.8;
}
way::parkparallelold2 {
        offset: prop("offset", "base");
}
way[highway][parking:lane=parallel]::parkparallelold2,way[highway][parking:lane:both=parallel]::parkparallelold2,way[highway][parking:lane:left=parallel]::parkparallelold2 {
        color: #f00;
        dashes: 10,4;
        width: 5;
        offset: prop("offset")+15;
        opacity: 0.8;
}

way::parkperp {
        offset: prop("offset", "base");
}
way[highway][parking:both=lane][parking:both:orientation=perpendicular]::parkperp,way[highway][parking:right=lane][parking:right:orientation=perpendicular]::parkperp {
        color: #ff0;
        dashes: 5,5;
        width: 12;
        offset: prop("offset")-15;
        opacity: 0.5;
}
way::parkperp2 {
        offset: prop("offset", "base");
}
way[highway][parking:both=lane][parking:both:orientation=perpendicular]::parkperp2,way[highway][parking:left=lane][parking:left:orientation=perpendicular]::parkperp2 {
        color: #ff0;
        dashes: 5,5;
        width: 12;
        offset: prop("offset")+15;
        opacity: 0.5;
}

way::parkperpold {
        offset: prop("offset", "base");
}
way[highway][parking:lane=perpendicular]::parkperpold,way[highway][parking:lane:both=perpendicular]::parkperpold,way[highway][parking:lane:right=perpendicular]::parkperpold {
        color: #f00;
        dashes: 5,5;
        width: 12;
        offset: prop("offset")-15;
        opacity: 0.8;
}
way::parkperpold2 {
        offset: prop("offset", "base");
}
way[highway][parking:lane=perpendicular]::parkperpold2,way[highway][parking:lane:both=perpendicular]::parkperpold2,way[highway][parking:lane:left=perpendicular]::parkperpold2 {
        color: #f00;
        dashes: 5,5;
        width: 12;
        offset: prop("offset")+15;
        opacity: 0.8;
}

way::parkdiag {
        offset: prop("offset", "base");
}
way[highway][parking:both=lane][parking:both:orientation=diagonal]::parkdiag,way[highway][parking:right=lane][parking:right:orientation=diagonal]::parkdiag {
        color: #fa0;
        dashes: 8,5;
        width: 10;
        offset: prop("offset")-15;
        opacity: 0.5;
}
way::parkdiag2 {
        offset: prop("offset", "base");
}
way[highway][parking:both=lane][parking:both:orientation=diagonal]::parkdiag2,way[highway][parking:left=lane][parking:left:orientation=diagonal]::parkdiag2 {
        color: #fa0;
        dashes: 8,5;
        width: 10;
        offset: prop("offset")+15;
        opacity: 0.5;
}

way::parkdiagold {
        offset: prop("offset", "base");
}
way[highway][parking:lane=diagonal]::parkdiagold,way[highway][parking:lane:both=diagonal]::parkdiagold,way[highway][parking:lane:right=diagonal]::parkdiagold {
        color: #f00;
        dashes: 8,5;
        width: 10;
        offset: prop("offset")-15;
        opacity: 0.8;
}
way::parkdiagold2 {
        offset: prop("offset", "base");
}
way[highway][parking:lane=diagonal]::parkdiagold2,way[highway][parking:lane:both=diagonal]::parkdiagold2,way[highway][parking:lane:left=diagonal]::parkdiagold2 {
        color: #f00;
        dashes: 8,5;
        width: 10;
        offset: prop("offset")+15;
        opacity: 0.8;
}

way[highway=footway][bicycle=yes]::bike { z-index: 0; color: #55f; width: 4; }
way[highway=footway][bicycle=permissive]::bike { z-index: 0; color: #55f; width: 4; }
way[highway=footway][bicycle=designated]::bike { z-index: 0; color: blue; width: 4; }
way[highway=footway][bicycle=no]::bike { z-index: 0; color: #f00; width: 4; }
way[highway=bridleway][bicycle=yes]::bike { z-index: 0; color: #55f; width: 4; }
way[highway=bridleway][bicycle=permissive]::bike { z-index: 0; color: #55f; width: 4; }
way[highway=bridleway][bicycle=designated]::bike { z-index: 0; color: blue; width: 4; }
way[highway=bridleway][bicycle=no]::bike { z-index: 0; color: #f00; width: 4; }
way[highway=path][bicycle=yes]::bike { z-index: 0; color: #55f; width: 4; }
way[highway=path][bicycle=permissive]::bike { z-index: 0; color: #55f; width: 4; }
way[highway=path][bicycle=designated]::bike { z-index: 0; color: blue; width: 4; }
way[highway=path][bicycle=no]::bike { z-index: 0; color: #f00; width: 4; }
way[highway=pedestrian][bicycle=yes]::bike { z-index: 6; color: blue; width: 2; dashes: 4,4;}
way[highway=pedestrian][bicycle=permissive]::bike { z-index: 6; color: blue; width: 2; dashes: 4,4;}
way[highway=pedestrian][bicycle=designated]::bike { z-index: 6; color: blue; width: 2; dashes: 4,4;}
way[highway=pedestrian][bicycle=no]::bike { z-index: 6; color: #f00; width: 2; dashes: 4,4;}
way[highway=service][bicycle=yes]::bike { z-index: 6; color: blue; width: 2; dashes: 4,4;}
way[highway=service][bicycle=permissive]::bike { z-index: 6; color: blue; width: 2; dashes: 4,4;}
way[highway=service][bicycle=designated]::bike { z-index: 6; color: blue; width: 2; dashes: 4,4;}
way[highway=service][bicycle=no]::bike { z-index: 6; color: #f00; width: 2; dashes: 4,4;}
way[highway=residential][bicycle=yes]::bike { z-index: 6; color: blue; width: 2; dashes: 4,4;}
way[highway=residential][bicycle=permissive]::bike { z-index: 6; color: blue; width: 2; dashes: 4,4;}
way[highway=residential][bicycle=designated]::bike { z-index: 6; color: blue; width: 2; dashes: 4,4;}

Styles_CyclewaysStylingBNA-style.mapcss, Styles_CyclewaysStylingBNA.zip