Highway areas (area:highway)

This style provides visual support for mapping highway areas (​area:highway).

Features

• Colored highway areas by highway category/type of area
• Pattern for junctions
• Colored casing, depending on surface
• Colored street parking areas

(See also on ​GitHub.)

Sample images

^{(data used for images ​©OpenStreetMap contributors ODbL)}

Code

meta {
    title: "Highway areas";
    description: "Visual support for mapping highway areas (area:highway).";
    link: "https://josm.openstreetmap.de/wiki/Styles/HighwayAreas";
    icon: "area_highway.png";
    author: "Alex Seidel (Supaplex030)";
    version: "1.4_2023-07-26";
    min-josm-version: "11700";
}

meta[lang=de]
{
    title: "Straßenflächen";
    description: "Visuelle Unterstützung bei der Kartierung von Straßenflächen (area:highway).";
}

/* default/backup filling */
area[area:highway]
{
    fill-opacity: 0.4;
    fill-color: #000000;
    fill-extent: 50;
}

/* ------------------------------------------------------------ */
/* Fill highway areas with color, depending on highway category */
/* ------------------------------------------------------------ */

area[area:highway=primary],
area[area:highway=primary_link]
{
    fill-color: #FF6633;
}

area[area:highway=secondary],
area[area:highway=secondary_link]
{
    fill-color: #FF9966;
}

area[area:highway=tertiary],
area[area:highway=tertiary_link]
{
    fill-color: #FFFF99;
}

area[area:highway=residential],
area[area:highway=unclassified],
area[area:highway=road]
{
    fill-color: white;
}

area[area:highway=living_street],
area[area:highway=turning_circle]
{
    fill-color: #C8C8FF;
}

area[area:highway=service]
{
    fill-color: #808080;
}

area[area:highway=pedestrian],
area[area:highway=footway],
area[area:highway=path]
{
    fill-color: #FFFF55;
    fill-opacity: 0.5;
}

area[area:highway=cycleway]
{
    fill-color: #745CEF;
    fill-opacity: 0.5;
}

/* ---------------------------------------------------- */
/* Casing on inside of highway areas colored by surface */
/* ---------------------------------------------------- */

area[area:highway]:clockwise
{
    right-casing-width: 10;
    right-casing-color: gray;
    right-casing-opacity: 0.3;
}

area[area:highway]:anticlockwise
{
    left-casing-width: 10;
    left-casing-color: gray;
    left-casing-opacity: 0.3;
}

area[area:highway][!surface]
{
    left-casing-width: 0;
    right-casing-width: 0;
}

area[area:highway][surface=asphalt],
area[area:highway][surface=paved]
{
    left-casing-color: black;
    right-casing-color: black;
}

area[area:highway][surface=sett],
area[area:highway][surface=cobblestone],
area[area:highway][surface=unhewn_cobblestone]
{
    left-casing-color: navy;
    right-casing-color: navy;
}

area[area:highway][surface=paving_stones]
{
    left-casing-color: orange;
    right-casing-color: orange;
}

area[area:highway][surface=concrete],
area[area:highway][surface="concrete:plates"],
area[area:highway][surface="concrete:lanes"]
{
    left-casing-color: maroon;
    right-casing-color: maroon;
}

area[area:highway][surface=grass],
area[area:highway][surface=grass_paver]
{
    left-casing-color: green;
    right-casing-color: green;
}

/* -------------------------------------- */
/* Some color options for specific areas */
/* -------------------------------------- */

area[area:highway=traffic_island]
{
    fill-color: gray;
    fill-opacity: 0.8;
    right-casing-width: 0;
    left-casing-width: 0;
}

area[area:highway=prohibited]
{
    fill-color: white;
    fill-opacity: 0.3;
    right-casing-width: 0;
    left-casing-width: 0;
}

area[amenity=parking][parking=lane],
area[amenity=parking][parking=street_side],
area[amenity=parking][parking=on_kerb],
area[amenity=parking][parking=half_on_kerb],
area[amenity=parking][parking=shoulder]
{
    fill-opacity: 0.4;
    fill-color: #7D3C98;
    fill-extent: 50;
}

/* ----------------------------------- */
/* Fill junctions with striped pattern */
/* ----------------------------------- */

area[area:highway][junction=yes][area:highway=primary],
area[area:highway][junction=yes][area:highway=primary_link]
{
    fill-image: images/stripe_texture_FF6633.svg;
}

area[area:highway][junction=yes][area:highway=secondary],
area[area:highway][junction=yes][area:highway=secondary_link]
{
    fill-image: images/stripe_texture_FF9966.svg;
}

area[area:highway][junction=yes][area:highway=tertiary],
area[area:highway][junction=yes][area:highway=tertiary_link]
{
    fill-image: images/stripe_texture_FFFF99.svg;
}

area[area:highway][junction=yes][area:highway=residential],
area[area:highway][junction=yes][area:highway=unclassified],
area[area:highway][junction=yes][area:highway=road]
{
    fill-image: images/stripe_texture_white.svg;
}

area[area:highway][junction=yes][area:highway=living_street],
area[area:highway][junction=yes][area:highway=turning_circle]
{
    fill-image: images/stripe_texture_C8C8FF.svg;
}

area[area:highway][junction=yes][area:highway=pedestrian],
area[area:highway][junction=yes][area:highway=footway],
area[area:highway][junction=yes][area:highway=path]
{
    fill-image: images/stripe_texture_FFFF55.svg;
}

area[area:highway][junction=yes][area:highway=cycleway]
{
    fill-image: images/stripe_texture_745CEF.svg;
}

Styles_HighwayAreas-style.mapcss, Styles_HighwayAreas.zip