Leafletjs How to project EPSG4326 points to the leaflet default

Viewed 2702

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?

1 Answers
Related