Leaflet and GeoJSON coordinates usage

Question

I have a GeoJSON object “feature” stringified as :

{
    "type": "Feature",
    "properties": {
        "id": 1039215298,
        "version": 1,
        "reference": "SRO-BPI-12121212",
        "adresse": "235 RUE DU MAUBON",
        "codePostal": "60750",
        "ville": "CHOISY AU BAC",
        "nbrLogements": 2,
        "nbrLogementsDeployes": 2,
        "tauxLogementsDeployes": 100
    },
    "geometry": {
        "type": "Point",
        "coordinates": [
            2.87,
            49.44
        ]
    }
}

It should point to France.

I want to display the openstreetmap tiles, add a marker using GeoJSON layer and zoom in using the following leaflet commands:

L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
maxZoom: 19, attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
    }).addTo(map);
L.geoJSON(feature).addTo(map);
map.flyTo(feature.geometry.coordinates, 13);

The zoom doesn’t work: leaflet zoom to (49.44, 2.87) in Indian Ocean. I have to use the following code to correctly zoom in France:

map.flyTo(new L.LatLng(feature.geometry.coordinates[1],feature.geometry.coordinates[0]), 13)

Which is inconsistent. Can you please explain me why the coordinates are correctly displayed with GeoJSON layer but not correctly used by map.flyTo ? Is there a flyTo method for GeoJSON feature?

Answer 1

Both are correct, they are just using different coordinate axis order by definition. FlyTo requires coordinates to be in lat-lon order https://leafletjs.com/reference.html#map-flyto

flyTo(<LatLng> latlng, <Number> zoom?, <Zoom/pan options> options?)

and in GeoJSON coordinates must be in lon-lat order https://www.rfc-editor.org/rfc/rfc7946.

A position is an array of numbers. There MUST be two or more elements. The first two elements are longitude and latitude, or easting and northing, precisely in that order and using decimal numbers.

Answer 2

It's because GeoJSON and leaflet use different conventions for the order of latitude and longitude. You just have to switch the order as you did.

GeoJSON standard:

Point coordinates are in x, y order (easting, northing for projected
coordinates, longitude, and latitude for geographic coordinates):

and leaflet flyTo method:

flyTo( latlng, zoom?, <Zoom/pan options> options?)

When you create the GeoJSON layer with L.geoJSON(feature) the coordinates get converted. But when you access the values directly via feature.geometry.coordinates you get raw values from your feature.

There is a similar question on Stackoverflow