TurfJS transformRotate

by kzima

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>
<input id="angle" type="range" min="1" max="360" step="1" value="1">
<div id="map" class="map"></div>

CSS

html,
body {
  height: 100%;
  width: 100%;
  position: fixed;
  padding: 0;
  margin: 0;
  border: 0;
}

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

JavaScript

let map = L.map('map', {
    center: [53, 0],
    zoom: 6,
    renderer: L.canvas()
});

L.tileLayer('https://cartodb-basemaps-{s}.global.ssl.fastly.net/light_nolabels/{z}/{x}/{y}.png').addTo(map);
let layer;
const draw = (angle) => {
	console.log(angle)
  layer = L.geoJson(
  turf.transformRotate(
  turf.circle([0, 53], 100, {steps: 8, units: 'kilometers'}),
  Number(angle)
  ))
  layer.addTo(map);
}
draw(1);

const angleInput = document.getElementById("angle");
angleInput.addEventListener("change", (e) => {
	layer.remove();
	draw(e.target.value);
});