better styles for map features.

This commit is contained in:
Saman Bemel-Benrud
2013-02-04 19:37:10 -05:00
parent 9cdee2f353
commit 5764012b23
7 changed files with 306 additions and 1120 deletions

View File

@@ -17,11 +17,11 @@ g.point .shadow {
-moz-transition: fill 100ms linear;
}
.behavior-hover g.point.hover:not(.selected) .shadow {
fill: #E96666;
fill-opacity: 0.3;
fill: #f6634f;
fill-opacity: 0.5;
}
g.point.selected .shadow {
fill: #E96666;
fill: #f6634f;
fill-opacity: 0.7;
}
@@ -30,8 +30,10 @@ g.point.selected .shadow {
g.vertex .fill {
fill:white;
}
g.vertex .stroke {
stroke:#333;
stroke:black;
stroke-opacity: .5;
stroke-width:2;
fill:white;
}
@@ -60,69 +62,72 @@ svg[data-zoom="17"] g.vertex .fill {
transform:scale(0.7, 0.7);
}
g.vertex.shared .shadow {
g.vertex.sha#f6634f .shadow {
-webkit-transform:scale(1.2, 1.2);
-moz-transform:scale(1.2, 1.2);
transform:scale(1.2, 1.2);
}
g.vertex.shared .fill,
g.vertex.shared .stroke {
g.vertex.sha#f6634f .fill,
g.vertex.sha#f6634f .stroke {
-webkit-transform:scale(1.1, 1.1);
-moz-transform:scale(1.1, 1.1);
transform:scale(1.1, 1.1);
}
svg[data-zoom="16"] g.vertex.shared .shadow {
svg[data-zoom="16"] g.vertex.sha#f6634f .shadow {
-webkit-transform:scale(0.9, 0.9);
-moz-transform:scale(0.9, 0.9);
transform:scale(0.9, 0.9);
}
svg[data-zoom="16"] g.vertex.shared .fill,
svg[data-zoom="16"] g.vertex.shared .stroke {
svg[data-zoom="16"] g.vertex.sha#f6634f .fill,
svg[data-zoom="16"] g.vertex.sha#f6634f .stroke {
-webkit-transform:scale(0.8, 0.8);
-moz-transform:scale(0.8, 0.8);
transform:scale(0.8, 0.8);
}
svg[data-zoom="17"] g.vertex.shared .shadow {
svg[data-zoom="17"] g.vertex.sha#f6634f .shadow {
-webkit-transform:scale(1, 1);
-moz-transform:scale(1, 1);
transform:scale(1, 1);
}
svg[data-zoom="17"] g.vertex.shared .fill,
svg[data-zoom="17"] g.vertex.shared .stroke {
svg[data-zoom="17"] g.vertex.sha#f6634f .fill,
svg[data-zoom="17"] g.vertex.sha#f6634f .stroke {
-webkit-transform:scale(0.9, 0.9);
-moz-transform:scale(0.9, 0.9);
transform:scale(0.9, 0.9);
}
g.vertex.shared .fill {
g.vertex.sha#f6634f .fill {
fill:#aaa;
}
g.vertex .shadow {
fill: none;
pointer-events: all;
stroke-width: 10;
stroke-width: 20;
-webkit-transition: -webkit-transform 100ms linear;
transition: transform 100ms linear;
-moz-transition: fill 100ms linear;
}
.behavior-hover g.vertex.hover:not(.selected) .shadow {
fill: #E96666;
fill: #f6634f;
fill-opacity: 0.3;
}
}
g.vertex.selected .shadow {
fill: #E96666;
fill-opacity: 0.7;
fill: #f6634f;
fill-opacity: 0.5;
}
/* midpoints */
g.midpoint .fill {
fill:#aaa;
fill:#ddd;
stroke:black;
stroke-opacity: .5;
opacity: .5;
}
.behavior-hover g.midpoint .fill.hover:not(.selected) {
fill:#fff;
stroke:#000;
fill:white;
opacity: .75;
}
g.midpoint .shadow {
@@ -134,7 +139,7 @@ g.midpoint .shadow {
-moz-transition: fill 100ms linear;
}
.behavior-hover g.midpoint .shadow.hover:not(.selected) {
fill:#E96666;
fill:#f6634f;
fill-opacity: 0.3;
}
@@ -146,8 +151,8 @@ path.line {
}
path.stroke {
stroke: #222;
stroke-width: 2;
stroke: black;
stroke-width: 4;
}
path.shadow {
@@ -157,12 +162,12 @@ path.shadow {
}
.behavior-hover path.shadow.hover:not(.selected) {
stroke: #E96666;
stroke: #f6634f;
stroke-opacity: 0.3;
}
path.shadow.selected {
stroke: #E96666;
stroke: #f6634f;
stroke-opacity: 0.7;
}
@@ -191,31 +196,31 @@ path.area.stroke.selected {
path.area.stroke.tag-natural,
path.multipolygon.tag-natural {
stroke: #ADD6A5;
stroke: #b6e199;
stroke-width:1;
}
path.area.fill.tag-natural,
path.multipolygon.tag-natural {
fill: #ADD6A5;
fill: #b6e199;
}
path.area.stroke.tag-natural-water,
path.multipolygon.tag-natural-water {
stroke: #6382FF;
stroke: #77d3de;
}
path.area.fill.tag-natural-water,
path.multipolygon.tag-natural-water {
fill: #ADBEFF;
fill: #77d3de;
}
path.area.stroke.tag-building,
path.multipolygon.tag-building {
stroke: #9E176A;
stroke: #e06e5f;
stroke-width: 1;
}
path.area.fill.tag-building,
path.multipolygon.tag-building {
fill: #ff6ec7;
fill: #e06e5f;
}
path.area.stroke.tag-landuse,
@@ -228,7 +233,7 @@ path.multipolygon.tag-natural-wood,
path.multipolygon.tag-natural-tree,
path.multipolygon.tag-natural-grassland,
path.multipolygon.tag-leisure-park {
stroke: #006B34;
stroke: #8cd05f;
stroke-width: 1;
}
path.area.fill.tag-landuse,
@@ -241,18 +246,18 @@ path.multipolygon.tag-natural-wood,
path.multipolygon.tag-natural-tree,
path.multipolygon.tag-natural-grassland,
path.multipolygon.tag-leisure-park {
fill: #189E59;
fill: #8cd05f;
fill-opacity: 0.2;
}
path.area.stroke.tag-amenity-parking,
path.multipolygon.tag-amenity-parking {
stroke: #beb267;
stroke: #aaa;
stroke-width: 1;
}
path.area.fill.tag-amenity-parking,
path.multipolygon.tag-amenity-parking {
fill: #edecc0;
fill: #aaa;
}
path.multipolygon.tag-boundary {
@@ -286,56 +291,57 @@ svg[data-zoom="16"] path.stroke.tag-highway {
path.stroke.tag-highway-motorway,
path.stroke.tag-highway-motorway_link,
path.stroke.tag-construction-motorway {
stroke:#809bc0;
stroke:#58a9ed;
}
path.casing.tag-highway-motorway,
path.casing.tag-highway-motorway_link,
path.casing.tag-construction-motorway {
stroke:#506077;
stroke:#2c5476;
}
path.stroke.tag-highway-trunk,
path.stroke.tag-highway-trunk_link,
path.stroke.tag-construction-trunk {
stroke:#97d397;
stroke:#8cd05f;
}
path.casing.tag-highway-trunk,
path.casing.tag-highway-trunk_link,
path.casing.tag-construction-trunk {
stroke:#477147;
stroke:#46682f;
}
path.stroke.tag-highway-primary,
path.stroke.tag-highway-primary_link,
path.stroke.tag-construction-primary {
stroke:#ec989a;
stroke:#e06d5f;
}
path.casing.tag-highway-primary,
path.casing.tag-highway-primary_link,
path.casing.tag-construction-primary {
stroke:#8d4346;
stroke:#70372f;
}
path.stroke.tag-highway-secondary,
path.stroke.tag-highway-secondary_link,
path.stroke.tag-construction-secondary {
stroke:#fecc8b;
stroke:#eab056;
}
path.casing.tag-highway-secondary,
path.casing.tag-highway-secondary_link,
path.casing.tag-construction-secondary {
stroke:#a37b48;
stroke:#75582b;
}
path.stroke.tag-highway-tertiary,
path.stroke.tag-highway-tertiary_link,
path.stroke.tag-construction-tertiary {
stroke:#ffffb3;
stroke:#ffff7e;
}
path.casing.tag-highway-tertiary,
path.casing.tag-highway-tertiary_link,
path.casing.tag-construction-tertiary {
stroke:#bbb;
stroke:#7f7f3f;
}
path.stroke.tag-highway-unclassified,
@@ -372,7 +378,7 @@ path.stroke.tag-highway-pedestrian {
shapeRendering: auto;
}
path.casing.tag-highway-pedestrian {
stroke:#84C382;
stroke:#8cd05f;
stroke-width:6 !important;
}
@@ -445,17 +451,17 @@ svg[data-zoom="16"] path.casing.tag-highway-bridleway {
}
path.stroke.tag-highway-footway {
stroke: #996600;
stroke: #ae8681;
}
path.stroke.tag-highway-cycleway {
stroke: #69f;
stroke: #58a9ed;
}
path.stroke.tag-highway-bridleway {
stroke: green;
stroke: #e06d5f;
}
path.stroke.tag-highway-steps {
stroke: #ff6257;
stroke: #81d25c;
stroke-width: 4;
stroke-linecap: butt;
stroke-dasharray: 3, 3;
@@ -467,7 +473,7 @@ path.casing.tag-highway-steps {
path.casing.tag-bridge-yes {
stroke-width: 14;
stroke: #000;
stroke: #333;
}
path.stroke.tag-highway-construction,
@@ -511,12 +517,16 @@ path.casing.tag-railway-subway {
/* waterways */
path.area.fill.tag-waterway {
fill: #77d3de;
}
path.stroke.tag-waterway {
stroke: #10539a;
stroke: #77d3de;
stroke-width: 2;
}
path.casing.tag-waterway {
stroke: #6AA2FF;
stroke: #77d3de;
stroke-width: 4;
}
@@ -535,11 +545,11 @@ svg[data-zoom="16"] path.casing.tag-waterway-river {
}
path.stroke.tag-waterway-ditch {
stroke: #10539a;
stroke: #6591ff;
stroke-width: 1;
}
path.casing.tag-waterway-ditch {
stroke: #999692;
stroke: #6591ff;
stroke-width: 3;
}
@@ -568,17 +578,22 @@ path.casing.tag-boundary {
path.casing.tag-boundary-protected_area,
path.casing.tag-boundary-national_park {
stroke: #4D9849;
stroke: #b0e298;
}
text {
font-size:10px;
pointer-events: none;
color: #222;
opacity: 1;
}
.oneway .textpath {
pointer-events: none;
font-size: 7px;
baseline-shift: 2px;
opacity: .7;
}
text.tag-oneway {
@@ -606,7 +621,7 @@ text.pathlabel,
text.pointlabel {
font-size: 12px;
font-weight: bold;
fill: black;
fill: #333;
text-anchor: middle;
pointer-events: none;
}
@@ -632,7 +647,8 @@ text.pointlabel {
text.point {
font-size: 9px;
font-size: 10px;
baseline-shift: 2px;
}
/* Cursors */

Binary file not shown.

Before

Width:  |  Height:  |  Size: 102 B

After

Width:  |  Height:  |  Size: 158 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.4 KiB

After

Width:  |  Height:  |  Size: 338 B

File diff suppressed because one or more lines are too long

Before

Width:  |  Height:  |  Size: 156 KiB

After

Width:  |  Height:  |  Size: 157 KiB

View File

@@ -1,6 +1,6 @@
iD.svg.Lines = function(projection) {
var arrowtext = '►\u3000\u3000',
var arrowtext = '►\u3000\u3000\u3000',
alength;
var highway_stack = {

View File

@@ -38,7 +38,7 @@ iD.svg.Midpoints = function(projection) {
.attr('class', 'midpoint');
group.append('circle')
.attr('r', 7)
.attr('r', 8)
.attr('class', 'shadow');
group.append('circle')

View File

@@ -26,7 +26,7 @@ iD.svg.Vertices = function(projection) {
.attr('class', 'shadow');
group.append('circle')
.attr('r', 6)
.attr('r', 4)
.attr('class', 'stroke');
group.append('circle')