CalvinBackup/iD
1
0
Fork 0
mirror of https://github.com/FoggedLens/iD.git synced 2026-05-15 21:48:20 +02:00
Code Issues Packages Projects Releases Wiki Activity

Rendering tagged points

Browse Source 
At z16 and below, tagged points are rendered with a small
dot in the center. At z17 and above, they are rendered with
a maki icon.

See the test rendering page for examples.

Fixes #381.
This commit is contained in:
John Firebaugh
2013-03-13 17:31:16 -07:00
parent 2c08f26b6d
commit 3787185182
7 changed files with 181 additions and 87 deletions
Download Patch File Download Diff File Expand all files Collapse all files
css/map.css
+7 -62
View File
@@ -60,76 +60,21 @@ g.point.active, g.point.active * {
/* vertices */
g.vertex .fill {
fill:white;
fill: none;
}
g.vertex .stroke {
stroke:black;
stroke-opacity: .5;
stroke-width:2;
fill:white;
stroke: #666;
stroke-width: 1;
fill: white;
}
svg[data-zoom="16"] g.vertex .shadow {
-webkit-transform:scale(0.8, 0.8);
-moz-transform:scale(0.8, 0.8);
transform:scale(0.8, 0.8);
}
svg[data-zoom="16"] g.vertex .stroke,
svg[data-zoom="16"] g.vertex .fill {
-webkit-transform:scale(0.6, 0.6);
-moz-transform:scale(0.6, 0.6);
transform:scale(0.6, 0.6);
}
svg[data-zoom="17"] g.vertex .shadow {
-webkit-transform:scale(0.9, 0.9);
-moz-transform:scale(0.9, 0.9);
transform:scale(0.9, 0.9);
}
svg[data-zoom="17"] g.vertex .stroke,
svg[data-zoom="17"] g.vertex .fill {
-webkit-transform:scale(0.7, 0.7);
-moz-transform:scale(0.7, 0.7);
transform:scale(0.7, 0.7);
}
g.vertex.shared .shadow {
-webkit-transform:scale(1.2, 1.2);
-moz-transform:scale(1.2, 1.2);
transform:scale(1.2, 1.2);
}
g.vertex.shared .fill,
g.vertex.shared .stroke {
-webkit-transform:scale(1.1, 1.1);
-moz-transform:scale(1.1, 1.1);
transform:scale(1.1, 1.1);
}
svg[data-zoom="16"] g.vertex.shared .shadow {
-webkit-transform:scale(0.9, 0.9);
-moz-transform:scale(0.9, 0.9);
transform:scale(0.9, 0.9);
}
svg[data-zoom="16"] g.vertex.shared .fill,
svg[data-zoom="16"] g.vertex.shared .stroke {
-webkit-transform:scale(0.8, 0.8);
-moz-transform:scale(0.8, 0.8);
transform:scale(0.8, 0.8);
}
svg[data-zoom="17"] g.vertex.shared .shadow {
-webkit-transform:scale(1, 1);
-moz-transform:scale(1, 1);
transform:scale(1, 1);
}
svg[data-zoom="17"] g.vertex.shared .fill,
svg[data-zoom="17"] g.vertex.shared .stroke {
-webkit-transform:scale(0.9, 0.9);
-moz-transform:scale(0.9, 0.9);
transform:scale(0.9, 0.9);
fill: #aaa;
}
g.vertex.shared .fill {
fill:#aaa;
svg[data-zoom="16"] g.vertex.tagged .fill {
fill: #000;
}
g.vertex .shadow {
js/id/renderer/map.js
+2 -2
View File
@@ -15,7 +15,7 @@ iD.Map = function(context) {
.projection(projection),
transformProp = iD.util.prefixCSSProperty('Transform'),
points = iD.svg.Points(roundedProjection, context),
vertices = iD.svg.Vertices(roundedProjection),
vertices = iD.svg.Vertices(roundedProjection, context),
lines = iD.svg.Lines(projection),
areas = iD.svg.Areas(roundedProjection),
midpoints = iD.svg.Midpoints(roundedProjection),
@@ -87,7 +87,7 @@ iD.Map = function(context) {
} else {
surface
.call(points, graph, all, filter)
.call(vertices, graph, all, filter)
.call(vertices, graph, all, filter, map.zoom())
.call(lines, graph, all, filter, dimensions)
.call(areas, graph, all, filter)
.call(midpoints, graph, all, filter, extent)
js/id/svg/vertices.js
+64 -10
View File
@@ -1,5 +1,12 @@
iD.svg.Vertices = function(projection) {
return function drawVertices(surface, graph, entities, filter) {
iD.svg.Vertices = function(projection, context) {
var radiuses = {
// z16-, z17, z18+, tagged
shadow: [6, 7.5, 7.5, 11.5],
stroke: [2.5, 3.5, 3.5, 7],
fill: [1, 3, 3, 4.5]
};
return function drawVertices(surface, graph, entities, filter, zoom) {
var vertices = [];
for (var i = 0; i < entities.length; i++) {
@@ -21,28 +28,75 @@ iD.svg.Vertices = function(projection) {
.insert('g', ':first-child')
.attr('class', 'node vertex');
if (zoom < 17) {
zoom = 0;
} else if (zoom < 18) {
zoom = 1;
} else {
zoom = 2;
}
group.append('circle')
.attr('r', 9)
.attr('class', 'node vertex shadow');
group.append('circle')
.attr('r', 4)
.attr('class', 'node vertex stroke');
group.append('circle')
.attr('r', 3)
.attr('class', 'node vertex fill');
groups.attr('transform', iD.svg.PointTransform(projection))
.call(iD.svg.TagClasses())
.call(iD.svg.MemberClasses(graph))
.classed('tagged', function(entity) { return entity.hasInterestingTags(); })
.classed('shared', function(entity) { return graph.isShared(entity); });
// Selecting the following implicitly
// sets the data (vertex entity) on the elements
groups.select('circle.fill');
groups.select('circle.stroke');
groups.select('circle.shadow');
function center(entity) {
if (zoom !== 0 && entity.hasInterestingTags()) {
d3.select(this)
.attr('cx', 0.5)
.attr('cy', -0.5);
} else {
d3.select(this)
.attr('cy', 0)
.attr('cx', 0);
}
}
groups.select('circle.shadow')
.each(center)
.attr('r', function(entity) {
return radiuses.shadow[zoom !== 0 && entity.hasInterestingTags() ? 3 : zoom]
});
groups.select('circle.stroke')
.each(center)
.attr('r', function(entity) {
return radiuses.stroke[zoom !== 0 && entity.hasInterestingTags() ? 3 : zoom]
});
groups.select('circle.fill')
.each(center)
.attr('r', function(entity) {
return radiuses.fill[zoom !== 0 && entity.hasInterestingTags() ? 3 : zoom];
});
var use = groups.selectAll('use')
.data(function(entity) {
return zoom !== 0 && entity.hasInterestingTags() ? [entity] : [];
}, function(entity) {
return entity.id + '-' + zoom;
});
use.enter().append('use')
.attr('transform', 'translate(-6, -6)')
.attr('clip-path', 'url(#clip-square-12)')
.attr('xlink:href', function(entity) {
return '#maki-' + context.presets().match(entity, graph).icon + '-12';
});
use.exit()
.remove();
groups.exit()
.remove();
test/css
Symlink
+1
View File
@@ -0,0 +1 @@
../css
test/img
Symlink
+1
View File
@@ -0,0 +1 @@
../img
test/rendering.html
+101 -10
View File
@@ -4,6 +4,7 @@
<meta charset='utf-8'>
<title>Rendering Tests</title>
<link rel="stylesheet" href="../css/map.css">
<link rel="stylesheet" href="../css/maki.css">
</head>
<body>
<!-- include source files here... -->
@@ -33,6 +34,10 @@
<script src='../js/id/core/relation.js'></script>
<script src='../js/id/core/way.js'></script>
<script src='../js/id/presets.js'></script>
<script src='../js/id/presets/collection.js'></script>
<script src='../js/id/presets/preset.js'></script>
<form style="position: fixed; right: 10px; bottom: 10px">
<input id="background-color" type="range" min="0" max="255" value="255">
<label for="background-color">Background Color</label>
@@ -45,6 +50,100 @@
d3.select("body")
.style("background-color", d3.rgb(v,v,v));
});
var infiniteExtent = iD.geo.Extent([0, 0], [Infinity, Infinity]),
projection = function(p) { return p; },
filter = d3.functor(true),
context = {};
projection.stream = function(listener) {
return listener;
};
context.presets = function() {
return iD.presets().load({
presets: [{
geometry: ['vertex'],
tags: {
highway: 'turning_circle'
},
icon: 'circle'
}, {
geometry: ['vertex'],
tags: {
railway: 'level_crossing'
},
icon: 'cross'
}]
});
};
</script>
<table>
<thead>
<tr><th></th><th colspan="3">z16</th><th colspan="3">z17</th><th colspan="3">z18</th></tr>
<tr><th></th><th>Base</th><th>Hover</th><th>Selected</th><th>Base</th><th>Hover</th><th>Selected</th><th>Base</th><th>Hover</th><th>Selected</th></tr>
</thead>
<tbody class="points">
</tbody>
</table>
<script>
var data = [{
type: 'normal',
tags: {}
}, {
type: 'shared',
shared: true,
tags: {}
}, {
type: 'highway=turning_circle',
tags: {highway: 'turning_circle'}
}, {
type: 'railway=level_crossing',
tags: {railway: 'level_crossing'}
}],
zooms = [16, 17, 18],
modes = ['base', 'hover', 'selected'],
node = iD.Node({loc: [15, 15]}),
way = iD.Way({nodes: [node.id]}),
vertices = iD.svg.Vertices(projection, context);
var row = d3.select('.points').selectAll('tr')
.data(data)
.enter().append('tr');
row.append('th')
.text(function (d) { return d.type; });
row.selectAll('td')
.data(function (d) {
return _.flatten(zooms.map(function (z) {
return modes.map(function (m) {
return _.extend({ zoom: z, mode: m }, d);
});
}));
})
.enter()
.append('td')
.attr('class', function (d) { return d.mode === 'selected' ? 'mode-select' : 'mode-browse'; })
.append('svg')
.attr('width', 30)
.attr('height', 30)
.attr('data-zoom', function (d) { return d.zoom; })
.call(iD.svg.Surface())
.each(function (d) {
var n = node.update({tags: d.tags}),
graph = iD.Graph([n, way]);
d3.select(this)
.attr('class', 'behavior-hover')
.call(vertices, graph, [n, way], filter, d.zoom)
.selectAll('.vertex')
.classed(d.mode, d.mode !== 'base')
.classed('shared', d.shared);
});
</script>
<table>
@@ -57,8 +156,6 @@
</table>
<script>
var infiniteExtent = iD.geo.Extent([0, 0], [Infinity, Infinity]);
var zooms = [16, 17],
modes = ['base', 'hover', 'selected'],
tags = [
@@ -101,19 +198,13 @@
row.append('th')
.html(function (d) { return _.map(d, function (value, key) { return key + "=" + value;}).join("<br>"); });
var projection = function(p) { return p; },
filter = d3.functor(true),
a = iD.Node({loc: [15, 15]}),
var a = iD.Node({loc: [15, 15]}),
b = iD.Node({loc: [185, 15]}),
way = iD.Way({nodes: [a.id, b.id]}),
vertices = iD.svg.Vertices(projection),
lines = iD.svg.Lines(projection),
midpoints = iD.svg.Midpoints(projection);
projection.stream = function(listener) {
return listener;
};
row.selectAll('td')
.data(function (d) {
return _.flatten(zooms.map(function (z) {
@@ -136,7 +227,7 @@
d3.select(this)
.attr('class', 'behavior-hover')
.call(vertices, graph, [a, b], filter)
.call(vertices, graph, [a, b], filter, d.zoom)
.call(lines, graph, [highway], filter)
.call(midpoints, graph, [highway], filter, infiniteExtent)
.selectAll('.line')
test/spec/svg/vertices.js
+5 -3
View File
@@ -1,9 +1,11 @@
describe("iD.svg.Vertices", function () {
var surface,
projection = Object,
filter = d3.functor(true);
filter = d3.functor(true),
context;
beforeEach(function () {
context = iD();
surface = d3.select(document.createElementNS('http://www.w3.org/2000/svg', 'svg'))
.call(iD.svg.Surface());
});
@@ -13,7 +15,7 @@ describe("iD.svg.Vertices", function () {
way = iD.Way({nodes: [node.id]}),
graph = iD.Graph([node, way]);
surface.call(iD.svg.Vertices(projection), graph, [node], filter);
surface.call(iD.svg.Vertices(projection, context), graph, [node], filter);
expect(surface.select('.vertex')).to.be.classed('tag-highway');
expect(surface.select('.vertex')).to.be.classed('tag-highway-traffic_signals');
@@ -25,7 +27,7 @@ describe("iD.svg.Vertices", function () {
way2 = iD.Way({nodes: [node.id]}),
graph = iD.Graph([node, way1, way2]);
surface.call(iD.svg.Vertices(projection), graph, [node], filter);
surface.call(iD.svg.Vertices(projection, context), graph, [node], filter);
expect(surface.select('.vertex')).to.be.classed('shared');
});