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!?

Answer 1

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

Answer 2

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.