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>
<h2>Input:</h2>
<div id="input"></div>
<h2>Result:</h2>
<div id="result"></div>
<a id="link" target="_blank" href>geojson.io</a>

CSS

#input,
#result {
  height: 250px;
  width: 500px;
}

JavaScript

var inputMap = L.map("input").setView([0, 0], 5);
var resultMap = L.map("result").setView([0, 0], 5);


L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
  attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
}).addTo(inputMap);

L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
  attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
}).addTo(resultMap);

var geoJson = {
  "type": "FeatureCollection",
  "features": [
    {
      "type": "Feature",
      "properties": {
        "stroke": "#0F0",
        "fill": "#0F0",
        "stroke-width": 25
      },
      "geometry": {
        "type": "LineString",
        "coordinates": [
          [120, -25],
          [150, -25]
        ]
      }
    },
    {
      "type": "Feature",
      "properties": {
        "stroke": "#F00",
        "fill": "#F00",
        "stroke-width": 10,
        "stroke-opacity": 1,
        "fill-opacity": 0.1
      },
      "geometry": {
        "type": "LineString",
        "coordinates": [
          [120, -25],
          [160, -25]
        ]
      }
    },
    {
      "type": "Feature",
      "properties": {
        "stroke": "#00F",
        "fill": "#00F",
        "stroke-width": 3,
        "stroke-opacity": 1,
        "fill-opacity": 0.1
      },
      "geometry": {
        "type": "LineString",
        "coordinates": [
          [110, -25],
          [150, -25]
        ]
      }
    }
  ]
};

var inputLayer = L.geoJson(geoJson).addTo(inputMap);
inputMap.fitBounds(inputLayer.getBounds());

var result = turf.lineOverlap(geoJson.features[1], geoJson.features[2]);


var resultLayer = L.geoJson(result).addTo(resultMap);
resultMap.fitBounds(inputLayer.getBounds());


console.log(result);

var geoJsonIoLink = "http://geojson.io/#data=data:application/json," + encodeURIComponent(JSON.stringify(geoJson));

document.getElementById("link").href = geoJsonIoLink;
console.log(geoJsonIoLink);