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/[email protected]/dist/leaflet.css" />
<script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
<link rel="stylesheet" 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>
asked Dec 5, 2017 at 18:37
2 Answers 2
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/[email protected]/dist/leaflet.css" />
<script src="https://unpkg.com/[email protected]/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: '© <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>
answered Dec 5, 2017 at 20:12
As I recall the buffer arguments are quite touchy. I would look at your syntax, is it miles or Miles? is it units or Units?
That was a bug I had a while ago and turned out to be my issue, consult the SDK and look at how the buffer arguments are laid out there.
John
lang-js