Using Turf with Leaflet

I've made a leaflet map and was trying to implement turf. As a quick test, I just wanted to put a buffer around one of my markers. But somehow I can still only see the two markers on my map. I basically followed the steps from this document. https://lib.dr.iastate.edu/gis_tasksheets/3/ I'm not sure where I made a mistake, I hope someone can tell me.

<!DOCTYPE html>
<html lang="de">
   <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
      <title>Leaflet Map"</title>
      <!-- leaflet.css, leaflet.js, turf.js von externer Quelle einbinden -->
      <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" />   
      <script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script> <!-- Load Leaflet code library-->
      <script src='https://cdnjs.cloudflare.com/ajax/libs/leaflet-omnivore/0.3.4/leaflet-omnivore.min.js'></script>  <!-- Load Omnivore to convert CSV to GeoJSON format -->
      <script src="http://code.jquery.com/jquery-3.5.1.min.js"></script><!-- Load jQuery and PapaParse to read data from a CSV file -->
      <script src="https://cdn.jsdelivr.net/npm/[email protected]/papaparse.min.js"></script>
      <script src='https://unpkg.com/@turf/turf/turf.min.js'></script>
      
      <script>
      var buffered = turf.buffer(point);                                    
      </script>
   </head>
   <body>
      <div id='Karte' style='height: 800px; width: 100%;'></div> 
     
     
    <script type='text/javascript'>
         
        var Karte = L.map('Karte').setView([48.896465, 10.996526], 13);  
         L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
         'attribution':  'Kartendaten &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> Mitwirkende',
         'useCache': true
         }).addTo(Karte);       
        
        
        var marker1 = L.marker([48.896465, 10.996526]).addTo(Karte);    
        var marker2 = L.marker([48.892750, 10.990300]).addTo(Karte);
    
        
        var point = turf.point([48.896465, 10.996526]);              
        var buffered = turf.buffer(point, 50, {units: 'meter'});
        buffer = L.geoJSON(buffered);
        buffer.addTo(Karte); 
        
     </script>
   </body>
</html>

Solution

Turf use geojson and geojson has the coordinate format lnglat, leaflet has latlng.

You have to swap your coords in the turf.point function:

  var point = turf.point([10.996526,48.896465]);

Update

Remove also following:

      <script>
      var buffered = turf.buffer(point);                                    
      </script>

And change meter to meters

 {units: 'meters'}

Demo