I'm trying to draw a polygon in an area in Brazil, but it's drawing in the sea, how do I reverse these coordinates? I'm trying to draw a polygon in an area in Brazil, but it's drawing in the sea, how do I reverse these coordinates? Follow the code above, I'm using an arrayn of coordinates, but I will soon mock this data.

import { LatLngExpression } from "leaflet";
import { MapContainer, Marker, Polygon, Popup, TileLayer } from "react-leaflet";
import "./App.css";

const App: React.FC = () => {
  const purpleOptions = { color: "purple" };

  const polygon: LatLngExpression[] = [
    [-59.019286, -17.461451],
    [-52.197749, -17.461451],
    [-52.197749, -12.684053],
    [-59.019286, -12.684053],
  ];


  return (
    <MapContainer
      center={[-54.125496427, -15.289267763]}
      zoom={3}
      scrollWheelZoom={true}
    >
      <TileLayer
        attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
        url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
      />
      <Marker position={[-54.125496427, -15.289267763]}>
        <Popup>
          A pretty CSS3 popup. <br /> Easily customizable.
        </Popup>
      </Marker>
      <Polygon pathOptions={purpleOptions} positions={polygon} />
    </MapContainer>
  );
};

export default App;

ReactLeaflet

CodePudding user response：

With this you can reverse your coordinates:

 polygon.map((item)=>{
    item.reverse()
 })