diff --git a/API.md b/API.md
index d92a69628..35784d5e4 100644
--- a/API.md
+++ b/API.md
@@ -26,21 +26,21 @@ elements we use in order to implement a particular visual style.
### Geometric classes
In addition to the OSM element vocabulary of nodes, ways, and relations, iD has
-established a related geometric vocabulary consisting of points, lines, and areas.
+established a related geometric vocabulary consisting of points, vertices, lines,
+and areas.
-A **point** is a node that is either not a member of any way, or has specific tags
-that identify it as "interesting" in some way. For example, a node belonging to a
-way may also be considered a point if it has a `traffic_signal` tag. Elements
-representing points have a `.point` class. Since a point is always a node, they
-also have a `.node` class. Nodes that are not points can be selected using
-`.node:not(.point)` (TODO: come up with something better than that.)
+A **point** is a node that is not a member of any way. Elements representing points
+have a `.point` class. Since a point is always a node, they also have a `.node` class.
+
+A **vertex** is a node that is a member of one or more ways. Elements representing
+points have `.vertex` and `.node` classes.
A **line** is a way that is not an area. Elements representing lines have a `.line`
class. Since a line is also a way, they also have a `.way` class.
An **area** is a way that is circular, has certain tags, or lacks certain other
tags (see `iD.Way#isArea` for the exact definition). Elements representing areas
-have an `.area` class. Since an area is also a way, they also have a `.way` class.
+have `.area` and `.way` classes.
### Tag classes
diff --git a/css/map.css b/css/map.css
index 47d48770c..c8f8c676b 100644
--- a/css/map.css
+++ b/css/map.css
@@ -6,19 +6,19 @@ path {
fill: none;
}
-g.marker circle {
+g.point circle {
fill:#fff;
}
-g.marker.hover circle,
-g.marker.selected circle {
+g.point.hover circle,
+g.point.selected circle {
fill:#ffff00;
stroke-width:4;
stroke:#fff
}
/* interactive elements */
-circle.handle {
+circle.vertex {
fill:white;
stroke:#333;
fill-opacity:1;
@@ -26,14 +26,14 @@ circle.handle {
stroke-opacity: 1;
}
-circle.handle.shared {
+circle.vertex.shared {
fill:#aff;
}
-circle.handle.hover {
+circle.vertex.hover {
}
-circle.handle.selected {
+circle.vertex.selected {
fill: #ffff00;
}
@@ -243,24 +243,19 @@ text.oneway {
cursor:url(../img/cursor-grabbing.png) 9 9, auto;
}
-.mode-browse path,
-.mode-select path {
- cursor: url(../img/cursor-select-way.png), pointer;
+.mode-browse .point,
+.mode-select .point {
+ cursor: url(../img/cursor-select-point.png), pointer;
}
-.mode-browse .marker,
-.mode-select .marker {
- cursor: url(../img/cursor-select-marker.png), pointer;
+.mode-select .vertex,
+.mode-browse .vertex {
+ cursor: url(../img/cursor-select-vertex.png), pointer;
}
-.mode-select .handle,
-.mode-browse .handle {
- cursor: url(../img/cursor-select-node.png), pointer;
-}
-
-.mode-select .accuracy-handle,
-.mode-browse .accuracy-handle {
- cursor: url(../img/cursor-select-split.png), pointer;
+.mode-browse .line,
+.mode-select .line {
+ cursor: url(../img/cursor-select-line.png), pointer;
}
.mode-select .area,
@@ -268,10 +263,15 @@ text.oneway {
cursor: url(../img/cursor-select-area.png), pointer;
}
-path:active,
+.mode-select .accuracy-handle,
+.mode-browse .accuracy-handle {
+ cursor: url(../img/cursor-select-split.png), pointer;
+}
+
+.point:active,
+.vertex:active,
+.line:active,
.area:active,
-.marker:active,
-.handle:active,
.accuracy-handle:active,
.mode-select .selected {
cursor: url(../img/cursor-select-acting.png), pointer;
@@ -285,7 +285,7 @@ path:active,
}
.mode-add-point #map:hover {
- cursor:url(../img/cursor-draw-marker.png) 18 18, auto;
+ cursor:url(../img/cursor-draw-point.png) 18 18, auto;
}
#map.finish-area:hover {
diff --git a/img/cursor-draw-marker.png b/img/cursor-draw-point.png
similarity index 100%
rename from img/cursor-draw-marker.png
rename to img/cursor-draw-point.png
diff --git a/img/cursor-select-path.png b/img/cursor-select-line.png
similarity index 100%
rename from img/cursor-select-path.png
rename to img/cursor-select-line.png
diff --git a/img/cursor-select-place.png b/img/cursor-select-place.png
deleted file mode 100644
index 79567175a..000000000
Binary files a/img/cursor-select-place.png and /dev/null differ
diff --git a/img/cursor-select-marker.png b/img/cursor-select-point.png
similarity index 100%
rename from img/cursor-select-marker.png
rename to img/cursor-select-point.png
diff --git a/img/cursor-select-node.png b/img/cursor-select-vertex.png
similarity index 100%
rename from img/cursor-select-node.png
rename to img/cursor-select-vertex.png
diff --git a/index.html b/index.html
index ed15236a6..230f12f28 100644
--- a/index.html
+++ b/index.html
@@ -34,7 +34,7 @@
-
+
diff --git a/js/id/behavior/drag_node.js b/js/id/behavior/drag_node.js
index dbfcb3a62..e104c795f 100644
--- a/js/id/behavior/drag_node.js
+++ b/js/id/behavior/drag_node.js
@@ -3,7 +3,7 @@ iD.behavior.DragNode = function(mode) {
projection = mode.map.projection;
return iD.behavior.drag()
- .delegate(".handle, .marker")
+ .delegate(".node")
.origin(function(entity) {
return projection(entity.loc);
})
diff --git a/js/id/renderer/map.js b/js/id/renderer/map.js
index 4e0703b1f..afc2a5f46 100644
--- a/js/id/renderer/map.js
+++ b/js/id/renderer/map.js
@@ -16,10 +16,9 @@ iD.Map = function() {
notice,
background = iD.Background()
.projection(projection),
- class_stroke = iD.Style.styleClasses('stroke'),
- class_fill = iD.Style.styleClasses('stroke'),
- class_area = iD.Style.styleClasses('area'),
- class_casing = iD.Style.styleClasses('casing'),
+ class_stroke = iD.Style.styleClasses('way line stroke'),
+ class_casing = iD.Style.styleClasses('way line casing'),
+ class_area = iD.Style.styleClasses('way area'),
transformProp = iD.util.prefixCSSProperty('Transform'),
support3d = iD.util.support3d(),
supersurface, surface, defs, tilegroup, r, g, alength;
@@ -76,7 +75,7 @@ iD.Map = function() {
function drawVector(difference) {
if (surface.style(transformProp) != 'none') return;
- var filter, all, ways = [], lines = [], areas = [], points = [], waynodes = [],
+ var filter, all, ways = [], lines = [], areas = [], points = [], vertices = [],
extent = map.extent(),
graph = history.graph();
@@ -109,19 +108,19 @@ iD.Map = function() {
} else if (a._poi) {
points.push(a);
} else if (!a._poi && a.type === 'node' && a.intersects(extent)) {
- waynodes.push(a);
+ vertices.push(a);
}
}
var parentStructure = graph.parentStructure(ways);
var wayAccuracyHandles = ways.reduce(function(mem, w) {
return mem.concat(accuracyHandles(w));
}, []);
- drawHandles(waynodes, parentStructure, filter);
+ drawVertices(vertices, parentStructure, filter);
drawAccuracyHandles(wayAccuracyHandles, filter);
drawCasings(lines, filter);
drawFills(areas, filter);
drawStrokes(lines, filter);
- drawMarkers(points, filter);
+ drawPoints(points, filter);
}
function accuracyHandles(way) {
@@ -139,21 +138,19 @@ iD.Map = function() {
return handles;
}
- function drawHandles(waynodes, parentStructure, filter) {
+ function drawVertices(vertices, parentStructure, filter) {
function shared(d) { return parentStructure[d.id] > 1; }
- var handles = g.hit.selectAll('circle.handle')
+ var vertices = g.hit.selectAll('circle.vertex')
.filter(filter)
- .data(waynodes, key);
+ .data(vertices, key);
- handles.exit().remove();
+ vertices.exit().remove();
- handles.enter().insert('circle', ':first-child')
- .attr({
- 'class': 'handle'
- });
+ vertices.enter().insert('circle', ':first-child')
+ .attr('class', 'node vertex');
- handles.attr('transform', function(entity) {
+ vertices.attr('transform', function(entity) {
var p = projection(entity.loc);
return 'translate(' + [~~p[0], ~~p[1]] +
')';
@@ -161,7 +158,7 @@ iD.Map = function() {
.classed('shared', shared)
.classed('hover', classHover);
- handles.transition().duration(50).attr('r', function(d) {
+ vertices.transition().duration(50).attr('r', function(d) {
return d.id === hover ? 8: 4;
});
}
@@ -211,23 +208,23 @@ iD.Map = function() {
drawLines(ways, filter, g.casing, class_casing);
}
- function drawMarkers(points, filter) {
- var markers = g.hit.selectAll('g.marker')
+ function drawPoints(points, filter) {
+ var points = g.hit.selectAll('g.point')
.filter(filter)
.data(points, key);
- markers.exit().remove();
- var marker = markers.enter().append('g')
- .attr('class', 'marker');
- marker.append('circle')
+ points.exit().remove();
+ var group = points.enter().append('g')
+ .attr('class', 'node point');
+ group.append('circle')
.attr({ r: 10, cx: 8, cy: 8 });
- marker.append('image')
+ group.append('image')
.attr({ width: 16, height: 16 });
- markers.attr('transform', function(d) {
+ points.attr('transform', function(d) {
var pt = projection(d.loc);
return 'translate(' + [~~pt[0], ~~pt[1]] + ') translate(-8, -8)';
});
- markers.classed('hover', classHover);
- markers.select('image').attr('xlink:href', iD.Style.markerimage);
+ points.classed('hover', classHover);
+ points.select('image').attr('xlink:href', iD.Style.pointImage);
}
function drawStrokes(ways, filter) {
diff --git a/js/id/renderer/markers.js b/js/id/renderer/points.js
similarity index 95%
rename from js/id/renderer/markers.js
rename to js/id/renderer/points.js
index c40cb3407..3526cf917 100644
--- a/js/id/renderer/markers.js
+++ b/js/id/renderer/points.js
@@ -1,6 +1,6 @@
-// an index of tag -> marker image combinations, taken from
+// an index of tag -> point image combinations, taken from
// http://svn.openstreetmap.org/applications/rendering/mapnik/inc/layer-amenity-symbols.xml.inc
-iD._markers = [
+iD._points = [
{
tags: { aeroway: 'helipad' },
icon: 'helipad'
@@ -549,18 +549,18 @@ iD._markers = [
}
];
-// generate a fast lookup table for marker styling
-iD._markertable = (function(markers) {
+// generate a fast lookup table for point styling
+iD._pointTable = (function(points) {
var table = {};
- for (var i = 0; i < markers.length; i++) {
- var marker = markers[i];
+ for (var i = 0; i < points.length; i++) {
+ var point = points[i];
// single-tag matches, the easy case
- if (Object.keys(marker.tags).length === 1) {
- for (var k in marker.tags) {
- var key = k + '=' + marker.tags[k];
- table[key] = marker.icon;
+ if (Object.keys(point.tags).length === 1) {
+ for (var k in point.tags) {
+ var key = k + '=' + point.tags[k];
+ table[key] = point.icon;
}
}
}
return table;
-})(iD._markers);
+})(iD._points);
diff --git a/js/id/renderer/style.js b/js/id/renderer/style.js
index 01bece5c8..bf33a1bce 100644
--- a/js/id/renderer/style.js
+++ b/js/id/renderer/style.js
@@ -5,7 +5,7 @@ iD.Style = {};
// Since SVG does not support z-index, we sort roads manually with d3's `sort`
// and the `waystack` fn.
//
-// This also chooses kosher CSS classes for ways, and marker images for POIs
+// This also chooses kosher CSS classes for ways, and images for points
iD.Style.highway_stack = {
motorway: 0,
@@ -37,12 +37,12 @@ iD.Style.waystack = function(a, b) {
return as - bs;
};
-iD.Style.markerimage = function(d) {
+iD.Style.pointImage = function(d) {
// TODO: optimize
for (var k in d.tags) {
var key = k + '=' + d.tags[k];
- if (iD._markertable[key]) {
- return 'icons/' + iD._markertable[key] + '.png';
+ if (iD._pointTable[key]) {
+ return 'icons/' + iD._pointTable[key] + '.png';
}
}
return 'icons/unknown.png';
diff --git a/test/index.html b/test/index.html
index 99e6de387..c1e6716a1 100644
--- a/test/index.html
+++ b/test/index.html
@@ -37,7 +37,7 @@
-
+