4

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.

Fire map

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.

enter image description here

  • How are you verifying that they're "slightly off"? What is the source of the polygon data? Did you account for a datum transformation when you projected the data? – Stephen Lead Feb 10 '16 at 23:59
  • The data on burned areas is from a fire department, so I think they're very accurate. I don't know about datum translation - would the data become less accurate in that process? – JasTonAChair Feb 11 '16 at 0:02
  • The polygon edge should be on the coastline, if it was to appear correctly, is the issue. – JasTonAChair Feb 11 '16 at 0:03
5

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.

enter image description here

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

  • Hi, unfortunately I didn't get it working. The steps outlined in the link didn't work for me. – JasTonAChair Feb 11 '16 at 2:19
  • So I'm going to do a datum transformation in Arc as you have, and see if that works for me – JasTonAChair Feb 11 '16 at 2:19
  • So you're updated, I wasn't able to get ArcGIS at work. So I'm going to make up a pyproj script and do it that way. It seems this isn't really a leaflet issue anymore. – JasTonAChair Feb 11 '16 at 5:37
4

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.

  • This was the best option for me. It worked in the end, thanks – JasTonAChair Feb 12 '16 at 23:41
  • Spoke too soon, this didn't work. Seems it might be a leaflet issue – JasTonAChair Feb 14 '16 at 23:42
0

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.