mirror of
https://github.com/FoggedLens/iD.git
synced 2026-02-13 17:23:02 +00:00
204 lines
7.1 KiB
HTML
204 lines
7.1 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/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>
|
|
|
|
<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>
|
|
</form>
|
|
|
|
<script>
|
|
var bg = d3.select("#background-color")
|
|
.on("change", function () {
|
|
var v = bg.property("value");
|
|
d3.select("body")
|
|
.style("background-color", d3.rgb(v,v,v));
|
|
});
|
|
</script>
|
|
|
|
<table>
|
|
<thead>
|
|
<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'],
|
|
tags = [
|
|
{},
|
|
{highway: 'motorway'},
|
|
{highway: 'trunk'},
|
|
{highway: 'primary'},
|
|
{highway: 'secondary'},
|
|
{highway: 'tertiary'},
|
|
{highway: 'residential'},
|
|
{highway: 'service'},
|
|
{highway: 'track'},
|
|
{highway: 'road'},
|
|
{highway: 'unclassified'},
|
|
{highway: 'living_street'},
|
|
{highway: 'pedestrian'},
|
|
{highway: 'path'},
|
|
{highway: 'footway'},
|
|
{highway: 'cycleway'},
|
|
{highway: 'bridleway'},
|
|
{highway: 'steps'},
|
|
{highway: 'proposed'},
|
|
{highway: 'construction', construction: 'motorway'},
|
|
{highway: 'construction', construction: 'trunk'},
|
|
{railway: 'rail'},
|
|
{railway: 'abandoned'},
|
|
{railway: 'subway'},
|
|
{waterway: 'stream'},
|
|
{waterway: 'river'},
|
|
{waterway: 'ditch'},
|
|
{power: 'line'},
|
|
{boundary: 'administrative'},
|
|
{boundary: 'protected_area'},
|
|
{boundary: 'national_park'}];
|
|
|
|
var row = d3.select('.highways').selectAll('tr')
|
|
.data(tags)
|
|
.enter().append('tr');
|
|
|
|
row.append('th')
|
|
.html(function (d) { return _.map(d, function (value, key) { return key + "=" + value;}).join("<br>"); });
|
|
|
|
var projection = Object,
|
|
filter = d3.functor(true),
|
|
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);
|
|
|
|
row.selectAll('td')
|
|
.data(function (d) {
|
|
return _.flatten(zooms.map(function (z) {
|
|
return modes.map(function (m) {
|
|
return { zoom: z, mode: m, tags: d };
|
|
});
|
|
}));
|
|
})
|
|
.enter()
|
|
.append('td')
|
|
.attr('class', function (d) { return d.mode === 'selected' ? 'mode-select' : 'mode-browse'; })
|
|
.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.tags}),
|
|
graph = iD.Graph([a, b, highway]);
|
|
|
|
d3.select(this)
|
|
.attr('class', 'behavior-hover')
|
|
.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>
|
|
|
|
<table>
|
|
<thead>
|
|
<tr><th></th><th>Base</th><th>Selected</th></tr>
|
|
</thead>
|
|
<tbody class="areas">
|
|
</tbody>
|
|
</table>
|
|
|
|
<script>
|
|
var modes = ['base', 'selected'],
|
|
tags = [
|
|
{area: 'yes'},
|
|
{natural: 'yes'},
|
|
{natural: 'water'},
|
|
{natural: 'wood'},
|
|
{building: 'yes'},
|
|
{amenity: 'parking'}
|
|
];
|
|
|
|
var row = d3.select('.areas').selectAll('tr')
|
|
.data(tags)
|
|
.enter().append('tr');
|
|
|
|
row.append('th')
|
|
.html(function (d) { return _.map(d, function (value, key) { return key + "=" + value;}).join("<br>"); });
|
|
|
|
var a = iD.Node({loc: [15, 15]}),
|
|
b = iD.Node({loc: [85, 15]}),
|
|
c = iD.Node({loc: [85, 85]}),
|
|
d = iD.Node({loc: [15, 85]}),
|
|
way = iD.Way({nodes: [a.id, b.id, c.id, d.id, a.id]}),
|
|
vertices = iD.svg.Vertices(projection),
|
|
areas = iD.svg.Areas(projection),
|
|
midpoints = iD.svg.Midpoints(projection);
|
|
|
|
row.selectAll('td')
|
|
.data(function (d) {
|
|
return modes.map(function (m) {
|
|
return { mode: m, tags: d };
|
|
});
|
|
})
|
|
.enter()
|
|
.append('td')
|
|
.append('svg')
|
|
.attr('width', 100)
|
|
.attr('height', 100)
|
|
.call(iD.svg.Surface())
|
|
.each(function (datum) {
|
|
var area = way.update({tags: datum.tags}),
|
|
graph = iD.Graph([a, b, c, d, area]);
|
|
|
|
d3.select(this)
|
|
.attr('class', datum.mode === 'selected' ? 'mode-select' : 'mode-browse')
|
|
.call(vertices, graph, [a, b, c, d], filter)
|
|
.call(areas, graph, [area], filter)
|
|
.call(midpoints, graph, [area], filter)
|
|
.selectAll('.area')
|
|
.classed(datum.mode, datum.mode !== 'base');
|
|
});
|
|
</script>
|
|
|
|
</body>
|
|
</html>
|