JSFiddle - React, Tailwind, and code Playground

by kzima

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.4.0/leaflet.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.4.0/leaflet.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/Turf.js/5.1.5/turf.min.js"></script>
<div id="map"></div>
<input
  id="angle"
  type="range"
  min={0}
  max={180}
  step="1"
/>

CSS

#map {
    height: 400px;
    width: 600px;
}

JavaScript

var map = L.map('map').setView([-31.922933, 115.876763], 21);
var osm = L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',  { maxNativeZoom: 19,
    maxZoom: 23}).addTo(map);
var poly = L.geoJSON(turf.flip(turf.polygon([[
          [-31.9229, 115.8767],
          [-31.9229, 115.8768],
          [-31.922987, 115.8768],
          [-31.922987, 115.8767],
          [-31.9229, 115.8767]
]]))).addTo(map);

console.log(poly);

var center = poly.getBounds().getCenter();
var marker = L.marker({lat: center.lat, lng: center.lng}, {draggable: true}).addTo(map);

const angle = document.getElementById("angle");
angle.addEventListener("change", (e) => {
	const geoJson = poly.toGeoJSON();
  poly.remove();
  poly = L.geoJSON(
      turf.transformRotate(geoJson, Number(e.target.value)),
      {
        id: "structure",
        width: 0.1,
        color: "grey"
      }).addTo(map);
  console.log(poly)
})

const getOffsets = () => {
  center = poly.getBounds().getCenter();
  var points = poly.getLatLngs();
  console.log("center", center, points);
  return points.map(list => 
  	 list.map(point => [point.lat - center.lat, point.lng - center.lng]
  ))
 /*  for (var i = 0; i < points.length; i++)  {
      var point = [];
      point.push(points[i].lat - center.lat);
      point.push(points[i].lng - center.lng);
      offsets.push(point);
      console.log(points[i], center.lng);
  }
   */
  console.log(offsets);
  return offsets;
}

const setPosition = (position) => {
    const offsets = getOffsets();
    var newpoints = [];
    newpoints = offsets.map(list => 
  	 list.map(point => [position.lat + point[0], position.lng + point[1]]
  	))
    /* for (var i = 0; i < offsets.length; i++)  {
        var point = [];
        point.push(position.lat + offsets[i][0]);
        point.push(position.lng + offsets[i][1]);
        newpoints.push(point);
    } */
    poly.remove();
    // console.log(offsets, newpoints);
    poly = L.polygon(newpoints).addTo(map);
}
marker.on("drag",...