From bfdca7fc85fc010ebc6477483b4a1d427c87d413 Mon Sep 17 00:00:00 2001 From: Ansis Brammanis Date: Fri, 8 Mar 2013 00:16:07 -0500 Subject: [PATCH] Add fill patterns for landuse, natural areas Not working in Firefox. To get it to work in Firefox, styles need to be directly applied to the path, or set in an embedded stylesheet (not sure whats going on there). --- css/map.css | 69 ++++++++++++++++++++++++++++------- img/pattern/cemetery.png | Bin 0 -> 292 bytes img/pattern/construction.png | Bin 0 -> 280 bytes img/pattern/dots.png | Bin 0 -> 222 bytes img/pattern/farmland.png | Bin 0 -> 206 bytes img/pattern/orchard.png | Bin 0 -> 339 bytes img/pattern/vineyard.png | Bin 0 -> 354 bytes img/pattern/wetland.png | Bin 0 -> 301 bytes js/id/svg/surface.js | 39 ++++++++++++++++++++ 9 files changed, 95 insertions(+), 13 deletions(-) create mode 100644 img/pattern/cemetery.png create mode 100644 img/pattern/construction.png create mode 100644 img/pattern/dots.png create mode 100644 img/pattern/farmland.png create mode 100644 img/pattern/orchard.png create mode 100644 img/pattern/vineyard.png create mode 100644 img/pattern/wetland.png 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 0000000000000000000000000000000000000000..783d1b8be891cf9b6c69d656e16b332cca9cb89a GIT binary patch literal 292 zcmeAS@N?(olHy`uVBq!ia0vp^3LwnE1|*BCs=fdzmSQK*5Dp-y;YjHK@;M7UB8!3Q zuY)k7lg8`{prB-lYeY$Kep*R+Vo@qXd3m{BW?pu2a$-TMUVc&f>~}U&Kt&5ZT^vIq zTHj7P$aTnor)|Fldtc+Dcbi`8RsRqF=z1i1PleXnEoZho`V{ZwtRTPef`7==X_h8) z-!U983=^5i7||eD!B8Gr8^y51%z!z4LG^s|?uYXkmOZFj%X@+SdvI<;)=ygo!JS8> zg1@e3X2@P-9(rHovkiF^C%`&j`U%i!ti=d#Wzp$Pylt7ldK literal 0 HcmV?d00001 diff --git a/img/pattern/construction.png b/img/pattern/construction.png new file mode 100644 index 0000000000000000000000000000000000000000..4f70cdf7aaabfaaa27713f2039f4a702ebbe747e GIT binary patch literal 280 zcmeAS@N?(olHy`uVBq!ia0vp^3LwnE1|*BCs=fdzmSQK*5Dp-y;YjHK@;M7UB8!3Q zuY)k7lg8`{prB-lYeY$Kep*R+Vo@qXd3m{BW?pu2a$-TMUVc&f>~}U&Kt)qMT^vIq zTHjvV$a~m;$K_%@!}ks5AOA()m~0T*aG*?xd&-KoS1J$q)?enl(Qx=~xm5oW(FmnV zX1;`pF4>*C-%sjzvew;GCEwOdsq%H8(8=4+Q`rukh<6;5d20@O=Th9Gpy${xMU2cVKK=p!e4sRQ8F>hsG_P$YkX2qM2mjdH{ Q03FES>FVdQ&MBb@0OT!YRsaA1 literal 0 HcmV?d00001 diff --git a/img/pattern/dots.png b/img/pattern/dots.png new file mode 100644 index 0000000000000000000000000000000000000000..e57beaaa66305bed0dbbcf7dd92b4fe593698a5b GIT binary patch literal 222 zcmeAS@N?(olHy`uVBq!ia0vp^3LwnE1|*BCs=fdzmSQK*5Dp-y;YjHK@;M7UB8!3Q zuY)k7lg8`{prB-lYeY$Kep*R+Vo@qXd3m{BW?pu2a$-TMUVc&f>~}U&Kt<7>E{-7) zt#7Ao~}U&KtFVdQ&MBb@069A~LjV8( literal 0 HcmV?d00001 diff --git a/img/pattern/orchard.png b/img/pattern/orchard.png new file mode 100644 index 0000000000000000000000000000000000000000..d0b751487906bd92946110108065337614c901a5 GIT binary patch literal 339 zcmeAS@N?(olHy`uVBq!ia0vp^3LwnE1|*BCs=fdzmSQK*5Dp-y;YjHK@;M7UB8!3Q zuY)k7lg8`{prB-lYeY$Kep*R+Vo@qXd3m{BW?pu2a$-TMUVc&f>~}U&Kt&fkT^vIq zTHj7H_z)~(Ky66$>KZg7hw=0?DKX7YgPFK@=G$+9CM~+D9>eH%|j>pa4G^J&t z6>qHUfty*A_Aq)d=rP=5*t8^^g&~{!+0pmMwx8$VINcP&<;lNVp0_}k_2kJ{?#vr* zRa$a>V_H$ZuZoZTg(kNGv%rQOEwg@~-70nXsCUt-_s-dWm$Jrwz1k!vRma4Bpn$=c z|BsgcybL?mdp3fJj#@{j*$6T|I3+B|u+B!%h;^QgVGWNmgON<7(wFots{U^-F-`BY dF_3w{{4XNv>PGSDF+jgDc)I$ztaD0e0st>~}U&Kt=aGT^vIq zTHj8y<~w8{;BsGS!GcE&1#DRlzKA%S73GL&R8rt&owne_@o9TDPB7|CJ{>eKZSS`k zDqdMZU*6XGNAFch0*C1S4z~uu1ELCQ-WAptW~+8hSNQEZWtOT9!=z0u?wmm4bo7Kts(bhn sOQsc6^CoX@Ntbp@?KI>UVXt6b%2~H?ui#QcpjR0@UHx3vIVCg!0DiiJ{r~^~ literal 0 HcmV?d00001 diff --git a/img/pattern/wetland.png b/img/pattern/wetland.png new file mode 100644 index 0000000000000000000000000000000000000000..a91767fc584cfc9f152db2942f9108be45acc0fb GIT binary patch literal 301 zcmeAS@N?(olHy`uVBq!ia0vp^3LwnE1|*BCs=fdzmSQK*5Dp-y;YjHK@;M7UB8!3Q zuY)k7lg8`{prB-lYeY$Kep*R+Vo@qXd3m{BW?pu2a$-TMUVc&f>~}U&Kt-!OT^vIq zTHjuC6an_VFP;VSkI|JVzzMtkrp)R;#`Ow2mf6P%JJE;PfPW3sh|Lo#k)!t_fD}KFqoYKIe@<6O%u}|Sq-Wu8W&l+y|JS=1moq0$mV7BI+ py2G1i9uoQBz3ha|goc6xOr7qop4_|RLx8Sk@O1TaS?83{1ON)_Z9M=0 literal 0 HcmV?d00001 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']);