Projection issues with Leaflet - polygon appears off

Question

Using Leafletjs to upload coords from a json file as a polygon. The original coordinates are Vicgrid94(3111). I used QGIS to change the projection to LatLng (4326).

When I load the points onto my Leaflet map though, they're slightly off. If I zoom in they get more accurate, but I want to limit the zoom.

My firewall at the office is blocking JSFiddle, sorry.

Here is my relevant code:

var map = L.map('map',{
  center: [-38.610980250630381,143.88599774132959],
  zoomControl: true,
  zoom: 13,
  maxZoom: 17,
  minZoom: 3
});

L.tileLayer('http://{s}.tile.openstreetmap.fr/hot/{z}/{x}/{y}.png', {
  maxZoom: 19,
  attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>, Tiles courtesy of <a href="http://hot.openstreetmap.org/" target="_blank">Humanitarian OpenStreetMap Team</a>'
}).addTo(map)   

function loadData(count){
  thisShape = L.geoJson(data[count], {
    style: function (feature) {
      return {
        color: '#000',
        weight: 1
      };
    }
  }).addTo(map)
}
loadData(0)

This data is an array of geoJSON objects.

I tried placing crs: L.CRS.Simple and continuousWorld: true in the map and tilelayer objects, but this just changed the location of the map centre and polygon. Similar results for L.CRS.EPSG3857 and L.CRS.EPSG4326

EDIT

I've also tried exporting my data as projection 3857. But this did not seem to show up on my map, including when I set crs: L.CRS.EPSG3857

It seems the L.CRS.Simple projection wouldn't have worked anyway.

EDIT #2

Here is the same map, with a different geoJSON object, at a further level. There's even more of the fire area in the ocean.

Answer 1

Jason shared the dataset via email, and it seems that the problem is due to a datum mismatch.

Because the original dataset uses the GDA94 datum, and the Leaflet map uses WGS84, a datum transformation is necessary.

This is covered in the QGIS manual at Working With Projections.

Answer 2

Looks like a pure projections issue, not a Leaflet issue.

My tool of choice for CRS transforms is ogr2ogr, which can take your EPSG:3111 shapefile and output a GeoJSON:

$ ogr2ogr -s_srs EPSG:3111 -t_srs EPSG:4326 -f "GeoJSON" projected.json original.shp

In my experience, ogr2ogr is a very flexible and powerful tool for CRS and format transforms if one doesn't fear the command line.

Answer 3

Turns out this was not a projection issue. The issue was a style thing.

I wasn't being mindful that the shapes Leaflet puts on the page are SVG. I had a style that applied to all SVG, since my dataviz uses d3.

So that was really dumb. In my defense, this didn't show up for me in Chrome dev tools.

My bad for saying QGIS did it wrong, it clearly works.