Reimagining projections for the interactive maps era(mapbox.com)
mapbox.com
Reimagining projections for the interactive maps era
https://www.mapbox.com/blog/adaptive-projections
55 comments
Cesium Sandcastle has a number of interesting 3D map examples, https://sandcastle.cesium.com/. Best to use a desktop browser. Their mapping library is focused more on 3D.
I wonder if one could use something like an antipode map to show two sides at once: https://engaging-data.com/antipodes-map/
I feel like this is what the latest Apple Maps update does? Even the "2D" maps are actually 3D when you zoom out.
Yes, exactly! Globe view doesn't work when you want to show the whole world at once, which is useful for climate visualizations, political maps etc.
Also, many organizations, especially governments and news media, often have their own requirements and conventions when publishing maps — some practical, some purely stylistic. For example, NY Times uses Albers USA for election maps (it has that iconic curved look of state boundaries), and National Geographic uses Winkel Tripel for their world maps.
Also, many organizations, especially governments and news media, often have their own requirements and conventions when publishing maps — some practical, some purely stylistic. For example, NY Times uses Albers USA for election maps (it has that iconic curved look of state boundaries), and National Geographic uses Winkel Tripel for their world maps.
Ortographic projection is not really ultimate form for maps. Interactive (re)projection would definitely be nice but that applies to all projections equally, not just ortographic projection. But as the article notes, interactive reprojection is generally prohibitively expensive computationally.
Before Google steamrolled the competition with free maps around 2010, streaming vectorial maps were quite a big thing in EU. I completely forgot the names of the big players in the area, however the maps were rendered on the client after being preprocessed (generally for streaming/rendering efficiency) via a flash or java applet.
The maps were usually reprojected in variable UTM (according to your TZ - on the one I was working with) and/or using a Gauss projection, which is an extremely good compromise for whole countries. Because it was dynamic, the reprojection was a continuum while panning, usually imperceptible for the user at country scale. You could rotate the map, as well as query for road names in any spot instead of hunting down the (often missing) labels.
I feel like the online services regressed quite a bit compared to that time, but maybe that's just me as I was working on the field. The mercator projection was mostly a fallback for worldwide maps, hardly used otherwise at smaller scales. When google maps started to provide worldwide free maps (which could be used as a 3rd-party service for free at the time), there was no way we could compete. OSM wasn't good enough yet, data licensing from international vendors was extremely high, and worldwide satellite imagery required an entire order of magnitude higher investment to compete. The companies I knew all pivoted to fleet management and similar services to survive.
The maps were usually reprojected in variable UTM (according to your TZ - on the one I was working with) and/or using a Gauss projection, which is an extremely good compromise for whole countries. Because it was dynamic, the reprojection was a continuum while panning, usually imperceptible for the user at country scale. You could rotate the map, as well as query for road names in any spot instead of hunting down the (often missing) labels.
I feel like the online services regressed quite a bit compared to that time, but maybe that's just me as I was working on the field. The mercator projection was mostly a fallback for worldwide maps, hardly used otherwise at smaller scales. When google maps started to provide worldwide free maps (which could be used as a 3rd-party service for free at the time), there was no way we could compete. OSM wasn't good enough yet, data licensing from international vendors was extremely high, and worldwide satellite imagery required an entire order of magnitude higher investment to compete. The companies I knew all pivoted to fleet management and similar services to survive.
> Before Google steamrolled the competition with free maps around 2010, streaming vectorial maps were quite a big thing in EU. I completely forgot the names of the big players in the area, however the maps were rendered on the client after being preprocessed (generally for streaming/rendering efficiency) via a flash or java applet.
> The maps were usually reprojected in variable UTM (according to your TZ - on the one I was working with) and/or using a Gauss projection, which is an extremely good compromise for whole countries. Because it was dynamic, the reprojection was a continuum while panning, usually imperceptible for the user at country scale. You could rotate the map, as well as query for road names in any spot instead of hunting down the (often missing) labels.
I'd be interested if you could remember any names because I don't remember anyone doing a good job with vector maps in 2005 when the google maps api came out (embedded google maps were long established by 2010). Performance would have been pretty atrocious even in Flash, especially if they were from any established GIS companies, where incredibly slow desktop software was already the accepted norm.
Maybe a very generous interpretation of continuous reprojection, but I'm not aware of any decent system like you describe until the early 2010s (like the one the article links to[1]) and even then there's no real products built around them, until now :)
[1] http://berniejenny.info/pdf/2012_Jenny_AdaptiveCompositeMapP...
> The maps were usually reprojected in variable UTM (according to your TZ - on the one I was working with) and/or using a Gauss projection, which is an extremely good compromise for whole countries. Because it was dynamic, the reprojection was a continuum while panning, usually imperceptible for the user at country scale. You could rotate the map, as well as query for road names in any spot instead of hunting down the (often missing) labels.
I'd be interested if you could remember any names because I don't remember anyone doing a good job with vector maps in 2005 when the google maps api came out (embedded google maps were long established by 2010). Performance would have been pretty atrocious even in Flash, especially if they were from any established GIS companies, where incredibly slow desktop software was already the accepted norm.
Maybe a very generous interpretation of continuous reprojection, but I'm not aware of any decent system like you describe until the early 2010s (like the one the article links to[1]) and even then there's no real products built around them, until now :)
[1] http://berniejenny.info/pdf/2012_Jenny_AdaptiveCompositeMapP...
I wrote an essay for university around 2003 which reviewed a site that was vector based and very impressive for its time. I think it might have been viamichelin or viaeuropa.
> UTM and/or using a Gauss projection, which is an extremely good compromise for whole countries
The transverse Mercator projection is an “extremely good” conformal projection for anything region located within a narrow band around a specified meridian. This describes some countries well (e.g. Chile, Finland, Vietnam, Portugal), but is rather terrible for anything stretched out East–West (e.g. Russia, Canada, Indonesia).
Among conformal projections, for a compactly shaped country the stereographic projection is better. For a country lying along a parallel, a conformal conic projection is better. For a skinny country oriented at an arbitrary angle, an oblique Mercator projection is better. For small enough countries, any conformal projection works fine with low distortion.
The transverse Mercator projection is an “extremely good” conformal projection for anything region located within a narrow band around a specified meridian. This describes some countries well (e.g. Chile, Finland, Vietnam, Portugal), but is rather terrible for anything stretched out East–West (e.g. Russia, Canada, Indonesia).
Among conformal projections, for a compactly shaped country the stereographic projection is better. For a country lying along a parallel, a conformal conic projection is better. For a skinny country oriented at an arbitrary angle, an oblique Mercator projection is better. For small enough countries, any conformal projection works fine with low distortion.
As I wrote, but to make it a little bit more explicit, the centerpoint moved as you panned. The vectorial stream was performed directly in WGS84.
This allows to have of a country like Germany in view with very little distortion. As the zoom progressed outwards, it would morph to mercator. Nobody really noticed (sadly), and the choice of falling back to mercator was also due to it's popularity making it sort of "expected" more than anything else.
The key point is that the reprojection was dynamic, and done on the client, optimized for the current viewing conditions. Stuff that today you can perform via JS without any problem if you forego the idea that maps need to be pre-rendered.
This allows to have of a country like Germany in view with very little distortion. As the zoom progressed outwards, it would morph to mercator. Nobody really noticed (sadly), and the choice of falling back to mercator was also due to it's popularity making it sort of "expected" more than anything else.
The key point is that the reprojection was dynamic, and done on the client, optimized for the current viewing conditions. Stuff that today you can perform via JS without any problem if you forego the idea that maps need to be pre-rendered.
> centerpoint moved as you panned
If your display is tall and skinny and north always points upward, transverse Mercator is a good general choice among conformal projections. If your display is square or squat, then a stereographic or conformal conic projection is less distorted for any particular view.
If your display is tall and skinny and north always points upward, transverse Mercator is a good general choice among conformal projections. If your display is square or squat, then a stereographic or conformal conic projection is less distorted for any particular view.
Globe view (orthographic projection) is coming to GL JS too![1] It had to be implemented differently (rendering to textures and then mapping them on a 3D mesh), but it should be quite fast.
https://github.com/mapbox/mapbox-gl-js/issues/10784
https://github.com/mapbox/mapbox-gl-js/issues/10784
Amazing. Noted the draft PR and some mentions of a fall release .. are we talking imminent on a globe?
I'm the author of the article — happy to see this upvoted, feel free to ask any questions about web maps!
It's great to see this improvement, and read about the development. The one issue that stuck out is that there is not enough (any?) "ease-in/ease-out" to the animation as it transitions from zooming to zooming and rotating. Ideally this would be much more continuous. The Anchorage example is jarring as it switches from one type of zoom to the other. As an observer, I should not be able to say "here's the moment where it changes".
This is really cool!
One issue I noticed though is that if you use gestures to zoom on a touch pad, then you'll end up in the wrong spot.
For instance, I put my cursor on Sydney with a Lambert projection and pinch to zoom. As I pinch in, my cursor moves away from Sydney as the map rotates, so the centre of the map ends up at some other place.
Ideally, it should cache the geographic coordinates of the cursor at the start of the pinch gesture and zoom around that till it receives a non-pinch input.
One issue I noticed though is that if you use gestures to zoom on a touch pad, then you'll end up in the wrong spot.
For instance, I put my cursor on Sydney with a Lambert projection and pinch to zoom. As I pinch in, my cursor moves away from Sydney as the map rotates, so the centre of the map ends up at some other place.
Ideally, it should cache the geographic coordinates of the cursor at the start of the pinch gesture and zoom around that till it receives a non-pinch input.
Yes, this is on our top list of issues to fix!
https://github.com/mapbox/mapbox-gl-js/issues/11158
https://github.com/mapbox/mapbox-gl-js/issues/11158
This is really cool! …was my first thought too after reading. Thanks for writing and posting.
I'm curious how it would work out if you updated the projection center to match the view center in zoomed out maps?
I can see a value in having a "stable" map that doesn't twist around as you move, but I think that would offer a good alternative for people trying to look at places that suffer from the traditional projection centers, and of course different trade offs make sense for different circumstance.
But perhaps constantly reprojecting is too expensive?
I can see a value in having a "stable" map that doesn't twist around as you move, but I think that would offer a good alternative for people trying to look at places that suffer from the traditional projection centers, and of course different trade offs make sense for different circumstance.
But perhaps constantly reprojecting is too expensive?
Exactly — this would require reprojecting on every frame, which is too expensive, while we designed the feature to only do this once when loading a tile.
I guess this is more a feature request than a question - but do you have plans to support stenographic projections as well? I ask as I work for an Arctic/Antarctic research institute so most projections are unsuitable.
Definitely something we want to explore more, although it's quite a challenge since most map data distribution systems including ours are built around Mercator tiles, which can't show anything beyond ~85 latitude degrees.
I'd love to touch base on how you are handling this now.. I'm using a combination of geoserver, react, and openlayers for a Canadian Arctic 3573 projection. I'm derekja various places including Gmail. Thanks!
All I can say is this is really fucking impressive. When I played with the demo my jaw dropped. Amazing work!
Are there live demos that could be embedded instead of (or in addition to) the animated gifs?
Here's a live demo from our examples: https://docs.mapbox.com/mapbox-gl-js/example/projections/
We decided to go with live videos to demonstrate the concepts in motion, and because embedding WebGL vector maps on an already big page might slow it down quite a bit, but definitely something to consider more in the future.
We decided to go with live videos to demonstrate the concepts in motion, and because embedding WebGL vector maps on an already big page might slow it down quite a bit, but definitely something to consider more in the future.
Maybe just put a little click to start over it, thus indicating it's resource intensive. Not to give users flashbacks or anything, but as long as it isn't too big and/or was already downloaded, people should be happy.
When is this feature coming to an app near me?
Not much to add on the article itself other than "when Vladimir Agafonkin posts something it's probably worth checking out in detail" - too bad it doesn't come with some code to study this time ;)
Tangent: I have autoplay turned off in Firefox and had no idea half of these images were supposed to be examples of zooming in and out until halfway into the article, where one of them had a description.
This is not a critique on the article, just mentioning it for anyone else who might have similar settings. I'm also somewhat surprised that I don't even get a pop-up from Firefox asking me if I want to allow the video elements to be played.
(although I personally prefer my videos with controls enabling me to pause playback, instead of automatically looping fast-moving "gifs", which can get very disorienting while reading, but that's a different discussion)
Tangent: I have autoplay turned off in Firefox and had no idea half of these images were supposed to be examples of zooming in and out until halfway into the article, where one of them had a description.
This is not a critique on the article, just mentioning it for anyone else who might have similar settings. I'm also somewhat surprised that I don't even get a pop-up from Firefox asking me if I want to allow the video elements to be played.
(although I personally prefer my videos with controls enabling me to pause playback, instead of automatically looping fast-moving "gifs", which can get very disorienting while reading, but that's a different discussion)
> too bad it doesn't come with some code
Mapbox changed the license of their code last year I think to a proprietary one. https://github.com/mapbox/mapbox-gl-js/blob/main/LICENSE.txt
It requires a mapbox user license with billing enabled to use this code, let alone make modifications. But the source is viewable on github.
Mapbox also has one of the first tech unions established, but I do not think they have any position on the license. Any insiders know?
Mapbox changed the license of their code last year I think to a proprietary one. https://github.com/mapbox/mapbox-gl-js/blob/main/LICENSE.txt
It requires a mapbox user license with billing enabled to use this code, let alone make modifications. But the source is viewable on github.
Mapbox also has one of the first tech unions established, but I do not think they have any position on the license. Any insiders know?
Thanks for the kind words! Good point about autoplay — the current behavior is what we get when disabling controls in Vimeo embeds; worth checking if it's possible to detect whether autoplay is off, and switch the controls on if so.
I don't see anything about what I would have expected to be the obvious choice, so I'll ask. Why not perspective projection for all zoom levels? This involves rendering a sphere at the lowest zoom levels, but I can't imagine why it would cause problems at high zoom levels (and the sphere is the "correct" rendering in any case).
While we have that feature coming too, in short, there are many cases where we want to see the whole world at once. Expanded on this in a comment earlier: https://news.ycombinator.com/item?id=29541230
I think this would be by far the most intuitive, and less jarring, so it's a very good point. Show a globe on the world scale and fade over (unnoticeably) to an angle preserving projection when viewing city level.
A perspective projection (or an orthographic projection) is just one specific choice of projection, and for any particular use case it falls somewhere between suboptimal and entirely unsuitable.
Its one advantage is that it demonstrates that the map is a picture of a spherical earth, but it shows only one hemisphere or less, and is heavily distorted away from the center
Its one advantage is that it demonstrates that the map is a picture of a spherical earth, but it shows only one hemisphere or less, and is heavily distorted away from the center
[deleted]
I think Apple Maps also leveled up recently in terms of adaptive map projections. It used to be that to get a perspective projection of Earth that you can spin you would have to (1) start off zoomed in, (2) switch from 2D to 3D, and then (3) zoom out — my guess is they disabled switching between 2D and 3D while zoomed out to avoid trickier transitions between projections. With the latest version of Apple Maps you can get the spinnable Earth by simply zooming out, regardless of initial state, and the projection will adapt automatically.
While we're working on a similar feature (globe view [1]), there's a debate on whether it should be turned on by default. Apple Maps adopting it by default is a good argument in favor!
[1] https://github.com/mapbox/mapbox-gl-js/issues/10784
[1] https://github.com/mapbox/mapbox-gl-js/issues/10784
Google has been using perspective projection by default on the web for years. It's the right thing to do. The mobile versions haven't caught up yet.
Yes, but there’s a difference between a consumer app and an SDK for developers. Changing the default this drastically is a breaking change.
Maybe check out Mia's Worldmapgenerator:
https://www.worldmapgenerator.com/
The first version of this project is from 2013, this version is afaik from 2017 and covers this topic the best way i've seen.
https://www.worldmapgenerator.com/
The first version of this project is from 2013, this version is afaik from 2017 and covers this topic the best way i've seen.
Really hope that this will be added to OSS fork of Mapbox [1]
[1] https://github.com/maplibre/maplibre-gl-js
[1] https://github.com/maplibre/maplibre-gl-js
That would be nice - but I doubt it will be coming any time soon.
After 6 months Maplibre doesn't appear to have changed that much from the original MapboxGL version - which makes sense, because Mapbox pay a bunch of people a bunch of money to work on it full time.
And the engineering effort to implement this would be significant (probably an understatement, given how much this likely complicates the codebase going forward too). So I don't know where Maplibre will get the resources to do this (although it would be amazing if they did)
After 6 months Maplibre doesn't appear to have changed that much from the original MapboxGL version - which makes sense, because Mapbox pay a bunch of people a bunch of money to work on it full time.
And the engineering effort to implement this would be significant (probably an understatement, given how much this likely complicates the codebase going forward too). So I don't know where Maplibre will get the resources to do this (although it would be amazing if they did)
Does anyone else find those map zoom-ins incredibly disorienting? Kudos on solving this complex technical challenge, but I'm not sure the end result is as "smooth" as described.
The videos show some extreme cases of this transition, but in practice it feels pretty natural when interacting with the map. Also, we'll definitely continue tweaking it to feel better. It's nearly impossible to make it fully smooth though — projections are hard.
A bunch of the videos don't play for me in Firefox, even with adblockers disabled. Seems to work fine in Edge though. Anyone else have this issue?
I don't see anything.
Do people just not know how to build websites without pulling in resources from a million arbitrary third parties any more?
Do people just not know how to build websites without pulling in resources from a million arbitrary third parties any more?
I wish one day we get this kind of flexibility in grand strategy games.
obligatory link to West Wing scene where they point out the political implications of the mercator projection
https://www.youtube.com/watch?v=vVX-PrBRtTY
https://www.youtube.com/watch?v=vVX-PrBRtTY
Why is Africa still so small in new projections?
https://www.visualcapitalist.com/map-true-size-of-africa/
https://www.visualcapitalist.com/map-true-size-of-africa/
Then we can use our built-in spatial reasoning to compare how big some areas are by changing the perspective (as in real life), and shapes are only distorted by perspective which is very familiar.