diff --git a/modules/svg/points.js b/modules/svg/points.js index 24c894174..909533f3a 100644 --- a/modules/svg/points.js +++ b/modules/svg/points.js @@ -3,6 +3,10 @@ import { osmEntity } from '../osm'; import { svgPointTransform, svgTagClasses } from './index'; +var TAU = 2 * Math.PI; +function ktoz(k) { return Math.log(k * TAU) / Math.LN2 - 8; } + + export function svgPoints(projection, context) { function markerPath(selection, klass) { @@ -19,9 +23,16 @@ export function svgPoints(projection, context) { return function drawPoints(selection, graph, entities, filter) { var wireframe = context.surface().classed('fill-wireframe'); - var points = wireframe ? [] : entities.filter(function(e) { - return e.geometry(graph) === 'point' && !e.directions(graph, projection).length; - }); + var zoom = ktoz(projection.scale()); + + // points with a direction will render as vertices at higher zooms + function renderAsPoint(entity) { + return entity.geometry(graph) === 'point' && + !(zoom >= 18 && entity.directions(graph, projection).length); + } + + // all points will render as vertices in wireframe mode too + var points = wireframe ? [] : entities.filter(renderAsPoint); points.sort(sortY); diff --git a/modules/svg/vertices.js b/modules/svg/vertices.js index ad0c41786..7f2d5a49c 100644 --- a/modules/svg/vertices.js +++ b/modules/svg/vertices.js @@ -83,9 +83,6 @@ export function svgVertices(projection, context) { selection.selectAll('use') .attr('visibility', (z === 0 ? 'hidden' : null)); - - selection.selectAll('.viewfieldgroup') - .attr('visibility', (zoom < 18 ? 'hidden' : null)); } @@ -141,7 +138,7 @@ export function svgVertices(projection, context) { // Directional vertices get viewfields var dgroups = groups.filter(function(d) { return getDirections(d); }) .selectAll('.viewfieldgroup') - .data(function(d) { return /*klass === 'vertex-hover' ? [] : */[d]; }, osmEntity.key); + .data(function data(d) { return zoom < 18 ? [] : [d]; }, osmEntity.key); // exit dgroups.exit() @@ -173,6 +170,7 @@ export function svgVertices(projection, context) { function drawVertices(selection, graph, entities, filter, extent) { var wireframe = context.surface().classed('fill-wireframe'); + var zoom = ktoz(projection.scale()); var siblings = {}; getSiblingAndChildVertices(context.selectedIDs(), graph, extent); @@ -202,10 +200,14 @@ export function svgVertices(projection, context) { // drawHover(selection, graph, extent, true); + // Points can also render as vertices: + // 1. in wireframe mode or + // 2. at higher zooms if they have a direction function renderAsVertex(entity) { var geometry = entity.geometry(graph); - return (geometry === 'vertex') || - (geometry === 'point' && (wireframe || entity.directions(graph, projection).length)); + return geometry === 'vertex' || (geometry === 'point' && ( + wireframe || (zoom > 18 && entity.directions(graph, projection).length) + )); }