Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Standing water fill pattern and water "barriers" #5606

Merged
merged 4 commits into from
Dec 15, 2018
Merged

Standing water fill pattern and water "barriers" #5606

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
b92592b
Add fill pattern for reservoir
RudyTheDev Dec 15, 2018
89a128f
Allow directly specified fill pattern for entire tag (not using for a…
RudyTheDev Dec 15, 2018
dee530c
Add groyne and breakwater stroke style
RudyTheDev Dec 15, 2018
743be30
Use water fill pattern for fountain area
RudyTheDev Dec 15, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 7 additions & 1 deletion css/25_areas.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand All @@ -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,
Expand All @@ -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);
}
Expand Down
10 changes: 7 additions & 3 deletions css/50_misc.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
Binary file added dist/img/pattern/lines.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
60 changes: 35 additions & 25 deletions modules/svg/areas.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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: [
Expand All @@ -41,6 +44,7 @@ export function svgAreas(projection, context) {
meadow: 'meadow',
military: 'construction',
orchard: 'orchard',
reservoir: 'water_standing',
quarry: 'quarry',
vineyard: 'vineyard'
},
Expand All @@ -51,6 +55,7 @@ export function svgAreas(projection, context) {
scrub: 'scrub',
water: [
{ water: 'pond', pattern: 'pond' },
{ water: 'reservoir', pattern: 'water_standing' },
{ pattern: 'waves' }
],
wetland: [
Expand Down Expand Up @@ -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;

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;
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 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;
}
}
}
}
Expand Down
1 change: 1 addition & 0 deletions modules/svg/defs.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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'],
Expand Down