| 1 | /*
|
|---|
| 2 |
|
|---|
| 3 | Stylesheet that mimicks, to a certain extent, opencyclemap
|
|---|
| 4 | Andy Allan, June 2010
|
|---|
| 5 |
|
|---|
| 6 | Based heavily on:
|
|---|
| 7 | MapCSS demonstration stylesheet
|
|---|
| 8 | Richard Fairhurst, October 2009
|
|---|
| 9 |
|
|---|
| 10 | */
|
|---|
| 11 |
|
|---|
| 12 | /* This rule applies to all areas (closed ways). Note that rules are applied in the order
|
|---|
| 13 | they appear in the file, so later rules may replace this one for some ways.
|
|---|
| 14 | This is used as a debugger for finding unstyled areas; it's obviously oversimplistic since
|
|---|
| 15 | it picks up closed-loop highways. */
|
|---|
| 16 |
|
|---|
| 17 | way :area { color: grey; width: 1; fill-color: red; fill-opacity: 0.1; }
|
|---|
| 18 |
|
|---|
| 19 | /* A set of fairly standard rules.
|
|---|
| 20 | We use z-index to make sure high-priority roads appear above minor ones.
|
|---|
| 21 | The default z-index is 5. If an object matches multiple rules with the same
|
|---|
| 22 | z-index then the rules are "merged" (but individual properties become one or the other) */
|
|---|
| 23 |
|
|---|
| 24 | /*way[highway=motorway],way[highway=motorway_link],
|
|---|
| 25 | way[highway=trunk],way[highway=trunk_link],
|
|---|
| 26 | way[highway=primary],way[highway=primary_link],
|
|---|
| 27 | way[highway=secondary],way[highway=secondary_link],
|
|---|
| 28 | way[highway=tertiary],way[highway=tertiary_link],
|
|---|
| 29 | way[highway=residential] { text: name; text-color: black; font-size: 7; text-position: line;}*/
|
|---|
| 30 | way[highway=motorway],way[highway=motorway_link] { z-index: 9; color: #bfbfcf; width: 7; casing-color: #506077; casing-width: 1; }
|
|---|
| 31 | way[highway=trunk],way[highway=trunk_link] { z-index: 9; color: #c8d8c8; width: 7; casing-color: #477147; casing-width: 1; }
|
|---|
| 32 | way[highway=primary],way[highway=primary_link] { z-index: 8; color: #d8c8c8; width: 7; casing-color: #8d4346; casing-width: 1; }
|
|---|
| 33 | way[highway=secondary],way[highway=secondary_link] { z-index: 7; color: #eeeec9; width: 7; casing-color: #a37b48; casing-width: 1; }
|
|---|
| 34 | way[highway=tertiary],way[highway=unclassified] { z-index: 6; color: #eeeec9; width: 5; casing-color: #999999; casing-width: 1; }
|
|---|
| 35 | way[highway=residential] { z-index: 5; color: white; width: 5; casing-color: #999; casing-width: 1; }
|
|---|
| 36 | way[highway=service] { color: white; width: 3; casing-color: #999; casing-width: 1; }
|
|---|
| 37 |
|
|---|
| 38 | /* Pedestrian precincts need to be treated carefully. Only closed-loops with an explicit
|
|---|
| 39 | area=yes tag should be filled. The below doesn't yet work as intended. */
|
|---|
| 40 | way[highway=pedestrian] !:area { color: #ddddee; width: 5; casing-color: #555555; casing-width: 1; }
|
|---|
| 41 | way[highway=pedestrian] :area { color: #555555; width: 1; fill-color: #ddddee; fill-opacity: 0.8; }
|
|---|
| 42 |
|
|---|
| 43 | way[highway=steps] { color: #be6c6c; width: 2; dashes: 4, 2; }
|
|---|
| 44 | way[highway=footway] { color: #be6c6c; width: 2; dashes: 6, 3; }
|
|---|
| 45 | way[highway=cycleway] { color: blue; width: 1.6; dashes: 5, 4; }
|
|---|
| 46 | way[highway=bridleway] { z-index:9; color: #996644; width: 2; dashes: 4, 2, 2, 2; }
|
|---|
| 47 | way[highway=track] { color: #996644; width: 2; dashes: 4, 2; }
|
|---|
| 48 | way[highway=path] { color: lightgreen; width: 2; dashes: 2, 2; }
|
|---|
| 49 |
|
|---|
| 50 | way[waterway=river], way[waterway=canal] { color: blue; width: 2; text:name; text-color:blue; font-size:9; text-position: offset; text-offset: 7;}
|
|---|
| 51 |
|
|---|
| 52 | way[barrier] {color: #000000; width: 1}
|
|---|
| 53 |
|
|---|
| 54 | /* Fills can be solid colour or bitmap images */
|
|---|
| 55 |
|
|---|
| 56 |
|
|---|
| 57 | way[natural] :area { color: #ADD6A5; width: 1; fill-color: #ADD6A5; fill-opacity: 0.2; }
|
|---|
| 58 | way[landuse] :area { color: #efefef; width: 1; fill-color: #f5f5f5; fill-opacity: 0.3; }
|
|---|
| 59 | way[amenity],way[shop] :area { color: #ADCEB5; width: 1; fill-color: #ADCEB5; fill-opacity: 0.2; }
|
|---|
| 60 | way[leisure],way[sport] :area { color: #8CD6B5; width: 1; fill-color: #8CD6B5; fill-opacity: 0.2; }
|
|---|
| 61 | way[tourism] :area { color: #F7CECE; width: 1; fill-color: #F7CECE; fill-opacity: 0.2; }
|
|---|
| 62 | way[historic],way[ruins] :area { color: #F7F7DE; width: 1; fill-color: #F7F7DE; fill-opacity: 0.2; }
|
|---|
| 63 | way[military] :area { color: #D6D6D6; width: 1; fill-color: #D6D6D6; fill-opacity: 0.2; }
|
|---|
| 64 | way[building] :area { color: #8d8d8d; width: 1; fill-color: #e0e0e0; fill-opacity: 0.2; }
|
|---|
| 65 | way[natural=water],
|
|---|
| 66 | way[waterway] :area { color: blue; width: 2; fill-color: blue; fill-opacity: 0.2; }
|
|---|
| 67 | way[landuse=forest],way[natural=wood] :area { color: green; width: 2; fill-color: green; fill-opacity: 0.2; }
|
|---|
| 68 | way[leisure=pitch],way[leisure=park] { color: #44ff44; width: 1; fill-color: #44ff44; fill-opacity: 0.2; }
|
|---|
| 69 | way[amenity=parking] :area { color: gray; width: 1; fill-color: gray; fill-opacity: 0.2; }
|
|---|
| 70 | way[public_transport=pay_scale_area] :area { color: gray; width: 1; fill-color: gray; fill-opacity: 0.1; }
|
|---|
| 71 |
|
|---|
| 72 | /* Addressing. Nodes with addresses *and* match POIs should have a poi icon, so we put addressing first */
|
|---|
| 73 |
|
|---|
| 74 | node[addr:housenumber],
|
|---|
| 75 | node[addr:housename] { icon-image: circle; icon-width: 8; color: #B0E0E6; casing-color:blue; casing-width: 1; }
|
|---|
| 76 | way[addr:interpolation] { color: #B0E0E6; width: 3; dashes: 3,3;}
|
|---|
| 77 |
|
|---|
| 78 | /* POIs, too, can have bitmap icons - they can even be transparent */
|
|---|
| 79 |
|
|---|
| 80 | node[amenity=pub] { icon-image: icons/pub.png; text-offset: 15; font-family: DejaVu; text: name; font-size: 9; }
|
|---|
| 81 | /*node[place] { icon-image: icons/place.png; text-offset: 17; font-family: DejaVu; text: name; font-size: 9; font-weight: bold; text-decoration: underline; }
|
|---|
| 82 | node[railway=station] { icon-image: icons/station.png; text-offset: 13; font-family: DejaVu; text: name; font-size: 9; font-weight: bold; }
|
|---|
| 83 | node[aeroway=aerodrome] { icon-image: icons/airport.png; text-offset: 13; font-family: DejaVu; text: name; font-size: 10; }
|
|---|
| 84 | node[amenity=atm] { icon-image: icons/atm.png; }
|
|---|
| 85 | node[amenity=bank] { icon-image: icons/bank.png; text-offset: 15; text: name; }
|
|---|
| 86 | node[highway=bus_stop] { icon-image: icons/bus_stop.png; }
|
|---|
| 87 | node[amenity=cafe] { icon-image: icons/cafe.png; text-offset: 15; text: name; }
|
|---|
| 88 | node[shop=convenience] { icon-image: icons/convenience.png; text-offset:15; text:name; }
|
|---|
| 89 | node[shop=supermarket] { icon-image: icons/supermarket.png; text-offset:15; text:name; }
|
|---|
| 90 | node[amenity=fast_food] { icon-image: icons/fast_food.png; text-offset:15; text: name; }
|
|---|
| 91 | node[amenity=fire_station] { icon-image: icons/fire_station.png; }
|
|---|
| 92 | node[amenity=hospital] { icon-image: icons/hospital.png; }
|
|---|
| 93 | node[tourism=hotel] { icon-image: icons/hotel.png; }
|
|---|
| 94 | node[amenity=parking] { icon-image: icons/parking.png; } */
|
|---|
| 95 | node[amenity=bicycle_parking] { icon-image: icons/parking_cycle.png; text-offset: 15; text: capacity; text-color: blue }
|
|---|
| 96 | /* node[amenity=pharmacy] { icon-image: icons/pharmacy.png; }
|
|---|
| 97 | node[amenity=pharmacy][dispensing=yes] { icon-image: icons/pharmacy_dispensing.png; }
|
|---|
| 98 | node[amenity=police] { icon-image: icons/police.png; }
|
|---|
| 99 | node[amenity=post_box] { icon-image: icons/post_box.png; }
|
|---|
| 100 | node[amenity=recycling] { icon-image: icons/recycling.png; }
|
|---|
| 101 | node[amenity=restaurant] { icon-image: icons/restaurant.png; }
|
|---|
| 102 | node[amenity=school] { icon-image: icons/school.png; }
|
|---|
| 103 | node[amenity=taxi] { icon-image: icons/taxi.png; }
|
|---|
| 104 | node[amenity=telephone] { icon-image: icons/telephone.png; }
|
|---|
| 105 | way node[barrier=gate], way node[highway=gate] { icon-image: icons/gate.png; }
|
|---|
| 106 | node[barrier=cattle_grid] { icon-image: icons/cattle_grid.png; }*/
|
|---|
| 107 |
|
|---|
| 108 | /* Important shops */
|
|---|
| 109 | node[shop=bicycle] { icon-image: icons/shopping_bicycle.n.16.png; text-offset: 15; text: name; }
|
|---|
| 110 |
|
|---|
| 111 | /* We can stack styles at different z-index (depth) */
|
|---|
| 112 |
|
|---|
| 113 | way[railway=rail] { z-index: 6; color: #444444; width: 5; }
|
|---|
| 114 | way[railway=rail]::dashes { z-index: 7; color: white; width: 3; dashes: 12,12; }
|
|---|
| 115 | way[railway=platform] { color:black; width: 2; }
|
|---|
| 116 | way[railway=subway] { z-index: 6; color: #444444; width: 5; }
|
|---|
| 117 | way[railway=subway]::dashes { z-index: 7; color: white; width: 3; dashes: 8,8; }
|
|---|
| 118 |
|
|---|
| 119 | /* Bridge */
|
|---|
| 120 | way[bridge=yes]::bridge1, way[bridge=viaduct]::bridge1, way[bridge=suspension]::bridge1 { z-index: 4; color: white; width: eval('_width+3'); }
|
|---|
| 121 | way[bridge=yes]::bridge2, way[bridge=viaduct]::bridge2, way[bridge=suspension]::bridge2 { z-index: 3; color: black; width: eval('_width+6'); }
|
|---|
| 122 |
|
|---|
| 123 | /* Tunnel */
|
|---|
| 124 | way[tunnel=yes]::tunnel1 { z-index: 4; color: white; width: eval('_width+2'); }
|
|---|
| 125 | way[tunnel=yes]::tunnel2 { z-index: 3; color: black; width: eval('_width+6'); dashes: 4,4; }
|
|---|
| 126 |
|
|---|
| 127 | /* Oneway */
|
|---|
| 128 | way[oneway=yes]::arrows { z-index: 10; color: #6c70d5; width: 2; dashes: 10,30; line-style: arrows; }
|
|---|
| 129 |
|
|---|
| 130 |
|
|---|
| 131 | /* Change the road colour based on dynamically set "highlighted" tag (see earlier) */
|
|---|
| 132 |
|
|---|
| 133 | way .highlighted { color: pink; }
|
|---|
| 134 |
|
|---|
| 135 | /* Interactive editors may choose different behaviour when a user mouses-over or selects
|
|---|
| 136 | an object. Potlatch 2 supports these but the stand-alone Halcyon viewer does not */
|
|---|
| 137 |
|
|---|
| 138 | @import("stylesheets/core_interactive.css");
|
|---|
| 139 |
|
|---|
| 140 | /* Descendant selectors provide an easy way to style relations: this example means "any way
|
|---|
| 141 | which is part of a relation whose type=route". */
|
|---|
| 142 |
|
|---|
| 143 | relation[type=route] way::routeline { z-index: 1; width: 17; color: yellow; opacity: 0.3; }
|
|---|
| 144 | relation[type=route][route=bicycle][network=ncn] way::routeline { z-index: 1; width: 12; color: red; opacity: 0.3; }
|
|---|
| 145 | relation[type=route][route=bicycle][network=rcn] way::routeline { z-index: 1; width: 12; color: cyan; opacity: 0.3; }
|
|---|
| 146 | relation[type=route][route=bicycle][network=lcn] way::routeline { z-index: 1; width: 12; color: blue; opacity: 0.3; }
|
|---|
| 147 | relation[type=route][route=bicycle][network=mtb] way::routeline { z-index: 1; width: 12; color: #48a448; opacity: 0.3; }
|
|---|
| 148 |
|
|---|
| 149 |
|
|---|
| 150 |
|
|---|
