Map Improvements

Hello! I'm Cameron, creator of earth.nullschool.net.

earth.nullschool.net (e.n.n) has featured a "send feedback" link for a few years now. I read all the submitted feedback. The compliments and criticism, especially the criticism, have been extremely useful and informative. Don't get me wrong, the compliments are very much appreciated. But I'd like to know how users think the website and the Nullschool app can be improved.

And let me tell you, the most requested improvement, by far, is a better map.

Well, it's finally here.

(This post will get a bit technical. If you prefer to skip the discussion, you can jump to the end.)

The map is the set of coastlines, lakes, and rivers drawn on the globe. Obviously, the map is critical for understanding where atmospheric and ocean data are located, but it suffers from a big problem: detail doesn't increase as you zoom. This makes it quite difficult to understand where you are looking, especially when zoomed way in:

Not great. Useless, even.

This is a consequence of the way I built the site back in December 2013. I used a very simple approach: all geographic data is stored in one file downloaded by the browser. But like a photo, there are limits to how far you can zoom. Eventually there's no more detail and all you see is a blurry fog.

Of course, adding more detail is possible, like using a camera with more megapixels, but eventually the file gets far too big to download.

How can we solve this?

One solution is to split the map into square chunks called "tiles" and then download just the tiles we need. Usually, only a handful are visible at once, so each can hold much more detail without the total data size getting too big. Nearly all mapping sites use this approach.

The tradeoff is responsiveness: it takes time for the server to send tiles. You may have noticed these tiles loading over the network, especially when rotating or zooming out quickly:

Tiles load extremely fast most of the time, but you can see them if you look for them.

Nearly all mapping sites use the Web Mercator projection to define how the Earth is split into tiles. You only need to know two things about this: 1) it's really easy to calculate, and 2) it doesn't cover the poles. Try viewing Antarctica from directly above. Most sites won't let you do this, or they have visual glitches if they do.

In some scenarios, though, it's useful to show data around the poles cleanly. I wanted e.n.n and the Nullschool app to support those scenarios, so Web Mercator was not going to work. I needed a different approach.

Tiling schemes are usually defined as a recursively subdivided tile pyramid.

You're probably wondering what that means.

When zoomed out and viewing the entire globe, we need only coarse-grained geographical data stored in a few tiles. Tiny lakes, rivers, and other features can be ignored. But when zooming in we need more detail; eventually those tiny lakes and rivers should appear on the screen. More detail means bigger data, though, which requires more tiles. How can we organize all these tiles?

We can define zoom levels. A zoom level is a layer of tiles containing just the right amount of geographic detail for that amount of zoom. Level 1 is the most zoomed out, so it has the coarsest detail in the fewest tiles. Deeper layers usually (but not always) have four times the number of tiles as the coarser layer above. Why four? Because to make the next layer, each tile is conveniently split in half east-west and then again north-south. This is repeated all the way down, i.e., recursively subdivided.

Somewhat resembles a pyramid, doesn't it? ¹

Being recursively subdivided is a very useful property: if an upper-level tile is not visible, then none of the smaller tiles underneath it are visible either, all the way down to the bottom. This property makes it fairly quick to determine which tiles are visible on the screen, regardless of the zoom level or the map projection used. ²

Now, to define a tiling scheme that covers the poles as a recursively subdivided pyramid, we can tessellate the globe into "square" tiles that are 45° of lat/lon per side. To make the next layer, we subdivide those tiles into four. And repeat. That produces a pyramid which looks like this:

Here's the same pyramid drawn on a sphere:

Looks pretty good, but there's a problem. As the zoom level increases, tiles near the poles become smaller and smaller. It gets so bad that zooming in on the poles would cause the browser to download hundreds, or even thousands, of tiles:

Not good.

One solution is to inspect rows near the poles and repeatedly combine pairs of tiles until they get large enough:

Much better. This technique eliminates the extreme number of tiles near the poles while maintaining the recursively-subdivided structure of the pyramid. I ended up using this approach.

Since the early days, e.n.n has used a public domain geographic dataset called Natural Earth at 1:50m scale. For the new map tiles, I used a preliminary draft of the newest version, Natural Earth 6, at 1:7.5m scale. This version has more detail and more features but is still under construction, so there may be a few errors.

Using various tools ³, I extracted coastlines, lakes, and rivers from NE6, then sliced them into tiles down through six zoom levels. The result is a map that has almost seven times more detail than the previous, classic map:

The map tiling works across all supported projections, too, like this weirdly rotated Conic Equidistant view:

I felt it was important to keep the same visual aesthetic as the classic map, so only coastlines, lakes, and rivers are shown for now. NE6 has many other features: roads and railroads, urban areas, coral reefs, location names, topography, and more. I would like to add these at some point.

NE6 also has political boundaries like country and state/province borders. I will add these eventually, but I'm not looking forward to it. Even though the map doesn't show borders, I get angry emails about them being wrong. That will get worse. Furthermore, some countries make it a criminal act to show "incorrect" borders. I don't live in those places, but still… The solution is to determine the user's country and show borders considered acceptable by that country's government. NE6 doesn't yet have that data.

To enable the new map, select "detailed" from the Base Map section of the Settings. This works for both the website and the app:

The classic map remains the default for now because there are still a few performance issues to work through. Or maybe it works fine? Let me know! Any feedback you have is welcome.

If you enjoy my work, please consider purchasing an optional app subscription. It helps keep things running smoothly and provides resources to add new features. I would be grateful for any support you can provide. And for those of you who have already subscribed: thank you!

🌍🌎🌏

For fun, I'm including a gallery of screenshots taken during the development process, showing weird bugs, mock-ups, failed experiments, etc. Enjoy!