0

I'm looking forward to buffering an object drawed with Leaflet Draw , and with a custom width in kilometers in a div.

 First Name: <input type="text" id="myText" value="100"> <button
 onclick="setbufferarea(this)">Try it</button>

I can't see a result:

  function setbufferarea(a){

 var buffer = a.value;
 var buffered = turf.buffer(drawnItems, buffer,{units: 'kilometers'});
  
        L.geoJson(buffered).addTo(map);
             drawnItems.addLayer(layer);

}

whereas this worked, but launched immediately and without the possibility to change the buffer width :

 var buffera = turf.buffer(layer.toGeoJSON(), buffer, 'kilometers');
 L.geoJson(buffera).addTo(map);
  drawnItems.addLayer(layer);
});

this is my page:

enter link description here

the drawnItems (var drawnItems = new L.GeoJSON(); ) on line 195 seems to be all user drawings in LeafletDraw,

whereas layer in line 257 ( var layer = e.layer; ) seems to be something similar about created features, though I can't tell the difference .

edit : this formula has success

<div class="jaune"> Buffer value: <input type="text" id="number" value="100">
<button onclick="myFunction()">Try it</button>
<p id="demo"></p> </div>

<div id="map"></div>

<script>
 var x, myFunction, data, buffered;

function myFunction() {
  var x = document.getElementById("number").value;
    var xdiv = x/100;
  var data = drawnItems.toGeoJSON();
  var buffered = turf.buffer(data, xdiv,{units: 'kilometers'});
  L.geoJson(buffered).addTo(map);
 }
  //   document.getElementById('number').onchange = myFunction();
6
  • Check you code again. On the dev console there is an error about initialising your map twice; once at 150 and again at 750, just before you use it in some operations for your code example above. Correct it and maybe the problem will resolve or get rid of some side effects making the issue easier to diagnose. – RomaH Jul 15 at 17:30
  • What is drawnItems in the non working example and what is layer in the second example that worked? – TomazicM Jul 15 at 18:15
  • @RomaH, thank you, I've taken away a lot of things (though not the initial calls for JS), and yes you are right, the 750 was unecessary . it is now vdlibraries.fr/test – Vincent Dc Jul 15 at 18:25
  • @TomazicM the drawnItems (var drawnItems = new L.GeoJSON(); ) on line 195 seems to be all user drawings in LeafletDraw, whereas layer in line 257 ( var layer = e.layer; ) seems to be something similar about created features, though I can't tell the difference . Updated link : vdlibraries.fr/test – Vincent Dc Jul 15 at 18:37
  • 1
    Please, don't put additional info in the comments, but rather edit you question and put it there. – TomazicM Jul 15 at 18:47
2

drawnItems is a Leaflet layer, so you cannot use it directly with turf.buffer function, which expects GeoJSON feature object as input.

You have to convert drawnItems layer to GeoJSON object with .toGeoJSON method, like it's done in your working example:

var buffered = turf.buffer(drawnItems.toGeoJSON(), buffer, {units: 'kilometers'});
5
  • Agreed. The resulting object also contains no features, the drawnItems object is loaded with a layer in a callback that never gets triggered. When it goes to buffer call it contains no data so it will still throw an error. – RomaH Jul 15 at 20:09
  • @TomazicM thanks, I tried to edit my main post to create a function with that, but my function is not working. – Vincent Dc Jul 16 at 10:23
  • @TomazicM I'm successful now. vdlibraries.fr/test . now i'll be trying to give the possibility to download that buffer and/or put it in the background, because I will need to interact with the points I may draw in the buffer. I'll check with my extensions. This page has it : codepen.io/gislayer/embed/… – Vincent Dc Jul 16 at 11:00
  • @TomazicM OK. Now that it is done, I recall I had to change the Leaflet view to EPSG:4326 to be able to do that. Because otherwise , the shape would have been incorrect. When I do a buffer, it looks like an egg in the Leaflet default projection (which is more better). Do you now why, or shall I open another question? – Vincent Dc Jul 16 at 15:36
  • GIS SE site has policy of one question per question. If you have additional question, please post it as a separate question. – TomazicM Jul 16 at 15:44

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.