Active Turning calculation + UI start

[gregallensworth]

New concept of giving turn-by-turn in realtime per issue #37 Internally I'm calling this "ActiveTurning"

• LeafletMap now has locate() and locationfound handlers. Finds the nearest segment in your route, gets info about the transition point at the end of that segment.
• UI exists to show the next transition: the icon/code, the wording, the name, and the name of your current location.
• If the distance between oneself and the nearest is > 0.25 miles then you are "off route" and the message text changes slightly.

Still to do:

• The ActiveTurningReadout component UI is just a placeholder, and will likely have some mobile behaviors, will look better, will choose an icon instead of showing the transition code, etc.
• The distance given is from one transition to the next (you are on Willard Rd, which goes 2.0 mi to Curtiss Rd) and not your own distance to that transition (that right on Curtiss Rd is in 0.3 miles, 0.2 miles, 0.1 miles...)

[gregallensworth]

After an hour, I have the following:

that closestLayerSnap() is returning a new L.Polyline object, instead of the matching object in the L.geoJson dataset this.searchRoute This was not the behavior until I did a git pull here: I ran a few routes just fine before I remembered your note that you had made a modification. Maybe this is some version change in L.GeometryUtil via unpkg instead of via npm, despite the version numbers allegedly being the same...

I do see that the yarn/npm version of leaflet-geometryutil brings in Leaflet 1.0.0 while the website uses 0.7.3 (cartodb.js) This may be the source of the problem here.

[gregallensworth]

Tracked it down further:

Under Leaflet 0.7.3 each L.Polyline instance within the L.geoJson structure, is in fact a L.LayerGroup and not a L.Path (searchRoute.getLayers()[2] instanceof L.LayerGroup is true). In this condition, thenhandling and return are completely different: it returns simply the subResult This being a L.LayerGroup (under 0.7 but not under 1.0) the .layer attribute is indeed to the parent L.geoJson structure and not to the specific sub-layer.

https://github.com/makinacorpus/Leaflet.GeometryUtil/blob/master/src/leaflet.geometryutil.js#L281

[clhenrick]

thanks @gregallensworth for catching that I'll take another look. We have to use the unkpg CDN because as you mentioned, Carto is already pulling in Leaflet.JS, Leaflet Geom Utils requires Leaflet when installing via NPM, so we definitely don't want two different versions of Leaflet pulled into the app!

[gregallensworth]

As of 0417bc4 there is no longer a dependency on L.GeometryUtil which doesn't work properly in Leaflet 0.7 I rewrote the geometry calculations to emulate the same effect, though, so nobody will notice...

[clhenrick]

Thanks @gregallensworth, I'll finish up the work to integrate this feature into the app. Appreciate the help!