Leaflet GeoJSON display

Question

I have encountered a task, that requires usage of leaflet js library with geojson as data storage. And almost immediately, following problem being encountered: polygon created from geojson object doesn't display on map. While polygon, created by native leaflet method - works perfectly.

Here's my code:

        var map = new L.Map('map');
        var bingLayer = new L.BingLayer('AhVaalRWmmprMAMHj6lw18ALO-iVnIGzvkq7gYAX3U_bisCT8Q_lgGV25YOa0kiV', 'Aerial');
        map.setView(new L.LatLng(51.505, -0.09), 13).addLayer(bingLayer);
        var polygon = {
            "type": "Feature",
            "properties": {
                    "style": {
                        "color": "#004070",
                        "weight": 4,
                        "opacity": 1
                    }
            },
            "geometry": {
                "type": "Polygon",
                "coordinates": [[
                    [51.509, -0.08],
                    [51.503, -0.06],
                    [51.51, -0.047],
                    [51.509, -0.08]
                ]]
            }
        };
        var geojsonLayer = new L.GeoJSON(polygon);
        map.addLayer(geojsonLayer);

As you can see, it almost copies an example, provided by leaflet. And does not work. I am completely bugged by this trouble, and will be very thankful for any help.

Answer 1

The problem is that in GeoJSON spec, coordinates should be passed in the form [lon, lat] while Leaflet uses [lat, lon] for its objects. Just change it to [-008, 51.509], etc., and you should be fine. :)