CODEWITHSUNDEEP
leaflet
tone
tone

Reputation: 1434

Leafletjs How to project EPSG4326 points to the leaflet default

I am using Australian government map data found here: Victoria, Australia locality data, which is provided in the EPSG4326 projection.

When I try to use the data with leaflet, of course, my data is a bit distorted due to the earth's curvature - so my data is not represented properly on the screen because the maps are using a different projection to my data.

I have tried to force the map to use EPSG4326 by setting it in Map options and also in the TileLayer, as shown here:

var gisLayer = L.tileLayer(
  'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    //subdomains: ['0', '1', '2', '3'],
    attribution: 'openstreetmap',
    reuseTiles: true,
    updateWhenIdle: false,
    crs: L.CRS.EPSG4326
});

var map = L.map('map', {
  center: [-28.5, 135.575],
  zoom: 4
  ,crs: L.CRS.EPSG4326
});

map.addLayer(gisLayer);

but when I do this, the maps do not display. I don't believe the map tiles have been generated for this projection. That said, there is a suggestion in the docos here that it might be possible, but I couldn't get this working. (Did I just get the configuration wrong?)

It seemed like it was working when I retrieved the data and placed it on the map, but when I got the map bounds to select the data for the visible region, it also showed distorted. So I tried to convert the map bounds to EPSG4326 manually, to pass that to the database, as follows:

var bounds = map.getBounds();
var coords4326_NE = L.Projection.SphericalMercator.unproject(bounds._northEast);
console.log(coords4326_NE);

but that broke the code. I was passing the wrong structure in and I couldn't get this right either.

Of course, I would also accept transforming every point returned from the database to the default projection, which I think is EPSG3857. But I am having doing this as well.

I have provided as jsFiddle here where I have been attempting to do the above.

Does anyone know how I can achieve this?

Upvotes: 2

Views: 4403

Answers (1)

ghybs
ghybs

Reputation: 53280

Your GeoJSON data is encoded in WGS84, which can be simply plotted on EPSG4326, but is also the expected input for EPSG3857 (Web Mercator).

From that Wikipedia article:

While the Web Mercator's formulas are for the spherical form of the Mercator, geographical coordinates are required to be in the WGS 84 ellipsoidal datum.

Therefore, you do not have to change anything to plot your data onto a regular Leaflet map, using regular tiles (from OSM or Mapbox, which provide tiles only for EPSG3857).

Screenshot of OP's data onto a regular Leaflet map

Upvotes: 1

Related Questions