Leaflet GeoJSON – How to Resolve Coordinate Problems

geojsonleaflet

I just started to play with leflet/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!?

Best Answer

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

Related Question