JSFiddle - React, Tailwind, and code Playground

by Stefano

HTML

<script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css">
<script src="https://cdn.jsdelivr.net/npm/@turf/turf@5/turf.min.js"></script>
<div id="map"></div>

CSS

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;
}

#map {
  width: 100%;
  height: 100%;
}

JavaScript

var center = [
 55.837150763618574,
  37.48126387596131,
  // 55.837150763618574,
];

var zoom = 17;

var layers = [
  L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png')
];

var options = {
	center,
  zoom,
  layers,
};

var map = L.map('map', options);

var radius = 70;

var leafletCircle = L.circle(center, radius).addTo(map);

var turfCircleOptions = {
  steps: 32,
  units: 'kilometers',
};
                        
var turfCircle = turf.circle([center[1], center[0]], radius / 1000, turfCircleOptions);

L.geoJSON(turfCircle).addTo(map);


/* var inverted = turfCircle.geometry.coordinates[0].map(function(coord) {
  return [coord[1], coord[0]];
});
turfCircle.geometry.coordinates[0] = inverted;
console.log(JSON.stringify(turfCircle))

L.geoJSON(turfCircle).addTo(map);
 */