Leaflet: Error in geoJson overlay at Russia Finland border

Question

I'm using the 1:50m Cultural Vectors shape file from naturalearthdata.com.

I use ogr2ogr to create a geoJson file with the following command:

ogr2ogr -f GeoJSON geo_world_50m.json ne_50m_admin_0_countries.shp

I then create a topoJson file with this command:

topojson --id-property iso_n3 -p name=admin -p name -p iso_a3=iso_a3 -p iso_a3 -o topo_world_50m.json geo_world_50m.json

Once I have my topoJson file, I load it in to Leaflet:

$.getJSON('topo_world_50m.json', function (data) {
    var country_geojson = topojson.feature(data, data.objects.geo_world_50m);
    country_layer.addData(country_geojson);
});

I've tried the 1:50m file as well as the 1:10m file from Natural Earth. Both give me this section of Russia that is reversed at the Finland border.

Any ideas how to address this? Thanks

Answer 1

What happens if you use the geoJson? For admin 0 level geographies like this (country level) a geoJson might suffice in terms of detail. It sounds like something is being lost when you go from geo -> topo?

Answer 2

So... this is a known issue on leaflet, I solved this way:

function onEachShapeFeature(feature, layer){
    var bounds = layer.getBounds && layer.getBounds();
    // The precision might need to be adjusted depending on your data
    if (bounds && (Math.abs(bounds.getEast() + bounds.getWest())) < 0.1) {
        var latlongs = layer.getLatLngs();
        latlongs.forEach(function (shape) {
            shape.forEach(function (cord) {
                if (cord.lng < 0) {
                    cord.lng += 360;
                }   
            }); 
        }); 
        layer.setLatLngs(latlongs);
    }
}
var countries = L.geoJson(data, {
        onEachFeature: onEachShapeFeature,
});

You will need underscore.js or lodash I know that is hacky... but was the best way I found.