diff --git a/css/25_areas.css b/css/25_areas.css index 85f886bef..2d160d5fe 100644 --- a/css/25_areas.css +++ b/css/25_areas.css @@ -94,6 +94,10 @@ path.fill.tag-natural-water { border-color: rgb(119, 211, 222); background-color: rgba(119, 211, 222, 0.3); } +.pattern-color-waves, +.pattern-color-pond { + fill: rgba(119, 211, 222, 0.3); +} /* Yellow things */ .pattern-color-beach, @@ -181,6 +185,11 @@ path.fill.tag-landuse-military { border-color: rgb(214, 136, 26); background-color: rgba(214, 136, 26, 0.3); } +.pattern-color-landfill +{ + fill: rgba(214, 136, 26, 0.3); +} + /* Pink things */ path.stroke.tag-landuse-industrial, @@ -216,23 +225,27 @@ path.stroke.tag-natural-wetland { /* Light Green things */ .pattern-color-cemetery, +.pattern-color-cemetery_christian, +.pattern-color-cemetery_buddhist, +.pattern-color-cemetery_muslim, +.pattern-color-cemetery_jewish, .pattern-color-orchard, +.pattern-color-vineyard, .pattern-color-meadow, -.pattern-color-farm, .pattern-color-farmland { fill: rgba(191, 232, 63, 0.2); } path.stroke.tag-landuse-cemetery, path.stroke.tag-landuse-orchard, +path.stroke.tag-landuse-vineyard, path.stroke.tag-landuse-meadow, -path.stroke.tag-landuse-farm, path.stroke.tag-landuse-farmland { stroke: rgb(191, 232, 63); } .preset-icon-fill-area.tag-landuse-cemetery, .preset-icon-fill-area.tag-landuse-orchard, +.preset-icon-fill-area.tag-landuse-vineyard, .preset-icon-fill-area.tag-landuse-meadow, -.preset-icon-fill-area.tag-landuse-farm, .preset-icon-fill-area.tag-landuse-farmland { background-color: rgba(191, 232, 63, 0.2); } @@ -249,6 +262,9 @@ path.fill.tag-landuse-farmyard { border-color: rgb(226, 177, 111); background: rgba(245, 220, 186, 0.3); } +.pattern-color-farmyard { + fill: rgba(245, 220, 186, 0.3); +} /* Dark Gray things */ path.stroke.tag-amenity-parking, @@ -280,6 +296,10 @@ path.fill.tag-landuse-quarry { border-color: rgb(170, 170, 170); background-color: rgba(140, 140, 140, 0.5); } +.pattern-color-quarry +{ + fill: rgba(140, 140, 140, 0.5); +} /* Light gray overrides */ path.stroke.tag-natural-cave_entrance, diff --git a/dist/img/pattern/cemetery_buddhist.png b/dist/img/pattern/cemetery_buddhist.png new file mode 100644 index 000000000..7ea4e0483 Binary files /dev/null and b/dist/img/pattern/cemetery_buddhist.png differ diff --git a/dist/img/pattern/cemetery_christian.png b/dist/img/pattern/cemetery_christian.png new file mode 100644 index 000000000..7e022113f Binary files /dev/null and b/dist/img/pattern/cemetery_christian.png differ diff --git a/dist/img/pattern/cemetery_jewish.png b/dist/img/pattern/cemetery_jewish.png new file mode 100644 index 000000000..3bb9bf9dc Binary files /dev/null and b/dist/img/pattern/cemetery_jewish.png differ diff --git a/dist/img/pattern/cemetery_muslim.png b/dist/img/pattern/cemetery_muslim.png new file mode 100644 index 000000000..13b1d70f7 Binary files /dev/null and b/dist/img/pattern/cemetery_muslim.png differ diff --git a/dist/img/pattern/farmyard.png b/dist/img/pattern/farmyard.png new file mode 100644 index 000000000..88bee9a07 Binary files /dev/null and b/dist/img/pattern/farmyard.png differ diff --git a/dist/img/pattern/landfill.png b/dist/img/pattern/landfill.png new file mode 100644 index 000000000..84b86279d Binary files /dev/null and b/dist/img/pattern/landfill.png differ diff --git a/dist/img/pattern/pond.png b/dist/img/pattern/pond.png new file mode 100644 index 000000000..880857d5d Binary files /dev/null and b/dist/img/pattern/pond.png differ diff --git a/dist/img/pattern/quarry.png b/dist/img/pattern/quarry.png new file mode 100644 index 000000000..bba944e5a Binary files /dev/null and b/dist/img/pattern/quarry.png differ diff --git a/dist/img/pattern/waves.png b/dist/img/pattern/waves.png new file mode 100644 index 000000000..971367055 Binary files /dev/null and b/dist/img/pattern/waves.png differ diff --git a/modules/svg/areas.js b/modules/svg/areas.js index bc4968a50..ca8041923 100644 --- a/modules/svg/areas.js +++ b/modules/svg/areas.js @@ -19,10 +19,16 @@ export function svgAreas(projection, context) { grave_yard: 'cemetery' }, landuse: { - cemetery: 'cemetery', + cemetery: [ + { religion: 'christian', pattern: 'cemetery_christian' }, + { religion: 'buddhist', pattern: 'cemetery_buddhist' }, + { religion: 'muslim', pattern: 'cemetery_muslim' }, + { religion: 'jewish', pattern: 'cemetery_jewish' }, + { pattern: 'cemetery' } + ], construction: 'construction', - farm: 'farmland', farmland: 'farmland', + farmyard: 'farmyard', forest: [ { leaf_type: 'broadleaved', pattern: 'forest_broadleaved' }, { leaf_type: 'needleleaved', pattern: 'forest_needleleaved' }, @@ -31,15 +37,22 @@ export function svgAreas(projection, context) { ], grave_yard: 'cemetery', grass: 'grass', + landfill: 'landfill', meadow: 'meadow', military: 'construction', - orchard: 'orchard' + orchard: 'orchard', + quarry: 'quarry', + vineyard: 'vineyard' }, natural: { beach: 'beach', grassland: 'grass', sand: 'beach', scrub: 'scrub', + water: [ + { water: 'pond', pattern: 'pond' }, + { pattern: 'waves' } + ], wetland: [ { wetland: 'marsh', pattern: 'wetland_marsh' }, { wetland: 'swamp', pattern: 'wetland_swamp' }, @@ -56,16 +69,16 @@ export function svgAreas(projection, context) { } }; - function setPattern(d) { + function setPattern(entity) { // Skip pattern filling if this is a building (buildings don't get patterns applied) - if (d.tags.building && d.tags.building !== 'no') { + if (entity.tags.building && entity.tags.building !== 'no') { this.style.fill = this.style.stroke = ''; return; } for (var tag in patterns) { if (patterns.hasOwnProperty(tag)) { - var entityValue = d.tags[tag]; + var entityValue = entity.tags[tag]; if (entityValue) { var values = patterns[tag]; @@ -84,7 +97,7 @@ export function svgAreas(projection, context) { for (var criterion in rule) { if (criterion !== 'pattern') { // reserved for pattern name // The only rule is a required tag-value pair - var v = d.tags[criterion]; + var v = entity.tags[criterion]; if (!v || v !== rule[criterion]) { pass = false; break; @@ -261,7 +274,7 @@ export function svgAreas(projection, context) { if (layer === 'fill') { this.setAttribute('clip-path', 'url(#' + entity.id + '-clippath)'); - setPattern.apply(this, arguments); + setPattern.call(this, entity); } }) .call(svgTagClasses()) diff --git a/modules/svg/defs.js b/modules/svg/defs.js index f8a3b1e98..52ec2f8c8 100644 --- a/modules/svg/defs.js +++ b/modules/svg/defs.js @@ -72,23 +72,33 @@ export function svgDefs(context) { var patterns = defs.selectAll('pattern') .data([ // pattern name, pattern image name + ['beach', 'dots'], + ['construction', 'construction'], + ['cemetery', 'cemetery'], + ['cemetery_christian', 'cemetery_christian'], + ['cemetery_buddhist', 'cemetery_buddhist'], + ['cemetery_muslim', 'cemetery_muslim'], + ['cemetery_jewish', 'cemetery_jewish'], + ['farmland', 'farmland'], + ['farmyard', 'farmyard'], + ['forest', 'forest'], + ['forest_broadleaved', 'forest_broadleaved'], + ['forest_needleleaved', 'forest_needleleaved'], + ['forest_leafless', 'forest_leafless'], + ['grass', 'grass'], + ['landfill', 'landfill'], + ['meadow', 'grass'], + ['orchard', 'orchard'], + ['pond', 'pond'], + ['quarry', 'quarry'], + ['scrub', 'bushes'], + ['vineyard', 'vineyard'], + ['waves', 'waves'], ['wetland', 'wetland'], ['wetland_marsh', 'wetland_marsh'], ['wetland_swamp', 'wetland_swamp'], ['wetland_bog', 'wetland_bog'], - ['wetland_reedbed', 'wetland_reedbed'], - ['scrub', 'bushes'], - ['construction', 'construction'], - ['cemetery', 'cemetery'], - ['orchard', 'orchard'], - ['farmland', 'farmland'], - ['beach', 'dots'], - ['meadow', 'grass'], - ['grass', 'grass'], - ['forest', 'forest'], - ['forest_broadleaved', 'forest_broadleaved'], - ['forest_needleleaved', 'forest_needleleaved'], - ['forest_leafless', 'forest_leafless'] + ['wetland_reedbed', 'wetland_reedbed'] ]) .enter() .append('pattern')