Turf playground
Turf.js sandbox for testing functions
by Chris Bao
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.076744], 12);
L.tileLayer('https://stamen-tiles.a.ssl.fastly.net/toner-lite/{z}/{x}/{y}.png', {
attribution: '© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);
// add a marker to the map
var station = turf.point([-71.076744, 42.40466]);
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, {
style: {
color: 'red',
weight: 4
}
}).addTo(map);
var line = turf.lineString([
[
-71.076744,
42.40466
],
[
-71.07573,
42.404644
],
[
-71.07502,
42.40466
]
]);
var options = {units: 'miles'};
var along = turf.along(line, 0.01, options);
console.log('along', along)
L.geoJson(along).addTo(map);
// var point1 = turf.point([-75.043, 39.984]);
// var point2 = turf.point([-75.934, 39.984]);
// L.geoJson(point1).addTo(map);
// L.geoJson(point2).addTo(map);
// var bearing = turf.bearing(point1, point2);
// console.log('bearing', bearing)
var segments = turf.lineSegment(lineString);
console.log('segments', segments)
L.geoJson(segments, {
style: {
color: 'green',
weight: 4
}
}).addTo(map)
var pt = turf.point([0, 0]);
var line = turf.lineString([[-1, -1],[1, 1],[1.5, 2.2]]);
var isPointOnLine = turf.booleanPointOnLine(pt, line);
console.log(11111, pt, line, isPointOnLine)