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. :)

Answer 2

I just want to add some of my points-

Just a matter of confusing and contradictory standards.

When talking about geographic locations, we usually use Lat-long.

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

Example :- 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 51.505N, 0.09E in GeoJSON, you need to pass [-0.09, 51.505]

var map = new L.Map('map');
var bingLayer = new L.BingLayer('AhVaalRWmmprMAMHj6lw18ALO-iVnIGzvkq7gYAX3U_bisCT8Q_lgGV25YOa0kiV', 'Aerial');
map.setView(new L.LatLng(-0.09, 51.505), 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);

You can adjust your view by modifying this..

map.setView(new L.LatLng(-0.09, 51.505), 13).addLayer(bingLayer);

to

map.setView(new L.LatLng(-008, 51.509), 13).addLayer(bingLayer);

I think this explanation will help !! For More Click Here