Leaflet geojson coordinate problem

Question

I just started to play with leaflet/geojson a little. But my coordinates are not rendered properly and I have no clue what is going on.

My coordinates are: 52.23943, 4.97599. They work correct with the setView function.

var map = L.map('leaflet_map').setView([52.23943, 4.97599], 15);

But using a geojasonFeature they are, hmmm, 'projected', somewhere east of Somalia.

var geojsonFeature = {
            "type": "Feature",
            "properties": {
            "name": "Coors Field",
            "amenity": "Baseball Stadium",
            "popupContent": "This is where the Rockies play!"
            },
            "geometry": {
                "type": "Point",
                "coordinates": [52.23943, 4.97599]
            }
        };
        var myLayer = L.geoJson().addTo(map);
        myLayer.addData(geojsonFeature).bindPopup("I am a gjson point.");

Anyone who knows what is happening here?

EDIT

Out of pure curiosity, I changed the coordinates around [4.976143930893815,52.23925499011473] and the point appears at its correct location. A known bug!?

score 26 · Accepted Answer · edited Apr 13 '17 at 12:33

26

I wouldn't call it a bug, just a matter of confusing and contradictory standards.

When talking about geographic locations, we usually use Lat-long. This has been codified in the ISO 6709 standard.

When dealing with Cartesian coordinate geometry, we generally use X-Y. Many GIS systems, work with a Geographic Location as a special case of a 2 D coordinate point, where the X represents the longitude and Y represents the Latitude. This order of coordinates, is exactly opposite that of the regular Lat-long notion.

Coming to your problem:

The map.setView takes a l.LatLong as an input, where the first cordinate is a Latitude, and the second is Longitude.

Hence when you want 52.23N, 4.97E, you pass in [52.23943, 4.97599]

The GeoJSON standard says that for any point, the first parameter is the X Coordinate (i.e. Longitude) and second parameter is the Y coordinate (i.e. Latitude);

Hence when you want 52.23N, 4.97E in GeoJSON, you need to pass [4.97599, 52.23943]

For further reading, go through this Q&A

edited Apr 13 '17 at 12:33

Community

1

answered Mar 11 '13 at 10:04

Devdatta Tengshe

41,311
35
139
263

Indeed a matter of confusion. I just read the geojson spec and indeed you are absolutely right. Here is the quote The order of elements must follow x, y, z order (easting, northing, altitude for coordinates in a projected coordinate reference system, or longitude, latitude, altitude for coordinates in a geographic coordinate reference system) – LarsVegas Mar 11 '13 at 10:14
1

@LarsVegas The origin of this issue is the English Language. We usually say Lat-long when we are talking about the geographic location and use X-Y when are talking about coordinate geometry. – Devdatta Tengshe Mar 11 '13 at 10:18
A summary of which programs and libraries use X,Y and which Y,X pair ordering: https://macwright.org/lonlat/, courtesy Tom MacWrite – matt wilkie Jul 31 '17 at 22:42
thanks for this helpful answer... but WHY did geojson choose to do this?? – Tommy Apr 05 '18 at 13:36

alexandros84 · Answer 2 · 2017-08-16T23:56:42.663

I ve just bumped upon this issue. To anyone experiencing this problem and has a considerable number of lat,long data pairs, you can use the following js:

var a = "[LatLng(37.43943, 25.30563)],[LatLng(37.4367, 25.30495)],[LatLng(37.43071, 25.29945)],[LatLng(37.42362, 25.30426)],[LatLng(37.42089, 25.31113)],[LatLng(37.41489, 25.31113)],[LatLng(37.41053, 25.30769)],[LatLng(37.40235, 25.30563)],[LatLng(37.40562, 25.31525)],[LatLng(37.41816, 25.31937)],[LatLng(37.42307, 25.3228)],[LatLng(37.40889, 25.33104)],[LatLng(37.4078, 25.33722)],[LatLng(37.41598, 25.33791)],[LatLng(37.40344, 25.35027)],[LatLng(37.40726, 25.3688)],[LatLng(37.42253, 25.39009)],[LatLng(37.4138, 25.39902)],[LatLng(37.42907, 25.4052)],[LatLng(37.42961, 25.41962)],[LatLng(37.44215, 25.42442)],[LatLng(37.44543, 25.45807)],[LatLng(37.46287, 25.4615)],[LatLng(37.47595, 25.46013)],[LatLng(37.47104, 25.42786)],[LatLng(37.48249, 25.42923)],[LatLng(37.48358, 25.41)],[LatLng(37.49502, 25.40588)],[LatLng(37.49447, 25.38597)],[LatLng(37.49066, 25.3791)],[LatLng(37.46941, 25.38254)],[LatLng(37.46178, 25.37773)],[LatLng(37.4754, 25.35988)],[LatLng(37.4972, 25.35782)],[LatLng(37.50047, 25.34203)],[LatLng(37.49774, 25.32761)],[LatLng(37.49229, 25.3228)],[LatLng(37.4912, 25.3125)],[LatLng(37.4814, 25.30907)],[LatLng(37.47268, 25.31113)],[LatLng(37.46341, 25.32692)],[LatLng(37.44597, 25.32692)],[LatLng(37.42798, 25.3228)],[LatLng(37.43943, 25.30563)]".split("],[");
var b = a.map(function(x) { 
    var couple= (/\d+.\d+, \d+.\d+/g).exec(x).toString();
    var splitted = couple.split(", ");
    return "["+splitted[1]+","+splitted[0]+"]";
                            } );
b.join();

Edit: according to this SO answer, apparently there is also this method:

L.GeoJSON.coordsToLatLng().

I havent use it but it seems promising.

A useful function. Most inputs would probably be bare coordinate pair lists though - [[60.672744462452,-135.02487602415],[60.673011537554,-135.02487602415]]. I've also seen but not used the geojson-flip nodejs module. — matt wilkie, Jul 31 '17 at 22:45
Ty for your kind words. It was mostly a solution of the last moment as I was working on a tight schedule. There is actually a method provided by the leaflet library to do exactly that as I ve learned later (cant remember now which but I can check if you want). — alexandros84, Aug 01 '17 at 20:45
The name of the Leaflet method would be helpful! I haven't been able to find it, and the geojson-flip module I mentioned above doesn't work with my data. — matt wilkie, Aug 01 '17 at 22:58
Found something in [tag:turf], which is a big well supported module: http://turfjs.org/docs/#flip — matt wilkie, Aug 02 '17 at 07:15
Sorry I ve been swamped on my own headaches.. I am pretty sure it was a leaflet method. I ll try to have a thorough look later on. — alexandros84, Aug 02 '17 at 18:37
hey, sorry for the long delay, but here is what I was talking about: https://stackoverflow.com/questions/35983078/leaflet-swap-the-coordinates-when-use-geojson — alexandros84, Aug 16 '17 at 23:49

Leaflet geojson coordinate problem

2 Answers2

Linked

Related