I want to integrate the GeoJSON of a shapefile into React.js to display it as an interactive map with OpenStreetMap used in the background as a tiled image.
I have used QGIS to export the shapefile polygons to GeoJSON format. When opening the GeoJSON file in a text editor the coordinates are arranged as longitude and latitude by default (see below example):
{
"type": "FeatureCollection",
"name": "AB_18_epsg4326",
"crs": { "type": "name", "properties": { "name": "urn:ogc:def:crs:OGC:1.3:CRS84" } },
"features": [{ "type": "Feature", "properties": { "id": null, "BlockID": "18", "AreaName": "Alto Branco" }, "geometry": { "type": "MultiPolygon",
"coordinates": [ [ [ [ -35.883680840759709, -7.207758761892716 ],
[ -35.882709722028402, -7.208009651845575 ],
[ -35.882898093859403, -7.208733208791063 ],
[ -35.883854465392915, -7.208480923455232 ],
[ -35.883680840759709, -7.207758761892716 ]
] ] ] } }
]
}
When integrating this to React.js and running the program - the polygon is visualised at the wrong place because the coordinates are supposed to be arranged as Latitude & Longitude in OSM instead of Longitude and Latitude.
Is there way to export this shapefile into GeoJSON with the default positions of the coordinates (i.e. longitude and latitude) changed to Latitude and Longitude using QGIS or R?
The desired export should be:
{
"type": "FeatureCollection",
"name": "AB_18_epsg4326",
"crs": { "type": "name", "properties": { "name": "urn:ogc:def:crs:OGC:1.3:CRS84" } },
"features": [{ "type": "Feature", "properties": { "id": null, "BlockID": "18", "AreaName": "Alto Branco" }, "geometry": { "type": "MultiPolygon",
"coordinates": [ [ [ [ -7.207758761892716, -35.883680840759709 ],
[ -7.208009651845575, -35.882709722028402 ],
[ -7.208733208791063, -35.882898093859403 ],
[ -7.208480923455232, -35.883854465392915 ],
[ -7.207758761892716, -35.883680840759709 ]
] ] ] } }
]
}