diff --git a/css/map.css b/css/map.css index a1ba8059d..2a4c700e5 100644 --- a/css/map.css +++ b/css/map.css @@ -289,11 +289,33 @@ path.fill.tag-leisure-park { path.fill.tag-landuse-residential, path.fill.tag-landuse-commercial, -path.fill.tag-landuse-industrial, -path.fill.tag-landuse-construction { +path.fill.tag-landuse-industrial { fill-opacity: 0.1; } +path.fill.tag-natural-wetland, +path.fill.tag-natural-beach, +path.fill.tag-natural-scrub, +path.fill.tag-landuse-cemetery, +path.fill.tag-landuse-meadow, +path.fill.tag-landuse-farmland, +path.fill.tag-landuse-construction, +path.fill.tag-landuse-orchard { + /* background color is applied a further opacity later */ + fill-opacity: 0.8; +} + +.pattern-color-beach, +.pattern-color-scrub, +.pattern-color-meadow, +.pattern-color-wetland, +.pattern-color-cemetery, +.pattern-color-farmland, +.pattern-color-construction, +.pattern-color-orchard { + fill-opacity: 0.2; +} + path.fill.tag-landuse-basin, path.fill.tag-landuse-reservoir { fill: #77d3de; @@ -308,38 +330,59 @@ path.fill.tag-landuse-residential { } path.fill.tag-landuse-farmland { - fill: url(#) #8cd05f; + fill: url(#pattern-farmland) #8cd05f; +} +.pattern-color-farmland { + fill: url(#pattern-farmland) #8cd05f; } path.fill.tag-landuse-meadow { - /* Use the dots pattern here */ - fill: url(#) #b6e199; + fill: url(#pattern-meadow) #b6e199; +} +.pattern-color-meadow { + fill: #b6e199; } path.fill.tag-natural-wetland { - fill: url(#) #b6e199; + fill: url(#pattern-wetland) #b6e199; +} +.pattern-color-wetland { + fill: #B6E199; } path.fill.tag-natural-beach { - /* Use the dots pattern here */ - fill: url(#) #ffff7e; + fill: url(#pattern-beach) #ffff7e; +} +.pattern-color-beach { + fill: #ffff7e; } path.fill.tag-natural-scrub { - /* Use the dots pattern here */ - fill: url(#) #dbf08b; + fill: url(#pattern-scrub) #dbf08b; +} +.pattern-color-scrub { + fill: #dbf08b; } path.fill.tag-landuse-cemetery { - fill: url(#) #8cd05f; + fill: url(#pattern-cemetery) #8cd05f; +} +.pattern-color-cemetery { + fill: #8cd05f } path.fill.tag-landuse-orchard { - fill: url(#) #8cd05f; + fill: url(#pattern-orchard) #8cd05f; +} +.pattern-color-orchard { + fill: #8cd05f } path.fill.tag-landuse-construction { - fill: url(#) #e06e5f; + fill: url(#pattern-construction) #e06e5f; +} +.pattern-color-construction { + fill: #e06e5f; } path.fill.tag-landuse-commercial { diff --git a/img/pattern/cemetery.png b/img/pattern/cemetery.png new file mode 100644 index 000000000..783d1b8be Binary files /dev/null and b/img/pattern/cemetery.png differ diff --git a/img/pattern/construction.png b/img/pattern/construction.png new file mode 100644 index 000000000..4f70cdf7a Binary files /dev/null and b/img/pattern/construction.png differ diff --git a/img/pattern/dots.png b/img/pattern/dots.png new file mode 100644 index 000000000..e57beaaa6 Binary files /dev/null and b/img/pattern/dots.png differ diff --git a/img/pattern/farmland.png b/img/pattern/farmland.png new file mode 100644 index 000000000..4e3eb765d Binary files /dev/null and b/img/pattern/farmland.png differ diff --git a/img/pattern/orchard.png b/img/pattern/orchard.png new file mode 100644 index 000000000..d0b751487 Binary files /dev/null and b/img/pattern/orchard.png differ diff --git a/img/pattern/vineyard.png b/img/pattern/vineyard.png new file mode 100644 index 000000000..f8e17178e Binary files /dev/null and b/img/pattern/vineyard.png differ diff --git a/img/pattern/wetland.png b/img/pattern/wetland.png new file mode 100644 index 000000000..a91767fc5 Binary files /dev/null and b/img/pattern/wetland.png differ diff --git a/js/id/svg/surface.js b/js/id/svg/surface.js index 469b9e0d5..e6e2ae025 100644 --- a/js/id/svg/surface.js +++ b/js/id/svg/surface.js @@ -13,6 +13,45 @@ iD.svg.Surface = function() { .append('path') .attr('d', 'M 0 0 L 5 2.5 L 0 5 z'); + var patterns = defs.selectAll('pattern') + .data([ + // pattern name, pattern image name + ['wetland', 'wetland'], + ['construction', 'construction'], + ['cemetery', 'cemetery'], + ['orchard', 'orchard'], + ['farmland', 'farmland'], + ['beach', 'dots'], + ['scrub', 'dots'], + ['meadow', 'dots']]) + .enter() + .append('pattern') + .attr({ + id: function(d) { return 'pattern-' + d[0]; }, + width: 32, + height: 32, + patternUnits: 'userSpaceOnUse' + }); + + patterns.append('rect') + .attr({ + x: 0, + y: 0, + width: 32, + height: 32, + 'class': function(d) { return 'pattern-color-' + d[0]; } + }); + + patterns.append('image') + .attr({ + x: 0, + y: 0, + width: 32, + height: 32 + }) + .attr('xlink:href', function(d) { return 'img/pattern/' + d[1] + '.png'; }); + + var layers = selection.selectAll('.layer') .data(['fill', 'shadow', 'casing', 'stroke', 'text', 'hit', 'halo', 'label']);