/* Stylesheet that mimicks, to a certain extent, potlatch 1.x Started by Andy Allan, November 2009 Based heavily on: MapCSS demonstration stylesheet Richard Fairhurst, October 2009 */ /* This rule applies to all areas (closed ways). Note that rules are applied in the order they appear in the file, so later rules may replace this one for some ways. This is used as a debugger for finding unstyled areas; it's obviously oversimplistic since it picks up closed-loop highways. */ /* way :area { color: red; width: 1; fill-color: red; fill-opacity: 0.5; } */ /* A set of fairly standard rules. We use z-index to make sure high-priority roads appear above minor ones. The default z-index is 5. If an object matches multiple rules with the same z-index then the rules are "merged" (but individual properties become one or the other) */ way[highway=motorway],way[highway=motorway_link], way[highway=trunk],way[highway=trunk_link], way[highway=primary],way[highway=primary_link], way[highway=secondary],way[highway=secondary_link], way[highway=tertiary],way[highway=tertiary_link], way[highway=residential],way[highway=unclassified] { text: name; text-color: black; font-size: 10; text-position: line; text-halo-color: white; text-halo-radius: 2; } way[highway=motorway],way[highway=motorway_link] { z-index: 9; color: #809BC0; width: 7; casing-color: black; casing-width: 8; } way[highway=trunk],way[highway=trunk_link] { z-index: 9; color: #7FC97F; width: 7; casing-color: black; casing-width: 8; } way[highway=primary],way[highway=primary_link] { z-index: 8; color: #E46D71; width: 7; casing-color: black; casing-width: 8; } way[highway=secondary],way[highway=secondary_link] { z-index: 7; color: #FDBF6F; width: 7; casing-width: 8; } way[highway=tertiary],way[highway=unclassified] { z-index: 6; color: #FEFECB; width: 5; casing-width: 7; } way[highway=tertiary_link] { z-index: 5; color: #FEFECB; width: 4; casing-width: 5; } way[highway=residential] { z-index: 5; color: #E8E8E8; width: 5; casing-color: gray; casing-width: 7; } way[highway=service][service!=parking_aisle] { color: white; width: 3; casing-color: gray; casing-width: 5; } way[highway=service][service=parking_aisle] { color: white; width: 1; casing-color: #aaaaaa; casing-width: 2; } way[highway=service][service=alley] { color: white; width: 2; dashes: 6,2; casing-color: black; casing-width: 4; } way[highway=road] { color: gray; width: 5; casing-color: white; casing-width: 7; } /* Pedestrian precincts need to be treated carefully. Only closed-loops with an explicit area=yes tag should be filled. The below doesn't yet work as intended. */ way[highway=pedestrian] !:area { color: #ddddee; width: 5; casing-color: #555555; casing-width: 6; casing-dashes: 2,4;} way[highway=pedestrian] :area { color: #555555; width: 1; fill-color: #ddddee; fill-opacity: 0.8; } way[highway=steps] { color: #FF6644; width: 6; dashes: 2, 2; } way[highway=footway] { color: #FF6644; width: 2; dashes: 6, 3; set .path;} way[highway=footway][bicycle=yes] { z-index: 4; color: Blue; width: 1; } way[highway=bridleway] { z-index:9; color: #996644; width: 2; dashes: 4, 2, 2, 2; set .path;} way[highway=track] { color: #996644; width: 2; dashes: 4, 2; .path;} way[highway=path] { color: brown; width: 2; dashes: 2, 2; set .path;} way[highway=cycleway] { color: Blue; width: 2; dashes: 4, 2; set .path;} way[railway=tram] {z-index: 11; color: #999999; width: 2; casing-color: black; casing-width: 6; } way .path {text:name; text-color: black; text-position: offset; text-offset: 5;} /* Could be improved */ way[highway=proposed] { color: #88ffff; width: 6; dashes: 8, 4; } way[highway=construction] { color: #ffffbb; width: 6; dashes: 8, 4; casing-color: #0000aa; casing-width: 8; casing-dashes: 8,4;} way[construction=rail] { z-index: 6; color: black; width: 5; dashes: 6, 6, 4, 8;} { z-index: 7; color: white; width: 3; dashes: 6,18; } way[waterway=river], way[waterway=canal], way[waterway=stream] { color: blue; width: 2; text:name; text-color:blue; font-size:9; text-position: offset; text-offset: 7;} way[waterway=drain] {color: blue; width: 1; text:name; text-color: blue; text-position: offset; text-offset: 3;} way[waterway][tunnel=yes] {dashes: 8,4;} way[barrier] {color: #000000; width: 1} way[barrier=fence] {color: #000000; width: 1; dashes: 8,4,2,4; } /*add node[power=pylon] etc when there's an icon */ way[power=line] {color: darkgray; width: 3; dashes: 12,2; casing-color: black; casing-width: 8; casing-dashes: 4, 38;} way[power=minor_line] {color: gray; width: 2; dashes: 2,4; casing-width: 8; casing-color: white; casing-dashes: 2,22;} way[power=station] :area { color: black; width: 2; fill-color: #666666; fill-opacity: 0.6; set .area_small_name;} way[power=generator] :area { color: black; width: 2; fill-color: #444444; fill-opacity: 0.6; set .area_small_name;} way[golf=hole] {color: darkgreen; width: 5; casing-color: green; casing-width: 10; } /* Fills can be solid colour or bitmap images */ way[natural] :area { color: #ADD6A5; width: 1; fill-color: #ADD6A5; fill-opacity: 0.2; } way[natural=beach] :area { color: #ffdd44; width: 1; fill-color: yellow; fill-opacity: 0.2; set .area_small_name;} way[natural=coastline] { color: black; width: 3; } way[landuse] :area { color: #444444; width: 2; fill-color: #444444; fill-opacity: 0.3; } way[landuse=residential] :area { color: #666666; width: 2; fill-color: #666666; fill-opacity: 0.15; } way[landuse=retail] :area { color: #cc2222; width: 2; fill-color: #aa4422; fill-opacity: 0.15; } way[landuse=commercial] :area { color: #4444bb; width: 2; fill-color: #444488; fill-opacity: 0.15; } way[landuse=military] :area { color: #ff4444; width: 2; fill-color: #ff4444; fill-opacity: 0.2; set .area_small_name; } way[amenity],way[shop] :area { color: #ADCEB5; width: 1; fill-color: #ADCEB5; fill-opacity: 0.2; } way[leisure],way[sport] :area { color: #8CD6B5; width: 1; fill-color: #8CD6B5; fill-opacity: 0.2; } way[tourism] :area { color: #F7CECE; width: 1; fill-color: #F7CECE; fill-opacity: 0.2; set .area_small_name;} way[historic],way[ruins] :area { color: #F7F7DE; width: 1; fill-color: #F7F7DE; fill-opacity: 0.2; set .area_small_name;} way[military] :area { color: #D6D6D6; width: 1; fill-color: #D6D6D6; fill-opacity: 0.2; set .area_small_name;} way[building] :area { color: #ff6ec7; width: 1; fill-color: #ff6ec7; fill-opacity: 0.2; } way[natural=water], way[waterway][waterway!=dam] :area { color: blue; width: 2; fill-color: blue; fill-opacity: 0.2; set .area_small_name;} way[waterway=dam] { color: black; width: 1; fill-color: #222222; fill-opacity: 0.1; set .area_small_name;} way[man_made] :area { color: black; width: 2; fill-color: #222222; fill-opacity: 0.1; set .area_small_name; } way[man_made=reservoir_covered] :area { color: blue; width: 2; dashes: 4, 2; fill-color: #222222; fill-opacity: 0.1; set .area_small_name; } way[landuse=reservoir] :area { color: blue; width: 2; fill-color: blue; fill-opacity: 0.2; set .area_small_name;} way[landuse=forest],way[natural=wood] :area { color: green; width: 2; fill-color: green; fill-opacity: 0.2; set .area_small_name;} way[leisure=park] :area { color: #22aa22; width: 2; fill-color: #44ff44; fill-opacity: 0.15; set .area_small_name;} way[leisure=garden] :area { color: #66ff44; width: 1; fill-color: #66ff44; fill-opacity: 0.2; set .area_small_name;} way[leisure=pitch] :area { z-index: 6; color: #88bb44; width: 2; fill-color: #88ff44; fill-opacity: 0.2; set .area_small_name;} way[landuse=recreation_ground] :area { color: green; fill-color: green; set .area_small_name;} way[amenity=parking] :area { color: #bbaa66; width: 1; fill-color: #bbaa66; fill-opacity: 0.2; } way[public_transport=pay_scale_area] :area { color: gray; width: 1; fill-color: gray; fill-opacity: 0.1; } way[man_made=pier] { z-index: 4; color: #777; width: 3; casing-color: black; casing-width: 5;} way[man_made=pier][floating=yes] { dashes: 4,2; casing-color: #444;} way[leisure=marina] :area { color: pink; fill-color: pink; fill-opacity: 0.4; set .area_small_name;} way[leisure=slipway] { color: grey; width: 3; casing-color: blue; casing-width: 7; } way[leisure=golf_course] :area { color: #44ee22; width: 2; fill-color: #44ee22; fill-opacity: 0.2; set .area_small_name;} way[boundary=administrative] { color: purple; width: 2; opacity: 0.2; dashes: 24,4; } way[landuse=cemetery] { color: #664466; width: 2; fill-color: color: #664466; opacity: 0.2; set .area_small_name;} /* Addressing. Nodes with addresses *and* match POIs should have a poi icon, so we put addressing first */ node[addr:housenumber], node[addr:housename] { icon-image: circle; icon-width: 4; color: #B0E0E6; casing-color:blue; casing-width: 1; } way[addr:interpolation] { color: #B0E0E6; width: 3; dashes: 3,3;} /* POIs, too, can have bitmap icons - they can even be transparent */ node[place] { icon-image: icons/place.png; text-offset: 17; font-family: DejaVu; text: name; font-size: 9; font-weight: bold; text-decoration: underline; z-index: 20; } node[amenity=telephone] { icon-image: icons/telephone.png; z-index: 20; } node[barrier=cattle_grid] { icon-image: icons/cattle_grid.png; z-index: 20; } node[tourism=guesthouse] { icon-image: icons/accommodation_bed_and_breakfast.n.16.png; z-index: 20; } node[tourism=alpine_hut] { icon-image: icons/accommodation_alpinehut.n.16.png; z-index: 20; } node[tourism=camp_site] { icon-image: icons/accommodation_camping.n.16.png; z-index: 20; } node[tourism=caravan_site] { icon-image: icons/accommodation_caravan_park.n.16.png; z-index: 20; } node[tourism=guest_house],node[tourism=bed_and_breakfast] { icon-image: icons/accommodation_bed_and_breakfast.n.16.png; z-index: 20; } node[tourism=hotel] { icon-image: icons/accommodation_hotel.n.16.png; text-offset:15; text: name; z-index: 20; } node[tourism=hostel] { icon-image: icons/accommodation_youth_hostel.n.16.png; z-index: 20; } node[amenity=fire_station] { icon-image: icons/amenity_firestation2.n.16.png; z-index: 20; } node[amenity=police] { icon-image: icons/amenity_police2.n.16.png; z-index: 20; } node[amenity=post_box] { icon-image: icons/amenity_post_box.n.16.png; z-index: 20; } node[amenity=recycling] { icon-image: icons/amenity_recycling.n.16.png; z-index: 20; } node[barrier=bollard] { icon-image: icons/barrier_bollard.n.16.png; z-index: 20; } node[barrier=gate], node[highway=gate] { icon-image: icons/barrier_gate.n.16.png; z-index: 20; } node[barrier=stile], node[highway=stile] { icon-image: icons/barrier_stile.n.16.png; z-index: 20; } node[barrier=toll_booth] { icon-image: icons/barrier_toll_booth.n.16.png; z-index: 20; } node[barrier=lift_gate] { icon-image: icons/barrier_lift_gate.n.16.png; z-index: 20; } node[barrier=kissing_gate] { icon-image: icons/barrier_kissing_gate.16.png; z-index: 20; } node[barrier=cycle_barrier] { icon-image: icons/barrier_cycle_barrier.16.png; z-index: 20; } node[barrier=block] { icon-image: icons/barrier_blocks.16.png; z-index: 20; } node[barrier=cattle_grid] { icon-image: icons/barrier_cattle_grid.16.png; z-index: 20; } node[amenity=school] { icon-image: icons/education_school.n.16.png; text-offset:15; text: name; z-index: 20; } way[amenity=school] :area { color: yellow; fill-color: yellow; fill-opacity: 0.1; set .area_small_name; } node[amenity=bar] { icon-image: icons/food_bar.n.16.png; text-offset:15; text: name; z-index: 20; } node[amenity=cafe] { icon-image: icons/food_cafe.n.16.png; text-offset:15; text: name; z-index: 20; } node[amenity=fast_food] { icon-image: icons/food_fastfood.n.16.png; z-index: 20; } node[amenity=pub] { icon-image: icons/food_pub.n.16.png; text-offset:15; text: name; z-index: 20; } node[amenity=restaurant] { icon-image: icons/food_restaurant.n.16.png; text-offset:15; text: name; z-index: 20; } node[amenity=hospital] { icon-image: icons/health_hospital.n.16.png; z-index: 20; } node[amenity=pharmacy] { icon-image: icons/health_pharmacy.n.16.png; z-index: 20; } node[amenity=atm] { icon-image: icons/money_atm.n.16.png; z-index: 20; } node[amenity=bank] { icon-image: icons/money_bank2.n.16.png; z-index: 20; } node[shop=alcohol] { icon-image: icons/shopping_alcohol.n.16.png; z-index: 20; } node[shop=bakery] { icon-image: icons/shopping_bakery.n.16.png; z-index: 20; } node[shop=bicycle] { icon-image: icons/shopping_bicycle.n.16.png; z-index: 20; } node[shop=book] { icon-image: icons/shopping_book.n.16.png; z-index: 20; } node[shop=butcher] { icon-image: icons/shopping_butcher.n.16.png; z-index: 20; } node[shop=car_repair] { icon-image: icons/shopping_car_repair.n.16.png; z-index: 20; } node[shop=car] { icon-image: icons/shopping_car.n.16.png; z-index: 20; } node[shop=clothes] { icon-image: icons/shopping_clothes.n.16.png; z-index: 20; } node[shop=confectionery] { icon-image: icons/shopping_confectionery.n.16.png; z-index: 20; } node[shop=convenience] { icon-image: icons/shopping_convenience.n.16.png; z-index: 20; } node[shop=doityourself] { icon-image: icons/shopping_diy.n.16.png; z-index: 20; } node[shop=fishmonger] { icon-image: icons/shopping_fish.n.16.png; z-index: 20; } node[shop=garden_centre] { icon-image: icons/shopping_garden_centre.n.16.png; z-index: 20; } node[shop=gift] { icon-image: icons/shopping_gift.n.16.png; z-index: 20; } node[shop=greengrocer] { icon-image: icons/shopping_greengrocer.n.16.png; z-index: 20; } node[shop=hairdresser] { icon-image: icons/shopping_hairdresser.n.16.png; z-index: 20; } node[shop=hifi] { icon-image: icons/shopping_hifi.n.16.png; z-index: 20; } node[shop=jewelry] { icon-image: icons/shopping_jewelry.n.16.png; z-index: 20; } node[shop=laundry] { icon-image: icons/shopping_laundrette.n.16.png; z-index: 20; } node[shop=motorcycle] { icon-image: icons/shopping_motorcycle.n.16.png; z-index: 20; } node[shop=music] { icon-image: icons/shopping_music.n.16.png; z-index: 20; } node[shop=supermarket] { icon-image: icons/shopping_supermarket.n.16.png; z-index: 20; } node[historic=archaeological_site] { icon-image: icons/tourist_archaeological.n.16.png; z-index: 20; } node[historic=battlefield] { icon-image: icons/tourist_battlefield.n.16.png; z-index: 20; } node[historic=castle] { icon-image: icons/tourist_castle.n.16.png; text-offset:15; text: name; z-index: 20; } node[amenity=cinema] { icon-image: icons/tourist_cinema.n.16.png; z-index: 20; } node[historic=memorial] { icon-image: icons/tourist_memorial.n.16.png; text-offset:15; text: name; z-index: 20; } node[historic=monument] { icon-image: icons/tourist_monument.n.16.png; text-offset:15; text: name; z-index: 20; } node[tourism=museum] { icon-image: icons/tourist_museum.n.16.png; text-offset:15; text: name; z-index: 20; } node[tourism=picnic_site] { icon-image: icons/tourist_picnic.n.16.png; z-index: 20; } node[historic=ruin] { icon-image: icons/tourist_ruin.n.16.png; z-index: 20; } node[amenity=theatre] { icon-image: icons/tourist_theatre.n.16.png; z-index: 20; } node[tourism=viewpoint] { icon-image: icons/tourist_view_point.n.16.png; z-index: 20; } node[tourism=zoo] { icon-image: icons/tourist_zoo.n.16.png; z-index: 20; } node[aeroway=aerodrome] { icon-image: icons/transport_aerodrome.n.16.png; z-index: 20; } node[amenity=bus_station] { icon-image: icons/transport_bus_station.n.16.png; z-index: 20; } node[highway=bus_stop] { icon-image: icons/transport_bus_stop2.n.16.png; z-index: 20; } node[amenity=fuel] { icon-image: icons/transport_fuel.n.16.png; z-index: 20; } node[amenity=bicycle_parking] { icon-image: icons/transport_parking_bicycle.n.16.png; text-offset: 15; text: capacity; z-index: 20; } node[amenity=parking] { icon-image: icons/transport_parking_car.n.16.png; z-index: 20; } node[amenity=ferry_terminal] { icon-image: icons/transport_port.n.16.png; z-index: 20; } node[amenity=bicycle_rental] { icon-image: icons/transport_rental_bicycle.n.16.png; z-index: 20; } node[amenity=car_rental] { icon-image: icons/transport_rental_car.n.16.png; z-index: 20; } node[amenity=taxi] { icon-image: icons/transport_taxi_rank.n.16.png; z-index: 20; } node[railway=station] { icon-image: icons/transport_train_station.n.16.png; text-offset:15; text: name; z-index: 20; } node[railway=tram_stop] { icon-image: icons/transport_tram_stop.n.16.png; z-index: 20; } node[leisure=marina] { icon-image: icons/transport_marina.n.16.png; z-index: 20; } way[leisure=sports_centre] :area { color: #66ddcc; fill-color: #66ddcc; set .area_small_name; } /* We can stack styles at different z-index (depth) */ way[railway=rail] { z-index: 6; color: black; width: 5; } { z-index: 7; color: white; width: 3; dashes: 12,12; } way[railway=platform] { color:black; width: 2; } way[railway=subway] { z-index: 6; color: #444444; width: 5; } { z-index: 7; color: white; width: 3; dashes: 8,8; } /* Bridge */ way[bridge=yes], way[bridge=viaduct], way[bridge=suspension] { z-index: 4; color: white; width: eval('_width+3'); } { z-index: 3; color: black; width: eval('_width+6'); } /* Tunnel */ way[tunnel=yes][!waterway] { z-index: 4; color: white; width: eval('_width+2'); } { z-index: 3; color: black; width: eval('_width+6'); dashes: 4,4; } way[embankment=yes], way[cutting=yes] { z-index: 8; opacity: 0.5; color: grey; width: eval('_width+5'); dashes: 2, 2; } /* Oneway */ way[oneway=yes] { z-index: 15; color: #444444; width: 2; dashes: 15,35; line-style: arrows; } way[access=private],way[access=no] { z-index: 10; color: red; width: eval('_width+2'); dashes: 2,5;} way[access=permissive] { z-index: 10; color: green; width: eval('_width+2'); dashes: 1,3;} way .area_small_name {text-color: black; font-size: 9; text: name; text-halo: #ffffaa; text-halo-radius: 2; text-position: center;} /* Change the road colour based on dynamically set "highlighted" tag (see earlier) */ way .highlighted { color: pink; } /* Interactive editors may choose different behaviour when a user mouses-over or selects an object. Potlatch 2 supports these but the stand-alone Halcyon viewer does not */ way :hover { z-index: 2; width: eval('_width+10'); color: #ffff99; } way :selected { z-index: 2; width: eval('_width+10'); color: yellow; opacity: 0.7;} way :restrictfrom { z-index: -1; width: eval('_width+10'); color: red; opacity: 0.7;} way :restrictto { z-index: -1; width: eval('_width+10'); color: blue; opacity: 0.7;} /*way !:drawn !:hasTags{ z-index:10; width: 0.5; color: red; }*/ way !:drawn { z-index:10; width: 1; color: #333333; } way :tiger { casing-color: #ff00ff;} relation[type=restriction] node { z-index:11; icon-image: icons/restriction.png; } node :dupe { z-index: 9; icon-image: circle; icon-width:8; color: white; opacity: 0.4; casing-opacity: 0.4; casing-color: red; casing-width: 3; } node :hoverway { z-index: 9; icon-image: square; icon-width: 7; color: blue; layer: 5; } node !:drawn :poi { z-index: 2; icon-image: circle; icon-width: 4; color: green; casing-color: black; casing-width: 1; } node !:drawn :hasTags { z-index: 9; icon-image: circle; icon-width: 4; color: black; } node :hasTags :selectedway { z-index: 9; icon-image: square; icon-width: 8; color: black; layer: 5; } node !:drawn :selectedway { z-index: 9; icon-image: square; icon-width: 8; color: red; casing-color: #cc0000; casing-width: 1; layer: 5; } node :selected { z-index: 1; icon-image: square; icon-width: eval('_width+10'); color: yellow; interactive: no; layer: 5; } node :junction :selectedway { z-index: 8; icon-image: square; icon-width: 12; casing-color: black; casing-width: 1; layer: 5; } /* Descendant selectors provide an easy way to style relations: this example means "any way which is part of a relation whose type=route". */ relation[type=route] way { z-index: 1; width: 13; color: blue; opacity: 0.3; } relation[type=route][route=bicycle][network=ncn] way { z-index: 1; width: 12; color: red; opacity: 0.3; } relation[type=route][route=bicycle][network=rcn] way { z-index: 1; width: 12; color: cyan; opacity: 0.3; } relation[type=route][route=bicycle][network=lcn] way { z-index: 1; width: 12; color: blue; opacity: 0.3; } relation[type=route][route=foot] way { z-index: 1; width: 10; color: #80ff80; opacity: 0.6; }