= [[Image(area_highway.png,32,link=,middle,inline,margin-right=20,title="")]]Highway areas (area:highway) =

This style provides visual support for mapping highway areas ([https://wiki.openstreetmap.org/wiki/Key:area:highway 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 [https://github.com/SupaplexOSM/JOSM-area-highway-Style GitHub].)''

== Sample images ==
[[Image(sample_image01.png,650)]]
[[Image(sample_image02.png,650)]]

^(data used for images [osmwww:copyright ©OpenStreetMap contributors] ODbL)^

== Code ==
{{{
#!style type="mapcss"

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.[[revision]]_[[date]]";
    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;
}

}}}