mirror of
https://github.com/FoggedLens/iD.git
synced 2026-02-13 01:02:58 +00:00
101 lines
3.7 KiB
HTML
101 lines
3.7 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset='utf-8'>
|
|
<title>Rendering Tests</title>
|
|
<link rel="stylesheet" href="../css/map.css">
|
|
</head>
|
|
<body>
|
|
<!-- include source files here... -->
|
|
<script src='../js/lib/lodash.js'></script>
|
|
<script src='../js/lib/d3.v3.js'></script>
|
|
|
|
<script src='../js/id/id.js'></script>
|
|
<script src='../js/id/util.js'></script>
|
|
|
|
<script src="../js/id/geo.js"></script>
|
|
<script src="../js/id/geo/extent.js"></script>
|
|
|
|
<script src="../js/id/svg.js"></script>
|
|
<script src="../js/id/svg/areas.js"></script>
|
|
<script src="../js/id/svg/lines.js"></script>
|
|
<script src="../js/id/svg/member_classes.js"></script>
|
|
<script src="../js/id/svg/midpoints.js"></script>
|
|
<script src="../js/id/svg/multipolygons.js"></script>
|
|
<script src="../js/id/svg/points.js"></script>
|
|
<script src="../js/id/svg/surface.js"></script>
|
|
<script src="../js/id/svg/tag_classes.js"></script>
|
|
<script src="../js/id/svg/vertices.js"></script>
|
|
|
|
<script src='../js/id/graph/entity.js'></script>
|
|
<script src='../js/id/graph/graph.js'></script>
|
|
<script src='../js/id/graph/history.js'></script>
|
|
<script src='../js/id/graph/node.js'></script>
|
|
<script src='../js/id/graph/relation.js'></script>
|
|
<script src='../js/id/graph/way.js'></script>
|
|
|
|
<table>
|
|
<thead>
|
|
<tr class="title"><th colspan="7">Highways</th></tr>
|
|
<tr><th></th><th colspan="3">z16</th><th colspan="3">z17</th></tr>
|
|
<tr><th></th><th>Base</th><th>Hover</th><th>Selected</th><th>Base</th><th>Hover</th><th>Selected</th></tr>
|
|
</thead>
|
|
<tbody class="highways">
|
|
</tbody>
|
|
</table>
|
|
|
|
<script>
|
|
var zooms = [16, 17],
|
|
modes = ['base', 'hover', 'selected'],
|
|
highways = [
|
|
'', 'motorway', 'trunk', 'primary', 'secondary', 'tertiary', 'residential',
|
|
'service', 'track', 'road', 'unclassified', 'living_street', 'pedestrian',
|
|
'path', 'footway', 'cycleway', 'bridleway', 'steps', 'proposed', 'construction'];
|
|
|
|
var row = d3.select('.highways').selectAll('tr')
|
|
.data(highways)
|
|
.enter().append('tr');
|
|
|
|
row.append('th')
|
|
.text(function (d) { return d; });
|
|
|
|
var projection = Object,
|
|
filter = d3.functor(true),
|
|
a = iD.Node({loc: [15, 15]}),
|
|
b = iD.Node({loc: [185, 15]}),
|
|
way = iD.Way({nodes: [a, b]}),
|
|
vertices = iD.svg.Vertices(projection),
|
|
lines = iD.svg.Lines(projection),
|
|
midpoints = iD.svg.Midpoints(projection);
|
|
|
|
row.selectAll('td')
|
|
.data(function (d) {
|
|
return _.flatten(zooms.map(function (z) {
|
|
return modes.map(function (m) {
|
|
return { zoom: z, mode: m, tag: d };
|
|
});
|
|
}));
|
|
})
|
|
.enter()
|
|
.append('td')
|
|
.append('svg')
|
|
.attr('width', 200)
|
|
.attr('height', 30)
|
|
.attr('data-zoom', function (d) { return d.zoom; })
|
|
.call(iD.svg.Surface())
|
|
.each(function (d) {
|
|
var highway = way.update({tags: d.tag ? {highway: d.tag} : {}}),
|
|
graph = iD.Graph([a, b, highway]);
|
|
|
|
d3.select(this)
|
|
.attr('class', d.mode === 'selected' ? 'mode-select' : 'mode-browse')
|
|
.call(vertices, graph, [a, b], filter)
|
|
.call(lines, graph, [highway], filter)
|
|
.call(midpoints, graph, [highway], filter)
|
|
.selectAll('.line')
|
|
.classed(d.mode, d.mode !== 'base');
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|