JSFiddle - React, Tailwind, and code Playground

by mbahl

HTML

<script src="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.js"></script>
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.css">
<script src="https://api.mapbox.com/mapbox.js/plugins/leaflet-geodesy/v0.1.0/leaflet-geodesy.js"></script>
<script src="https://npmcdn.com/@turf/[email protected]/turf.min.js"></script>
<div id="map"></div>

CSS

#map {
  height: 500px;
}

JavaScript

var line = turf.lineString([
    [-77.031669, 38.878605],
    [-77.029609, 38.881946],
    [-77.020339, 38.884084],
    [-77.025661, 38.885821],
    [-77.021884, 38.889563],
    [-77.019824, 38.892368]
]);

var pt = turf.point([-77.037076, 38.884017]);
var snapped = turf.nearestPointOnLine(line, pt, {units: 'miles'});
var pointSnapped = turf.nearestPointOnLine(line, pt, {units: 'miles'});

document.getElementById("map").innerHTML = JSON.stringify(snapped);