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 '21 at 17:30
  • What is drawnItems in the non working example and what is layer in the second example that worked?
    – TomazicM
    Jul 15 '21 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 '21 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 '21 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 '21 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 '21 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 '21 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 '21 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 '21 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 '21 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.