Turf playground

Turf.js sandbox for testing functions

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.24527777890384, -70.86830735206604], 12);

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);

// add a marker to the map
var station = turf.point([-70.86830735206604, 42.24527777890384]);
var lineString = {
  "type": "FeatureCollection",
  "features": [
    {
      "type": "Feature",
      "geometry": {
        "type": "LineString",
        "coordinates": [
          [
            -71.076744,
            42.40466
          ],
          [
            -71.07573,
            42.404644
          ],
          [
            -71.07502,
            42.40466
          ]
        ]
      },
      "properties": {}
    }
  ]
};
L.geoJson(station).addTo(map);
L.geoJson(lineString).addTo(map);

console.log(lineString.features[0]);
debugger
var onLine = turf.pointOnLine(lineString.features[0], station, {a:'kilometers'});
console.log(onLine.properties);

//L.geoJson(onLine).addTo(map);