Merge pull request #5606 from RudyTheDev/additional-styles

Standing water fill pattern and water "barriers"
This commit is contained in:
Bryan Housel
2018-12-15 10:31:49 -05:00
committed by GitHub
5 changed files with 48 additions and 27 deletions

View File

@@ -80,7 +80,9 @@ path.stroke.tag-natural-water,
path.stroke.tag-landuse-aquaculture,
path.stroke.tag-landuse-basin,
path.stroke.tag-landuse-harbour,
path.stroke.tag-landuse-reservoir {
path.stroke.tag-landuse-reservoir,
path.stroke.tag-man_made-groyne,
path.stroke.tag-man_made-breakwater {
stroke: rgb(119, 211, 222);
}
path.fill.tag-amenity-swimming_pool,
@@ -93,6 +95,9 @@ path.fill.tag-natural-water {
stroke: rgba(119, 211, 222, 0.3);
fill: rgba(119, 211, 222, 0.3);
}
path.fill.tag-amenity-fountain {
fill: rgba(119, 211, 222, 0.3);
}
.preset-icon-fill-area.tag-amenity-swimming_pool,
.preset-icon-fill-area.tag-leisure-swimming_pool,
.preset-icon-fill-area.tag-landuse-aquaculture,
@@ -104,6 +109,7 @@ path.fill.tag-natural-water {
background-color: rgba(119, 211, 222, 0.3);
}
.pattern-color-waves,
.pattern-color-water_standing,
.pattern-color-pond {
fill: rgba(119, 211, 222, 0.3);
}

View File

@@ -96,16 +96,20 @@ path.line.stroke.tag-natural-tree_row {
}
/* barriers */
/* barriers and similar */
path.line.stroke.tag-barrier:not(.tag-barrier-hedge) {
stroke: #ddd;
}
path.line.stroke.tag-barrier {
path.line.stroke.tag-barrier,
path.stroke.tag-man_made-groyne,
path.stroke.tag-man_made-breakwater {
stroke-width: 3px;
stroke-linecap: round;
stroke-dasharray: 15, 5, 1, 5;
}
.low-zoom path.line.stroke.tag-barrier {
.low-zoom path.line.stroke.tag-barrier,
.low-zoom path.stroke.tag-man_made-groyne,
.low-zoom path.stroke.tag-man_made-breakwater {
stroke-width: 2px;
stroke-linecap: butt;
stroke-dasharray: 8, 2, 2, 2;

BIN
dist/img/pattern/lines.png vendored Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 18 KiB

View File

@@ -11,12 +11,15 @@ export function svgAreas(projection, context) {
// Patterns only work in Firefox when set directly on element.
// (This is not a bug: https://bugzilla.mozilla.org/show_bug.cgi?id=750632)
var patterns = {
// tag - pattern name
// -or-
// tag - value - pattern name
// -or-
// tag - value - rules (optional tag-values, pattern name)
// (matches earlier rules first, so fallback should be last entry)
amenity: {
grave_yard: 'cemetery'
grave_yard: 'cemetery',
fountain: 'water_standing'
},
landuse: {
cemetery: [
@@ -41,6 +44,7 @@ export function svgAreas(projection, context) {
meadow: 'meadow',
military: 'construction',
orchard: 'orchard',
reservoir: 'water_standing',
quarry: 'quarry',
vineyard: 'vineyard'
},
@@ -51,6 +55,7 @@ export function svgAreas(projection, context) {
scrub: 'scrub',
water: [
{ water: 'pond', pattern: 'pond' },
{ water: 'reservoir', pattern: 'water_standing' },
{ pattern: 'waves' }
],
wetland: [
@@ -91,33 +96,38 @@ export function svgAreas(projection, context) {
var entityValue = entity.tags[tag];
if (!entityValue) continue;
var values = patterns[tag];
for (var value in values) {
if (entityValue !== value) continue;
if (typeof patterns[tag] === 'string') { // extra short syntax (just tag) - pattern name
this.style.fill = this.style.stroke = 'url("#pattern-' + patterns[tag] + '")';
return;
} else {
var values = patterns[tag];
for (var value in values) {
if (entityValue !== value) continue;
var rules = values[value];
if (typeof rules === 'string') { // short syntax - pattern name
this.style.fill = this.style.stroke = 'url("#pattern-' + rules + '")';
return;
} else { // long syntax - rule array
for (var ruleKey in rules) {
var rule = rules[ruleKey];
var rules = values[value];
if (typeof rules === 'string') { // short syntax - pattern name
this.style.fill = this.style.stroke = 'url("#pattern-' + rules + '")';
return;
} else { // long syntax - rule array
for (var ruleKey in rules) {
var rule = rules[ruleKey];
var pass = true;
for (var criterion in rule) {
if (criterion !== 'pattern') { // reserved for pattern name
// The only rule is a required tag-value pair
var v = entity.tags[criterion];
if (!v || v !== rule[criterion]) {
pass = false;
break;
var pass = true;
for (var criterion in rule) {
if (criterion !== 'pattern') { // reserved for pattern name
// The only rule is a required tag-value pair
var v = entity.tags[criterion];
if (!v || v !== rule[criterion]) {
pass = false;
break;
}
}
}
}
if (pass) {
this.style.fill = this.style.stroke = 'url("#pattern-' + rule.pattern + '")';
return;
if (pass) {
this.style.fill = this.style.stroke = 'url("#pattern-' + rule.pattern + '")';
return;
}
}
}
}

View File

@@ -125,6 +125,7 @@ export function svgDefs(context) {
['quarry', 'quarry'],
['scrub', 'bushes'],
['vineyard', 'vineyard'],
['water_standing', 'lines'],
['waves', 'waves'],
['wetland', 'wetland'],
['wetland_marsh', 'wetland_marsh'],