Skip to content

Add track grade-based styling #12392

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

Open
RudyTheDev wants to merge 3 commits into
base: develop
Choose a base branch
from
+193 −151
Open

Add track grade-based styling #12392

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
d630b25
Add track grade-based styling
RudyTheDev May 27, 2026
f82cc60
Change track styling to be based on grade-only (and not surface)
RudyTheDev May 28, 2026
78b117e
Increase track casing color lightness slightly
RudyTheDev May 29, 2026
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
10 changes: 10 additions & 0 deletions css/50_misc.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -408,6 +408,16 @@ path.line.casing.tag-bridge.tag-semipaved {
stroke: #000;
}

/* Track - based on grading (tracktype) */
path.line.casing.tag-highway-track {
stroke: #ddd;
stroke-linecap: butt;
}
path.line.casing.tag-highway-track.tag-ungraded { stroke-dasharray: 7, 3, 3, 3, 3, 3; }
path.line.casing.tag-highway-track.tag-tracktype-grade2 { stroke-dasharray: 10, 4; }
path.line.casing.tag-highway-track.tag-tracktype-grade3 { stroke-dasharray: 6, 4; }
path.line.casing.tag-highway-track.tag-tracktype-grade4 { stroke-dasharray: 4, 6; }
path.line.casing.tag-highway-track.tag-tracktype-grade5 { stroke-dasharray: 2, 8; }

