Leaflet Turf – Solving Projection Problems with Turf.Buffer in Leaflet

leafletturf

I'm trying to make a buffer with Leafler, Turf, work out of the drawnItems of Leaflet Draw; but the result isn't right. It's too high but not large enough. Could you help me fix it?

I'm using this button to get the custom buffer value:

<input type="text" id="number" value="15"><button onclick="myFunction()">Disabled buffer</button>

the script that call it is:

var x, myFunction, data, features, buffered, bufferedLayer;
function myFunction() {
var x = document.getElementById("number").value;
var xdiv = x/100;
var data = drawnItems.toGeoJSON();
  var buffered = turf.buffer(data, xdiv,{units: 'kilometers'});
        var bufferedLayer = L.geoJSON(null);
        bufferedLayer.addData(buffered);
            drawnItems.addLayer(bufferedLayer); 
               bufferedLayer.options.crs = L.CRS.EPSG4326;   
        bufferedLayer.addTo(map);
 }

Best Answer

The egg-shaped buffer is a known bug to Turf.min.js on older versions, especially version 2, that I used.

Switched to turf.min.js version 6 and solved the problem.

Related Solutions

Leaflet – Showing WMS with EPSG:3301 Projection

Here is a working code for your problem: http://jsfiddle.net/GFarkas/rkhzfguz/1/

Some explanations on the wrong lines:

var crs = L.CRS.proj4js('EPSG:3301',
 '+proj=lcc +lat_1=59.33333333333334 +lat_2=58 +lat_0=57.51755393055556 +lon_0=24 +x_0=500000 +y_0=6375000 +ellps=GRS80 +towgs84=0,0,0,0,0,0,0 +units=m +no_defs',
new L.Transformation(1, -40500, -1, 7017000)
);

First of all, the correct function name as you can see in the Proj4Leaflet project's manual is L.Proj.CRS. Also, you have to call a new instance of the function (there is a great article about constructors and instances here).

The first two arguments the L.Proj.CRS constructor takes are the projection name and definition. So far so good. However, the third and last argument is an object of options. More clearly, you have to put the option parameters in braces and call them on their respective names (like transformation: new L.Transformation(1, -40500, -1, 7017000)). This calling method with the colon is called KVP (key-value pairs).

The last problem is, that you have to define the resolutions on every zoom level. You have defined 12 zoom levels (3-14), so you have to define 12 resolution or scale values. At zoom level 0, the usual resolution is 8192m, and it halves at every zoom level.

The final code of this part will look like something like this:

var crs = new L.Proj.CRS('EPSG:3301',
 '+proj=lcc +lat_1=59.33333333333334 +lat_2=58 +lat_0=57.51755393055556 +lon_0=24 +x_0=500000 +y_0=6375000 +ellps=GRS80 +towgs84=0,0,0,0,0,0,0 +units=m +no_defs',
{
    resolutions: [
        1024, 512, 256, 128,
        64, 32, 16, 8, 4, 2, 1, 0.5
    ],
    transformation: new L.Transformation(1, -40500, -1, 7017000)
});

The rest of the code is functional, however I have two observations you should consider:

It is easier and less code to set the view of the map individually with map.setView()

Original code:

center: new L.LatLng(58.66, 25.05),
zoom: 2,

map.setView() method:

map.setView([58.66, 25.05], 2);

You shouldn't call a zoom level your layer doesn't have, because it will result in a grey background. So if you don't have other layers in your inventory, then you should call zoom level 3 instead of zoom level 2. Then your map will render normally and you won't be confused if your code is working or not.

[GIS] turf.js intersect problem

Your buffer distance was too small to touch a parcel boundary; This is your code working:

