Geojson Rendering Problems

Question

I'm trying to put on a map a series of topoJSON, but I came into this strange behaviour of the polygons, see the link below. If I try to convert them in to geoJSON and to visualise them, i get the same problem. You can che check here, unfortunately I'm not able to create a JS fiddle due to the ajax call to an external call I have to do. I paste the code here:

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>TopoJSON data</title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<script src='https://api.tiles.mapbox.com/mapbox.js/v2.1.9/mapbox.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox.js/v2.1.9/mapbox.css' rel='stylesheet' />
<style>
  body { margin:0; padding:0; }
  #map { position:absolute; top:0; bottom:0; width:100%; }
  path {
  stroke-width:1;
  stroke-opacity:0.25;
  opacity:0.4;
}
</style>
</head>
<body>
<script src='https://api.tiles.mapbox.com/mapbox.js/plugins/leaflet-omnivore/v0.2.0/leaflet-omnivore.min.js'></script>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="http://d3js.org/topojson.v1.min.js"></script>  
<div id='map'></div>
<script>
L.mapbox.accessToken = 'MY-ACCESS-TOKEN';
var map = L.mapbox.map('map', 'mapbox.streets').setView([40, -80], 5);
d3.json("topoJSON_noPoints.json", function(error, topology) {
  var geodata = topojson.feature(topology, topology.objects.collection)
  console.log(geodata)
  L.geoJson(geodata, { style: L.mapbox.simplestyle.style }).addTo(map);
});
</script>


</body>
</html>

Do you ever have a similar problem? Thanks!

score 1 · Answer 1 · edited May 23 '17 at 10:27

Thanks for the reply, I "workarounded" it.

The problem doesn't seem to be related to the data polygons. It seems to be due to a leaflet bug. Other users around the web risen up the same issue, for instance look at this where they try to give a solution, which unfortunately didn't work for me. I guess it's probably because I'm not a code-ninja and I can't really get how to use the stitch-poles conversion option.

Here is a reply to another issue, by @Joac who suggests a function based on underscore.js, which worked great for this case of mine. I copy paste his code meshed up with mine down here:

function onEachShapeFeature(feature, layer){
    var bounds = layer.getBounds && layer.getBounds();

    if (bounds && (Math.abs(bounds.getEast() + bounds.getWest())) < 0.1) {
        var latlongs = layer.getLatLngs();
        _.each(latlongs, function (shape) {
            _.each(shape, function (cord) {
                if (cord.lng < 0) {
                    cord.lng += 360;
                }   
            }); 
        }); 
        layer.setLatLngs(latlongs);
    }
}
var countries = L.geoJson(geodata, {
        onEachFeature: onEachShapeFeature,
        style: L.mapbox.simplestyle.style
}).addTo(map);

If someone could just teach us how to use that famous option and paste a snip here... That would be great!

score 0 · Answer 2 · edited May 23 '17 at 10:27

I think there's an issue with the ordering of polygon boundary points in your TopoJSON - Mapbox has the same issue.

Try re-creating your data set using a tool like mapshaper or mapstarter - these can take e.g. a shapefile from an authoritative source and export it as TopoJSON. Better yet, find someone who's done the work for you. Mike Bostock has a whole US Atlas with TopoJSON files that work well with Mapbox tiles.

Here's a fiddle with your code and the U.S. counties data set. It serves the JSON data set from a Dropbox public folder as detailed in this question. Your JS is modified to access topology.objects.counties.

    var geodata = topojson.feature(topology, topology.objects.counties);

Geojson Rendering Problems

2 Answers2