/* Status (e.g. proposed, abandoned) */
path.area.stroke.tag-status:not(.tag-status-disused),
Expand Down
24 changes: 16 additions & 8 deletions modules/svg/tag_classes.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -123,17 +123,25 @@ export function svgTagClasses() {

// For highways, look for surface tagging..
if ((primary === 'highway' && !osmPathHighwayTagValues[t.highway]) || primary === 'aeroway') {
let surface = t.highway === 'track' ? 'unpaved' : 'paved';
for (const k in t) {
const v = t[k];
if (k in osmPavedTags) {
surface = osmPavedTags[k][v] ? 'paved' : 'unpaved';
if (t.highway !== 'track') { // tracks are styled by grade and not surface
let surface = 'paved';
for (const k in t) {
const v = t[k];
if (k in osmPavedTags) {
surface = osmPavedTags[k][v] ? 'paved' : 'unpaved';
}
if (k in osmSemipavedTags && !!osmSemipavedTags[k][v]) {
surface = 'semipaved';
}
}
if (k in osmSemipavedTags && !!osmSemipavedTags[k][v]) {
surface = 'semipaved';
classes.push('tag-' + surface);
} else {
// Tracks with no `tracktype` for default/unknown grade-based styling
if (t.highway === 'track' &&
(!t.tracktype || (t.tracktype !== 'grade1' && t.tracktype !== 'grade2' && t.tracktype !== 'grade3' && t.tracktype !== 'grade4' && t.tracktype !== 'grade5'))) {
classes.push('tag-ungraded');
}
}
classes.push('tag-' + surface);
}

// If this is a wikidata-tagged item, add a class for that..
Expand Down
310 changes: 167 additions & 143 deletions test/spec/svg/tag_classes.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -82,149 +82,173 @@ describe('iD.svgTagClasses', function () {
expect(selection.attr('class')).to.equal(null);
});

it('adds tag-unpaved for highway=track with no surface tagging', function() {
selection
.datum(new iD.osmWay({tags: {highway: 'track'}}))
.call(iD.svgTagClasses());
expect(selection.classed('tag-unpaved')).to.be.true;
});

it('does not add tag-unpaved for highway=track with explicit paved surface tagging', function() {
selection
.datum(new iD.osmWay({tags: {highway: 'track', surface: 'asphalt'}}))
.call(iD.svgTagClasses());
expect(selection.classed('tag-unpaved')).to.be.false;

selection
.datum(new iD.osmWay({tags: {highway: 'track', tracktype: 'grade1'}}))
.call(iD.svgTagClasses());
expect(selection.classed('tag-unpaved')).to.be.false;
});

it('adds tag-unpaved for highway=track with explicit unpaved surface tagging', function() {
selection
.datum(new iD.osmWay({tags: {highway: 'track', surface: 'dirt'}}))
.call(iD.svgTagClasses());
expect(selection.classed('tag-unpaved')).to.be.true;

selection
.datum(new iD.osmWay({tags: {highway: 'track', tracktype: 'grade3'}}))
.call(iD.svgTagClasses());
expect(selection.classed('tag-unpaved')).to.be.true;
});

it('does not add tag-unpaved for non-track highways with no surface tagging', function() {
selection
.datum(new iD.osmWay({tags: {highway: 'tertiary'}}))
.call(iD.svgTagClasses());
expect(selection.classed('tag-unpaved')).to.be.false;

selection
.datum(new iD.osmWay({tags: {highway: 'foo'}}))
.call(iD.svgTagClasses());
expect(selection.classed('tag-unpaved')).to.be.false;
});

it('does not add tag-unpaved for non-track highways with explicit paved surface tagging', function() {
selection
.datum(new iD.osmWay({tags: {highway: 'tertiary', surface: 'asphalt'}}))
.call(iD.svgTagClasses());
expect(selection.classed('tag-unpaved')).to.be.false;

selection
.datum(new iD.osmWay({tags: {highway: 'foo', tracktype: 'grade1'}}))
.call(iD.svgTagClasses());
expect(selection.classed('tag-unpaved')).to.be.false;
});

it('does not add tag-unpaved for aeroways with explicit paved surface tagging', function() {
selection
.datum(new iD.osmWay({tags: {aeroway: 'taxiway', surface: 'asphalt'}}))
.call(iD.svgTagClasses());
expect(selection.classed('tag-unpaved')).to.be.false;

selection
.datum(new iD.osmWay({tags: {aeroway: 'runway', surface: 'paved'}}))
.call(iD.svgTagClasses());
expect(selection.classed('tag-unpaved')).to.be.false;
});

it('adds tag-unpaved for non-track highways with explicit unpaved surface tagging', function() {
selection
.datum(new iD.osmWay({tags: {highway: 'tertiary', surface: 'dirt'}}))
.call(iD.svgTagClasses());
expect(selection.classed('tag-unpaved')).to.be.true;

selection
.datum(new iD.osmWay({tags: {highway: 'foo', tracktype: 'grade3'}}))
.call(iD.svgTagClasses());
expect(selection.classed('tag-unpaved')).to.be.true;
});

it('adds tag-semipaved for non-track highways with explicit semipaved surface tagging', function() {
selection
.datum(new iD.osmWay({tags: {highway: 'tertiary', surface: 'paving_stones'}}))
.call(iD.svgTagClasses());
expect(selection.classed('tag-unpaved')).to.be.false;
expect(selection.classed('tag-semipaved')).to.be.true;

selection
.datum(new iD.osmWay({tags: {highway: 'foo', surface: 'wood'}}))
.call(iD.svgTagClasses());
expect(selection.classed('tag-unpaved')).to.be.false;
expect(selection.classed('tag-semipaved')).to.be.true;
});

it('adds tag-unpaved for aeroways with explicit unpaved surface tagging', function() {
selection
.datum(new iD.osmWay({tags: {aeroway: 'taxiway', surface: 'dirt'}}))
.call(iD.svgTagClasses());
expect(selection.classed('tag-unpaved')).to.be.true;

selection
.datum(new iD.osmWay({tags: {aeroway: 'runway', surface: 'unpaved'}}))
.call(iD.svgTagClasses());
expect(selection.classed('tag-unpaved')).to.be.true;
});

it('adds tag-semipaved for aeroways with explicit semipaved surface tagging', function() {
selection
.datum(new iD.osmWay({tags: {aeroway: 'taxiway', surface: 'paving_stones'}}))
.call(iD.svgTagClasses());
expect(selection.classed('tag-unpaved')).to.be.false;
expect(selection.classed('tag-semipaved')).to.be.true;

selection
.datum(new iD.osmWay({tags: {aeroway: 'runway', surface: 'wood'}}))
.call(iD.svgTagClasses());
expect(selection.classed('tag-unpaved')).to.be.false;
expect(selection.classed('tag-semipaved')).to.be.true;
});

it('does not add tag-unpaved for non-highways/aeroways', function() {
selection
.datum(new iD.osmWay({tags: {railway: 'abandoned', surface: 'gravel'}}))
.call(iD.svgTagClasses());
expect(selection.classed('tag-unpaved')).to.be.false;

selection
.datum(new iD.osmWay({tags: {amenity: 'parking', surface: 'dirt'}}))
.call(iD.svgTagClasses());
expect(selection.classed('tag-unpaved')).to.be.false;
});

it('does not add tag-wikidata if no wikidata tag', function() {
selection
.datum(new iD.osmWay())
.call(iD.svgTagClasses());
expect(selection.classed('tag-wikidata')).to.be.false;
});

it('adds tag-wikidata if entity has a wikidata tag', function() {
selection
.datum(new iD.osmWay({ tags: { wikidata: 'Q18275868' } }))
.call(iD.svgTagClasses());
expect(selection.classed('tag-wikidata')).to.be.true;
describe('surface paving', function() {
it('does not add tag-unpaved for non-track highways with no surface tagging', function() {
selection
.datum(new iD.osmWay({tags: {highway: 'tertiary'}}))
.call(iD.svgTagClasses());
expect(selection.classed('tag-unpaved')).to.be.false;

selection
.datum(new iD.osmWay({tags: {highway: 'foo'}}))
.call(iD.svgTagClasses());
expect(selection.classed('tag-unpaved')).to.be.false;
});

it('does not add tag-unpaved for non-track highways with explicit paved surface tagging', function() {
selection
.datum(new iD.osmWay({tags: {highway: 'tertiary', surface: 'asphalt'}}))
.call(iD.svgTagClasses());
expect(selection.classed('tag-unpaved')).to.be.false;

selection
.datum(new iD.osmWay({tags: {highway: 'foo', tracktype: 'grade1'}}))
.call(iD.svgTagClasses());
expect(selection.classed('tag-unpaved')).to.be.false;
});

it('does not add tag-unpaved for aeroways with explicit paved surface tagging', function() {
selection
.datum(new iD.osmWay({tags: {aeroway: 'taxiway', surface: 'asphalt'}}))
.call(iD.svgTagClasses());
expect(selection.classed('tag-unpaved')).to.be.false;

selection
.datum(new iD.osmWay({tags: {aeroway: 'runway', surface: 'paved'}}))
.call(iD.svgTagClasses());
expect(selection.classed('tag-unpaved')).to.be.false;
});

it('adds tag-unpaved for non-track highways with explicit unpaved surface tagging', function() {
selection
.datum(new iD.osmWay({tags: {highway: 'tertiary', surface: 'dirt'}}))
.call(iD.svgTagClasses());
expect(selection.classed('tag-unpaved')).to.be.true;

selection
.datum(new iD.osmWay({tags: {highway: 'foo', tracktype: 'grade3'}}))
.call(iD.svgTagClasses());
expect(selection.classed('tag-unpaved')).to.be.true;
});

it('adds tag-semipaved for non-track highways with explicit semipaved surface tagging', function() {
selection
.datum(new iD.osmWay({tags: {highway: 'tertiary', surface: 'paving_stones'}}))
.call(iD.svgTagClasses());
expect(selection.classed('tag-unpaved')).to.be.false;
expect(selection.classed('tag-semipaved')).to.be.true;

selection
.datum(new iD.osmWay({tags: {highway: 'foo', surface: 'wood'}}))
.call(iD.svgTagClasses());
expect(selection.classed('tag-unpaved')).to.be.false;
expect(selection.classed('tag-semipaved')).to.be.true;
});

it('adds tag-unpaved for aeroways with explicit unpaved surface tagging', function() {
selection
.datum(new iD.osmWay({tags: {aeroway: 'taxiway', surface: 'dirt'}}))
.call(iD.svgTagClasses());
expect(selection.classed('tag-unpaved')).to.be.true;

selection
.datum(new iD.osmWay({tags: {aeroway: 'runway', surface: 'unpaved'}}))
.call(iD.svgTagClasses());
expect(selection.classed('tag-unpaved')).to.be.true;
});

it('adds tag-semipaved for aeroways with explicit semipaved surface tagging', function() {
selection
.datum(new iD.osmWay({tags: {aeroway: 'taxiway', surface: 'paving_stones'}}))
.call(iD.svgTagClasses());
expect(selection.classed('tag-unpaved')).to.be.false;
expect(selection.classed('tag-semipaved')).to.be.true;

selection
.datum(new iD.osmWay({tags: {aeroway: 'runway', surface: 'wood'}}))
.call(iD.svgTagClasses());
expect(selection.classed('tag-unpaved')).to.be.false;
expect(selection.classed('tag-semipaved')).to.be.true;
});

it('does not add tag-unpaved for non-highways/aeroways', function() {
selection
.datum(new iD.osmWay({tags: {railway: 'abandoned', surface: 'gravel'}}))
.call(iD.svgTagClasses());
expect(selection.classed('tag-unpaved')).to.be.false;

selection
.datum(new iD.osmWay({tags: {amenity: 'parking', surface: 'dirt'}}))
.call(iD.svgTagClasses());
expect(selection.classed('tag-unpaved')).to.be.false;
});

it('does not add tag-paved/tag-unpaved for highway=track regardless of surface tagging', function() {
selection
.datum(new iD.osmWay({tags: {highway: 'track'}})) // i.e. implied unpaved
.call(iD.svgTagClasses());
expect(selection.classed('tag-paved')).to.be.false;
expect(selection.classed('tag-unpaved')).to.be.false;

selection
.datum(new iD.osmWay({tags: {highway: 'track', surface: 'asphalt'}})) // i.e. paved
.call(iD.svgTagClasses());
expect(selection.classed('tag-paved')).to.be.false;
expect(selection.classed('tag-unpaved')).to.be.false;

selection
.datum(new iD.osmWay({tags: {highway: 'track', surface: 'gravel'}})) // i.e. unpaved
.call(iD.svgTagClasses());
expect(selection.classed('tag-paved')).to.be.false;
expect(selection.classed('tag-unpaved')).to.be.false;

selection
.datum(new iD.osmWay({tags: {highway: 'track', tracktype: 'grade1'}})) // i.e. paved
.call(iD.svgTagClasses());
expect(selection.classed('tag-paved')).to.be.false;
expect(selection.classed('tag-unpaved')).to.be.false;

selection
.datum(new iD.osmWay({tags: {highway: 'track', tracktype: 'grade3'}})) // i.e. unpaved
.call(iD.svgTagClasses());
expect(selection.classed('tag-paved')).to.be.false;
expect(selection.classed('tag-unpaved')).to.be.false;
});
});

describe('track grading', function() {
it('adds tag-ungraded for highway=track with no grade tagging', function () {
selection
.datum(new iD.osmWay({tags: {highway: 'track'}}))
.call(iD.svgTagClasses());
expect(selection.classed('tag-ungraded')).to.be.true;
});

it('adds tag-ungraded for highway=track with unknown grade tagging', function () {
selection
.datum(new iD.osmWay({tags: {highway: 'track', tracktype: 'superb_grade'}}))
.call(iD.svgTagClasses());
expect(selection.classed('tag-ungraded')).to.be.true;
});

it('does not add tag-ungraded for highway=track with explicit grade tagging', function () {
selection
.datum(new iD.osmWay({tags: {highway: 'track', tracktype: 'grade3'}}))
.call(iD.svgTagClasses());
expect(selection.classed('tag-ungraded')).to.be.false;
});

it('adds tag-ungraded for highway=track even with surface tagging', function () {
selection
.datum(new iD.osmWay({tags: {highway: 'track', surface: 'asphalt'}}))
.call(iD.svgTagClasses());
expect(selection.classed('tag-ungraded')).to.be.true;

selection
.datum(new iD.osmWay({tags: {highway: 'track', surface: 'dirt'}}))
.call(iD.svgTagClasses());
expect(selection.classed('tag-ungraded')).to.be.true;
});
});

it('adds tag-wikidata if entity has a brand:wikidata tag', function() {
Expand Down