Display line in Mapbox GL from search result to nearest point on feature - mapbox-gl-js

Question

I'd like to draw a line between two points: geocoder search result and nearest point on a featurecollection of points.
My geocoder search is working correctly and I can find the nearest point in my feature collection using turf.nearestPoint. I have tried to modify several different examples but
I cannot create a linestring from the two points and add it to the map.
My code:
https://jsfiddle.net/aventre/oxmkfh42/15/
`
<style>
#menu {
position: absolute;
background: #efefef;
padding: 10px;
font-family: 'Open Sans', sans-serif;
}
#info {
display: block;
position: relative;
margin: 0px auto;
width: 50%;
padding: 10px;
border: none;
border-radius: 3px;
font-size: 12px;
text-align: center;
color: #222;
background: #fff;
}
</style>
<pre id="info"></pre>
<div id='map' style='width: 100%; height: 700px;'></div>
<div id="menu">
<input id="cl8lwwv48002h14qidkgt1twz" type="radio" name="rtoggle" value="Map" checked="checked">
<label for="cl8lwwv48002h14qidkgt1twz">Map</label>
<input id="cl8m1m04n001l14o6gv40ynbf" type="radio" name="rtoggle" value="Sat">
<label for="cl8m1m04n001l14o6gv40ynbf">Satellite</label>
</div>
<script>
mapboxgl.accessToken = 'pk.eyJ1IjoiYXZlbnRyZSIsImEiOiJjazcwdTN1czkwMDY1M2xwc2Z1dDIxaWgwIn0.2a7GUY9_JPNpp4c0jDaMAA';
var map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/aventre/cl8lwwv48002h14qidkgt1twz', // stylesheet location
center: [-78.66839943, 38.39604638], // starting position [lng, lat]
zoom: 13.5 // starting zoom
});
const fence = {
"type": "FeatureCollection",
"name": "NectarFencePoints",
"features": [{
"type": "Feature",
"properties": {
"distance": 0.0,
"angle": 245.64902626829135
},
"geometry": {
"type": "Point",
"coordinates": [-78.666611972264633, 38.394739637005529, 0.0]
}
},
{
"type": "Feature",
"properties": {
"distance": 25.0,
"angle": 245.64902626829135
},
"geometry": {
"type": "Point",
"coordinates": [-78.666691366204603, 38.394711225055076, 0.0]
}
},
{
"type": "Feature",
"properties": {
"distance": 50.0,
"angle": 271.26325988216735
},
"geometry": {
"type": "Point",
"coordinates": [-78.666778146733265, 38.394711020361669, 0.0]
}
}
]
};
var layerList = document.getElementById('menu');
var inputs = layerList.getElementsByTagName('input');
map.addControl(new mapboxgl.FullscreenControl());
function switchLayer(layer) {
var layerId = layer.target.id;
map.setStyle('mapbox://styles/aventre/' + layerId);
}
for (var i = 0; i < inputs.length; i++) {
inputs[i].onclick = switchLayer;
}
map.on('click', function(e) {
var features = map.queryRenderedFeatures(e.point, {
layers: ['loblolly-labels'] // replace this with the name of the layer
});
if (!features.length) {
return;
}
var feature = features[0];
var popup = new mapboxgl.Popup({
offset: [25, 25]
})
.setLngLat(feature.geometry.coordinates)
.setHTML('<h4>' + feature.properties.title + '</h4><p>' + feature.properties.description + '</p>')
.addTo(map);
});
map.on('mouseenter', 'loblolly-labels', function(e) {
// Change the cursor style as a UI indicator.
map.getCanvas().style.cursor = 'pointer';
var coordinates = e.features[0].geometry.coordinates.slice();
var description = e.features[0].properties.description;
// Ensure that if the map is zoomed out such that multiple
// copies of the feature are visible, the popup appears
// over the copy being pointed to.
while (Math.abs(e.lngLat.lng - coordinates[0]) > 180) {
coordinates[0] += e.lngLat.lng > coordinates[0] ? 360 : -360;
}
// Populate the popup and set its coordinates
// based on the feature found.
popup.setLngLat(coordinates).setHTML(description).addTo(map);
});
map.on('mouseleave', 'loblolly-labels', function() {
map.getCanvas().style.cursor = '';
popup.remove();
});
var geocoder = new MapboxGeocoder({
accessToken: mapboxgl.accessToken,
mapboxgl: mapboxgl
});
map.addControl(geocoder, 'top-left');
geocoder.on('result', (event) => {
/* Get the coordinate of the search result */
const searchResult = event.result.geometry;
const nearest = turf.nearestPoint(searchResult, fence)
const marker = new mapboxgl.Marker()
.setLngLat(nearest.geometry.coordinates)
.addTo(map);
map.addLayer({
'id': 'route',
'type': 'line',
'source': {
'type': 'geojson',
'data': {
'type': 'Feature',
'properties': {},
'geometry': {
'type': 'LineString',
'coordinates': [
[nearest.lng, nearest.lat],
[searchResult.lng, searchResult.lat]
]
}
},
'layout': {
'line-join': 'round',
'line-cap': 'round'
},
'paint': {
'line-color': '#888',
'line-width': 8
}
}
});
});
</script>
`