[GIS] turf.js Invalid unit error for buffer

bufferleafletturf

I have 2 geojson feature collections in leaflet. One of them is road and the other one is parcels. I want to calculate buffer for road and then intersect this buffer layer with parcels. But when I call buffer function I get an error

Uncaught Error: Invalid unit
at Object.module.exports.distanceToDegrees (turf.js:4191)
at Object.module.exports [as buffer] (turf.js:652)
at index.html?_ijt=k268ek1sbmjfm477kedi24a5t1:5770

Why I get this error? Here is my code example:`

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" 
href="https://unpkg.com/leaflet@1.2.0/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet@1.2.0/dist/leaflet.js"></script>
<link rel="stylesheet" href="map.css"/>
<script src="turf.js"></script>

</head>
<body>
<div id="map"></div>
<script>
    var mymap = L.map('map').setView([39.91, 33.22], 13);
L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?
access_token={accessToken}', {
    attribution: 'Map data &copy; <a 
    href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a 
    href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, 
    Imagery © <a href="http://mapbox.com">Mapbox</a>',
      maxZoom: 18,
    id: 'mapbox.streets',
    accessToken: 'pk.eyJ'
}).addTo(mymap);

var polygon =
    {
        "type": "FeatureCollection",
        "features": [
            {
                "type": "Feature",
                "properties": {},
                "geometry": {
                    "type": "Polygon",
                    "coordinates": [
                        [
                            [
                                33.23123550240566,
                                39.92248701096464
                            ],
                            [
                                33.23151584974473,
                                39.92228723799442
                            ],
            {
                "type": "Feature",
                "properties": {},
                "geometry": {
                    "type": "Polygon",
                    "coordinates": [
                        [
                            [
                                33.2296955135001,
                                39.92243952105167
                            ],
                            [
                                33.22980597686984,
                                39.9222961545936
                            ],
                            [
                                33.22960217368549,
                                39.92221433149345
                            ],
                            [
                                33.22945999098032,
                                39.92240277126455
                            ],
                            [
                                33.2296955135001,
                                39.92243952105167
                            ]
                        ]
                    ]
                }
            }
        ]
    };

var yol = {
    "type": "FeatureCollection",
    "features": [
        {
            "type": "Feature",
            "properties": {
                "genislik": 15
            },
            "geometry": {
                "type": "LineString",
                "coordinates": [
                    [
                        33.22827061810361,
                        39.92200712989473,
                        0
                    ],
                    [
                        33.22920897604138,
                        39.92233180296282,
                        0
                    ],
                    [
                        33.22925402572984,
                        39.92236863779404,
                        0
                    ],
                    [
                        33.22925902094296,
                        39.92237272212017,
                        0
                    ],
                    [
                        33.22926554254664,
                        39.92237522415669,
                        0
                    ],
                    [
                        33.22934401377863,
                        39.92240532988885,
                        0
                    ],
                    [
                        33.22934647847844,
                        39.92240627547782,
                        0
                    ],
                    [
                        33.22934908578173,
                        39.92240695772085,
                        0
                    ],
                    [
                        33.22944685171404,
                        39.92243253965818,
                        0
                    ],
                    [
                        33.22944932273592,
                        39.92243318623591,
                        0
                    ],
                    [
                        33.22945188052285,
                        39.92243358534281,
                        0
                    ],
                    [
                        33.22968740314052,
                        39.92247033515363,
                        0
                    ],
                    [
                        33.22968761028939,
                        39.92247036747636,
                        0
                    ],
                    [
                        33.22968781779083,
                        39.92247039813497,
                        0
                    ],
                    [
                        33.22995087874534,
                        39.92250926630633,
                        0
                    ],
                    [
                        33.23006816495725,
                        39.92256131877027,
                        0
                    ],
                    [
                        33.23007433094973,
                        39.92256405527694,
                        0
                    ],
                    [
                        33.2300813357521,
                        39.92256502434198,
                        0
                    ],
                    [
                        33.23024435272136,
                        39.92258757645419,
                        0
                    ]
                ]
            }
        },
        {
            "type": "Feature",
            "properties": {
                "genislik": 10
            },
            "geometry": {
                "type": "LineString",
                "coordinates": [
                    [
                        33.23052389963255,
                        39.92177381611527,
                        0
                    ],
                    [
                        33.23041471795035,
                        39.92179202011496,
                        0
                    ],
                    [
                        33.23040305114993,
                        39.9217939653304,
                        0
                    ],
                    [
                        33.23039428417722,
                        39.92180020328973,
                        0
                    ],
                    [
                        33.22990544410934,
                        39.92214802439388,
                        0
                    ],
                    [
                        33.23039428417722,
                        39.92180020328973,
                        0
                    ],
                    [
                        33.23040305114993,
                        39.9217939653304,
                        0
                    ],
                    [
                        33.23041471795035,
                        39.92179202011496,
                        0
                    ],
                    [
                        33.23052389963255,
                        39.92177381611527,
                        0
                    ],
                    [
                        33.23052439559967,
                        39.92177373342375,
                        0
                    ],
                    [
                        33.23052489360271,
                        39.92177365965575,
                        0
                    ],
                    [
                        33.23068739667774,
                        39.92174958800472,
                        0
                    ],
                    [
                        33.23089840730089,
                        39.92171710380469,
                        0
                    ],
                    [
                        33.23100629361299,
                        39.92167123450347,
                        0
                    ]
                ]
            }
        },
        {
            "type": "Feature",
            "properties": {
                "genislik": 15
            },
            "geometry": {
                "type": "LineString",
                "coordinates": [
                    [
                        33.2292425071561,
                        39.92113004776218,
                        0
                    ],
                    [
                        33.229473546304,
                        39.92133376987435,
                        0
                    ],
                    [
                        33.22950227387721,
                        39.92138603150682,
                        0
                    ],
                    [
                        33.22960053796574,
                        39.92157730010621,
                        0
                    ],
                    [
                        33.22965706684388,
                        39.92175869708733,
                        0
                    ],
                    [
                        33.22970824225857,
                        39.92193301273533,
                        0
                    ],
                    [
                        33.22974032375962,
                        39.92199270354748,
                        0
                    ],
                    [
                        33.22978752905556,
                        39.92205207615689,
                        0
                    ],
                    [
                        33.22983673278315,
                        39.92210059742482,
                        0
                    ],
                    [
                        33.22990544410934,
                        39.92214802439388,
                        0
                    ],
                    [
                        33.23003228674187,
                        39.92224919395576,
                        0
                    ],
                    [
                        33.23012431533797,
                        39.92230792049544,
                        0
                    ],
                    [
                        33.23021705388681,
                        39.92235584040844,
                        0
                    ],
                    [
                        33.23029337496003,
                        39.92238853644901,
                        0
                    ],
                    [
                        33.23039243416922,
                        39.92242594245815,
                        0
                    ],
                    [
                        33.2304371756197,
                        39.92245401139586,
                        0
                    ],
                    [
                        33.23047032061119,
                        39.92249271442368,
                        0
                    ]
                ]
            }
        }
    ]
};



var myStyle = {
    "color": "#ff7800",
    "weight": 5,
    "opacity": 0.65
};
var myStyle2 = {
    "color": "#483D8B",
    "weight": 5,
    "opacity": 0.65
};
L.geoJSON(polygon, {
    style: myStyle
}).addTo(mymap);

L.geoJSON(yol, {
    style: myStyle2
}).addTo(mymap);




var buffered = turf.buffer(yol, yol.genislik, {units: 'miles'});
var yolbuf = L.polygon(buffered, {style:myStyle}).addTo(mymap);



 </script>

 </body>
 </html>

Best Answer

I found errors with your GeoJSON, so I used something similar, use http://geojsonlint.com/ to check your data. This example below will work.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>

<link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.1/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet@1.0.1/dist/leaflet-src.js"></script>
<script src="https://npmcdn.com/@turf/turf/turf.min.js"></script>
<!-- <script src="turf.js"></script>  -->

    <style>
        #map {
            width: 800px;
            height: 600px;
        }
    </style>

</head>
<body>
<div id="map"></div>
<script>
    var mymap = L.map('map').setView([33.22, 39.91 ], 9);   

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


var yol = {
  "type": "FeatureCollection",
  "features": [
    {
      "type": "Feature",
      "properties": {},
      "geometry": {
        "type": "LineString",
        "coordinates": [
          [
            39.298095703125,
            33.175491001010634
          ],
          [
            39.376373291015625,
            33.15019961880554
          ],
          [
            39.43817138671875,
            33.109948297894285
          ],
          [
            39.505462646484375,
            33.075432481213326
          ],
          [
            39.5562744140625,
            33.04320549616557
          ],
          [
            39.579620361328125,
            33.02363335727839
          ]
        ]
      }
    }
  ]
}


var myStyle = {
    "color": "green",
    "weight": 5,
    "opacity": 0.65
};
var myStyle2 = {
    "color": "#483D8B",
    "weight": 5,
    "opacity": 0.65
};


var road = new L.GeoJSON(yol, {style:myStyle});
road.addTo(mymap);

var buffered = turf.buffer(road.toGeoJSON(), 2, {units: 'miles'});

var yolbuf = new L.GeoJSON(buffered, {style:myStyle2});
yolbuf.addTo(mymap);

 </script>
 </body>
 </html>