<!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([39.921577, 33.229125 ], 17);  

    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 thePolygon =
    {
        "type": "FeatureCollection",
        "features": [
            {
                "type": "Feature",
                "properties": {},
                "geometry": {
                    "type": "Polygon",
                    "coordinates": [
                        [
                            [
                                33.23123550240566,
                                39.92248701096464
                            ],
                            [
                                33.23151584974473,
                                39.92228723799442
                            ],
                            [
                                33.23143457753136,
                                39.92220902313792
                            ],
                            [
                                33.2313766303031,
                                39.92214733535532
                            ],
                            [
                                33.23102868523483,
                                39.92232101813538
                            ],
                            [
                                33.23123550240566,
                                39.92248701096464
                            ]
                        ]
                    ]
                }
            },
            {
                "type": "Feature",
                "properties": {},
                "geometry": {
                    "type": "Polygon",
                    "coordinates": [
                        [
                            [
                                33.23123550240566,
                                39.92248701096464
                            ],
                            [
                                33.23151584974473,
                                39.92228723799442
                            ],
                            [
                                33.23143457753136,
                                39.92220902313792
                            ],
                            [
                                33.2313766303031,
                                39.92214733535532
                            ],
                            [
                                33.23102868523483,
                                39.92232101813538
                            ],
                            [
                                33.23123550240566,
                                39.92248701096464
                            ]
                        ]
                    ]
                }
            },
            {
                "type": "Feature",
                "properties": {},
                "geometry": {
                    "type": "Polygon",
                    "coordinates": [
                        [
                            [
                                33.23102868523483,
                                39.92232101813538
                            ],
                            [
                                33.2313766303031,
                                39.92214733535532
                            ],
                            [
                                33.23135637097489,
                                39.92212650848449
                            ],
                            [
                                33.23127259690326,
                                39.92202385548821
                            ],
                            [
                                33.23088430660423,
                                39.92220634322857
                            ],
                            [
                                33.23090957419321,
                                39.9222345005147
                            ],
                            [
                                33.23102868523483,
                                39.92232101813538
                            ]
                        ]
                    ]
                }
            },
            {
                "type": "Feature",
                "properties": {},
                "geometry": {
                    "type": "Polygon",
                    "coordinates": [
                        [
                            [
                                33.23102868523483,
                                39.92232101813538
                            ],
                            [
                                33.2313766303031,
                                39.92214733535532
                            ],
                            [
                                33.23135637097489,
                                39.92212650848449
                            ],
                            [
                                33.23127259690326,
                                39.92202385548821
                            ],
                            [
                                33.23088430660423,
                                39.92220634322857
                            ],
                            [
                                33.23090957419321,
                                39.9222345005147
                            ],
                            [
                                33.23102868523483,
                                39.92232101813538
                            ]
                        ]
                    ]
                }
            },
            {
                "type": "Feature",
                "properties": {},
                "geometry": {
                    "type": "Polygon",
                    "coordinates": [
                        [
                            [
                                33.23106496596528,
                                39.92212143765926
                            ],
                            [
                                33.23093691284885,
                                39.92195591156596
                            ],
                            [
                                33.23075984311377,
                                39.92201316928995
                            ],
                            [
                                33.23079351450731,
                                39.92209278466239
                            ],
                            [
                                33.23084284247113,
                                39.92216013703721
                            ],
                            [
                                33.23088430660423,
                                39.92220634322857
                            ],
                            [
                                33.23106496596528,
                                39.92212143765926
                            ]
                        ]
                    ]
                }
            },
            {
                "type": "Feature",
                "properties": {},
                "geometry": {
                    "type": "Polygon",
                    "coordinates": [
                        [
                            [
                                33.23106496596528,
                                39.92212143765926
                            ],
                            [
                                33.23093691284885,
                                39.92195591156596
                            ],
                            [
                                33.23075984311377,
                                39.92201316928995
                            ],
                            [
                                33.23079351450731,
                                39.92209278466239
                            ],
                            [
                                33.23084284247113,
                                39.92216013703721
                            ],
                            [
                                33.23088430660423,
                                39.92220634322857
                            ],
                            [
                                33.23106496596528,
                                39.92212143765926
                            ]
                        ]
                    ]
                }
            },
            {
                "type": "Feature",
                "properties": {},
                "geometry": {
                    "type": "Polygon",
                    "coordinates": [
                        [
                            [
                                33.23127259690326,
                                39.92202385548821
                            ],
                            [
                                33.23122986841128,
                                39.92197283593117
                            ],
                            [
                                33.23116334430379,
                                39.92188269157665
                            ],
                            [
                                33.23095417047043,
                                39.92195033107802
                            ],
                            [
                                33.23093691284885,
                                39.92195591156596
                            ],
                            [
                                33.23106496596528,
                                39.92212143765926
                            ],
                            [
                                33.23127259690326,
                                39.92202385548821
                            ]
                        ]
                    ]
                }
            },
            {
                "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.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
};
var myStyle3 = {
    "color": "#DC143C",
    "weight": 5,
    "opacity": 0.65
};
var myStyle4 = {
    "color": "#00CED1",
    "weight": 5,
    "opacity": 0.65
};
L.geoJSON(thePolygon, {
    style: myStyle
}).addTo(mymap);

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

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

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

var yolbuf = new L.geoJSON(buffered, {style:myStyle3});
yolbuf.addTo(mymap);   /// Will be poly segments if road is segments

var dissolved = turf.dissolve(buffered);  //Makes buffer all one poly
var yolbuf2 = new L.geoJSON(dissolved, {color:"orange"}).addTo(mymap);

var parcels = new L.geoJSON(thePolygon, {color:'red'});
parcels.addTo(mymap);

var parseller = thePolygon.features; 
intersections = [];
polysthatIntersected = [];

for (var i = 0; i < parseller.length; i++ ){
            var thePoly = parseller[i];
            var temp1 = turf.polygon(thePoly.geometry.coordinates);
            var temp2 = turf.polygon(buffered.features[0].geometry.coordinates);  

    var intersection = turf.intersect(temp1, temp2);
    if (intersection != null){
        //only area of overlap
        intersections.push(intersection);
        // Complete poly of the parcel touching buffer
        polysthatIntersected.push(thePoly);
    }
}
// Only intersection
var theIntersection = new L.geoJSON(intersections, {color:'black'}).addTo(mymap);
//only parcel intersected by buffer
var theInterPolys = new L.geoJSON(polysthatIntersected, {color:'green'}).addTo(mymap);

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

Best Answer

Related Solutions

Leaflet – Showing WMS with EPSG:3301 Projection

[GIS] turf.js intersect problem

Related Question