Leaflet 1.5.1 | TurfJS transformRotate

by Dennis Bauszus

HTML

<script src="https://cdn.jsdelivr.net/npm/@turf/turf@5/turf.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css">
<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

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

L.tileLayer('https://cartodb-basemaps-{s}.global.ssl.fastly.net/light_nolabels/{z}/{x}/{y}.png').addTo(map);

L.geoJson(turf.circle([0, 53], 100, {
  steps: 8,
  units: 'kilometers'
})).addTo(map);

L.geoJson(
  turf.transformRotate(
    turf.circle([0, 53], 100, {
      steps: 8,
      units: 'kilometers'
    }),
    22.5, {
      pivot: [0, 53]
    }
  )).addTo(map);