Extend leaf ways, so they don't stop within the viewport

modules/osm/intersection.js

@@ -10,10 +10,17 @@ import {
 } from '../actions';
 
 import { coreGraph } from '../core';
-import { geoAngle, geoSphericalDistance } from '../geo';
+
+import {
+    geoAngle,
+    geoSphericalDistance,
+    geoVecInterp
+} from '../geo';
+
 import { osmEntity } from './entity';
 
 
+
 export function osmTurn(turn) {
     if (!(this instanceof osmTurn)) {
         return new osmTurn(turn);
@@ -326,6 +333,25 @@ export function osmIntersection(graph, startVertexId) {
         .map(function(way) { return vgraph.entity(way.id); });
 
 
+    // STEP 8:  Extend leaf ways
+    ways.forEach(function(way) {
+        var n1, n2;
+        if (way.__via) return;   // not a leaf
+        if (way.__first) {
+            n1 = vgraph.entity(way.nodes[way.nodes.length - 2]);
+            n2 = vgraph.entity(way.nodes[way.nodes.length - 1]);
+        } else {
+            n1 = vgraph.entity(way.nodes[1]);
+            n2 = vgraph.entity(way.nodes[0]);
+        }
+
+        var toLoc = geoVecInterp(n1.loc, n2.loc, 10);  // extend 1000%
+        n2 = n2.move(toLoc);
+        vgraph = vgraph.replace(n2);
+    });
+
+
+
     // OK!  Here is our intersection..
     var intersection = {
         graph: vgraph,

modules/ui/fields/restrictions.js

@@ -8,7 +8,15 @@ import {
 import { t } from '../../util/locale';
 import { actionRestrictTurn, actionUnrestrictTurn } from '../../actions';
 import { behaviorBreathe, behaviorHover } from '../../behavior';
-import { geoExtent, geoRawMercator } from '../../geo';
+
+import {
+    geoExtent,
+    geoRawMercator,
+    geoVecScale,
+    geoVecSubtract,
+    geoZoomToScale
+} from '../../geo';
+
 import { osmIntersection, osmInferRestriction, osmTurn, osmWay } from '../../osm';
 import { svgLabels, svgLayers, svgLines, svgTurns, svgVertices } from '../../svg';
 import { utilRebind } from '../../util/rebind';
@@ -64,20 +72,19 @@ export function uiFieldRestrictions(field, context) {
         var projection = geoRawMercator();
 
         var d = utilGetDimensions(wrap.merge(enter));
-        var c = [d[0] / 2, d[1] / 2];
-        var z = intersection.vertices.length === 1 ? 22 : 20;
+        var c = geoVecScale(d, 0.5);
+        var z = intersection.vertices.length === 1 ? 22 : 19.5;
 
-        projection
-            .scale(256 * Math.pow(2, z) / (2 * Math.PI));
+        projection.scale(geoZoomToScale(z));
 
         // fit extent to include all key vertices
         for (var i = 0; i < intersection.vertices.length; i++) {
             extent._extend(intersection.vertices[i].extent());
         }
-        var s = projection(extent.center());
+        var center = projection(extent.center());
 
         projection
-            .translate([c[0] - s[0], c[1] - s[1]])
+            .translate(geoVecSubtract(c, center))
             .clipExtent([[0, 0], d]);
 
         var drawLayers = svgLayers(projection, context).only('osm').dimensions(d);