Search code examples
leafletopenstreetmapgeojson

Leafletjs GeoJSON layer is not working for map data from Natural Earth

I am using leafletjs to plot geographical maps using OSM tiles. I used the following GeoJSON as a map layer http://code.highcharts.com/mapdata/1.0.0/custom/world.js which uses data from naturalearthdata.com

But it is not working. The tile layer is shown correctly. But the GeoJSON data is not being shown. I can only see a white line across the map.

enter image description here

var worldMapData = {}; //the geoJson data from http://code.highcharts.com/mapdata/1.0.0/custom/world.js

var osmUrl = 'http://{s}.tile.osm.org/{z}/{x}/{y}.png',
    osm = L.tileLayer(osmUrl, {
                noWrap: true,
                attribution: "<a href='http://openstreetmap.org'>OpenStreetMap</a>"
            });

var map = L.map('map').setView([0, 0], 1).addLayer(osm);

function style( feature ) {
    return {
        fillColor: '#FFEDA0',
        weight: 2,
        opacity: 1,
        color: 'white',
        dashArray: '3',
        fillOpacity: 0.7
    };
}

map.addLayer(L.geoJson(worldMapData, {style: style}));

Am I missing something? Is the above GeoJSON not according to specification? And if not, from where can I download GeoJSONs for all countries which are compatible with leafletjs?

[Edit] Here is the jsfiddle for the above problem http://jsfiddle.net/1x1p55fy/

Solution

  • The GeoJSON data is being loaded correctly, and is being displayed as expected. However, the GeoJSON data is not conformant to the GeoJSON spec, in regards to the coordinate reference system. Let me quote from the GeoJSON specs:

    The coordinate reference system for all GeoJSON coordinates is a geographic coordinate reference system, using the World Geodetic System 1984 (WGS 84) [WGS84] datum, with longitude and latitude units of decimal degrees. This is equivalent to the coordinate reference system identified by the Open Geospatial Consortium (OGC) URN urn:ogc:def:crs:OGC::CRS84. An OPTIONAL third-position element SHALL be the height in meters above or below the WGS 84 reference ellipsoid. In the absence of elevation values, applications sensitive to height or depth SHOULD interpret positions as being at local ground or sea level.

    Note: the use of alternative coordinate reference systems was specified in [GJ2008], but it has been removed from this version of the specification because the use of different coordinate reference systems -- especially in the manner specified in [GJ2008] -- has proven to have interoperability issues. In general, GeoJSON processing software is not expected to have access to coordinate reference system databases or to have network access to coordinate reference system transformation parameters. However, where all involved parties have a prior arrangement, alternative coordinate reference systems can be used without risk of data being misinterpreted.

    If you have a closer look at the data in https://code.highcharts.com/mapdata/custom/world-highres.geo.json (or http://code.highcharts.com/mapdata/1.0.0/custom/world.js for that matter) you'll see that, in fact, the coordinates are not in latitude-longitude relative to the WGS84 geoid, and that there is a reference to the EPSG:54003 coordinate reference system (cylindrical miller), with a custom scale and offset transform.

    As the GeoJSON spec already stated, you are hereby discouraged to use any other CRS than EPSG:4326 (WGS84 in latitude-longitude) in your GeoJSON data.

    Find some conformant GeoJSON, and it will look OK in Leaflet. Leaflet does not handle reprojection of GeoJSON data, nor it handles the scale transforms that highcharts data implies.