Turf Point On Line visualization

Short demo to better understand the algorithm

by andi_lo

HTML

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

CSS

#map {
  height: 500px;
}

JavaScript

var map = L.map("map").setView([42.40466, -71.07502], 18);

L.tileLayer('https://stamen-tiles.a.ssl.fastly.net/toner-lite/{z}/{x}/{y}.png', {
  attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);

function pol(line, pt, units) {
    var distance = turf.distance;
    var bearing = turf.bearing;
    var destination = turf.destination;
    var lineIntersects = turf.lineIntersect;
    var point = turf.point;
    var lineString = turf.lineString;

    var coords;
    if (line.type === 'Feature') {
        coords = line.geometry.coordinates;
    } else if (line.type === 'LineString') {
        coords = line.coordinates;
    } else {
        throw new Error('input must be a LineString Feature or Geometry');
    }

    var closestPt = point([Infinity, Infinity], {
        dist: Infinity
    });
    var length = 0.0;
    for (var i = 0; i < coords.length - 1; i++) {
        var start = point(coords[i]);
        var stop = point(coords[i + 1]);
        //start
        start.properties.dist = distance(pt, start, units);
        //stop
        stop.properties.dist = distance(pt, stop, units);
        // sectionLength
        var sectionLength = distance(start, stop, units);
        //perpendicular
        var heightDistance = Math.max(start.properties.dist, stop.properties.dist);
        var direction = bearing(start, stop);
        var perpendicularPt1 = destination(pt, heightDistance, direction + 90, units);
        var perpendicularPt2 = destination(pt, heightDistance, direction - 90, units);
        var line1 = lineString([perpendicularPt1.geometry.coordinates, perpendicularPt2.geometry.coordinates]);
        var line2 = lineString([start.geometry.coordinates, stop.geometry.coordinates]);
        
        L.geoJson(line1).addTo(map);
        L.geoJson(line2).addTo(map);
        L.geoJson(perpendicularPt1).addTo(map); 
        L.geoJson(perpendicularPt2).addTo(map);
        
        var intersect =...