How to get gall-peter geojson or how to make that
I have used react leaflet for make an interactive map using geojson data, its working well but now i need to change the map projection to gall-peters map, so i need the geojson for the particular map projection, how can i get that. Now i am using mercator map geojson data
First, let's forget about react and react-leaflet right now. Let's just focus on what you're trying to do with leaflet. You need to change the projection / CRS that your map is using. To create a map with a less common projection, you can use the leaflet plugin Proj4Leaflet. You'll also need the projection definition. For gall-peters, which has the projection code "cea" (Cylindrical Equal Area), you can find the Proj4 code to use with Proj4Leaflet here. Putting it alltogether to create a map in that projection:
import "proj4leaflet";
const resolutions = Array.from({ length: 15 })
.map((_, i) => (i + 200) ** 2)
.reverse();
// Define your projection
var crs = new L.Proj.CRS(
"SR-ORG:6838",
"+proj=cea +lon_0=0 +x_0=0 +y_0=0 +lat_ts=45 +ellps=WGS84 +datum=WGS84 +units=m +no_defs",
{
resolutions,
origin: [0, 0]
}
);
var map = L.map("leafletMapid", { crs, ...otherOptions });
Now, adding GeoJSON to the map will automatically be in that projection. Note the resolutions variable, which needs some fine tuning to get things working properly.
Getting this to work in react-leaflet is just a matter of creating that projection and giving it to the MapContainer:
const Map = (props) => {
const [data, setData] = useState();
useEffect(() => {
// fetch geojson on mount and save to state
fetch("geojsonurl")
.then((r) => r.json())
.then((r) => setData(r));
}, []);
return (
<MapContainer
{...mapOptions}
crs={crs} // defined in the same way as above
>
{data && <GeoJSON data={data} />}
</MapContainer>
);
};
As you can see, you have a react-leaflet map with GeoJSON in your desired projection.
Note that if you want to put a tilelayer under it that also follows this projection, that a whole other story. You can check out the docs on Proj4Leaflet for more on how to do that.
I was getting some Invalid LatLng object: (NaN, -130.1624500907549) error, though it didn't seem to effect the map. I'm 100% sure it has to do with the way proj4leaflet is using the resolutions, so you'll have to play with that. For those sandboxes, I disabled the error overlay with some css on iframe.
