7 ms·

Reimagining projections for the interactive maps era

327 points by mourner 5y ago

turdnagel 5y ago
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.
- mourner 5y ago
  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.
chpatrick 5y ago
This is cool but if we're not bound to static paper maps isn't the ultimate adaptive projection an interactive 3D perspective rendering of the globe? I suppose the downside is that you can't see both hemispheres at the same time. 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.
- mourner 5y ago
  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.
- zokier 5y ago
  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.
  - mourner 5y ago
    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
    - somishere 5y ago
      Amazing. Noted the draft PR and some mentions of a fall release .. are we talking imminent on a globe?
  - wakeupcall 5y ago
    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.
- nielsbot 5y ago
  I feel like this is what the latest Apple Maps update does? Even the "2D" maps are actually 3D when you zoom out.
- bowmessage 5y ago
  I wonder if one could use something like an antipode map to show two sides at once: https://engaging-data.com/antipodes-map/ https://engaging-data.com/antipodes-map/
- mch82 5y ago
  Cesium Sandcastle has a number of interesting 3D map examples, https://sandcastle.cesium.com/ https://sandcastle.cesium.com/. Best to use a desktop browser. Their mapping library is focused more on 3D.
mourner 5y ago
I'm the author of the article — happy to see this upvoted, feel free to ask any questions about web maps!
- s1mon 5y ago
  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".
- fenfe1 5y ago
  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.
  - mourner 5y ago
    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.
  - derekja 5y ago
    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!
- nixpulvis 5y ago
  Are there live demos that could be embedded instead of (or in addition to) the animated gifs?
  - mourner 5y ago
vanderZwan 5y ago
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)
- mourner 5y ago
  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.
- thinkingemote 5y ago
  > 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 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?
CGamesPlay 5y ago
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).
- mourner 5y ago
  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 https://news.ycombinator.com/item?id=29541230
- kzrdude 5y ago
  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.
- jacobolus 5y ago
  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
- deleted 5y ago
  [deleted]
rspoerri 5y ago
Maybe check out Mia's Worldmapgenerator: https://www.worldmapgenerator.com/ 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.
divbzero 5y ago
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.
- mourner 5y ago
  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 https://github.com/mapbox/mapbox-gl-js/issues/10784
  - modeless 5y ago
    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.
    - mourner 5y ago
      Yes, but there’s a difference between a consumer app and an SDK for developers. Changing the default this drastically is a breaking change.
ordx 5y ago
Really hope that this will be added to OSS fork of Mapbox [1] [1] https://github.com/maplibre/maplibre-gl-js https://github.com/maplibre/maplibre-gl-js
- GeneralTspoon 5y ago
  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)
sp332 5y ago
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?
- jlarocco 5y ago
  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?
greggman3 5y ago
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
chaostheory 5y ago
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/
Acrobatic_Road 5y ago
I wish one day we get this kind of flexibility in grand strategy games.

327 points by mourner 5y ago

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.

mourner 5y ago
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.

chpatrick 5y ago

This is cool but if we're not bound to static paper maps isn't the ultimate adaptive projection an interactive 3D perspective rendering of the globe? I suppose the downside is that you can't see both hemispheres at the same time. 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.

mourner 5y ago
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.
zokier 5y ago
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.
- mourner 5y ago
  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
  - somishere 5y ago
    Amazing. Noted the draft PR and some mentions of a fall release .. are we talking imminent on a globe?
- wakeupcall 5y ago
  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.
nielsbot 5y ago
I feel like this is what the latest Apple Maps update does? Even the "2D" maps are actually 3D when you zoom out.
bowmessage 5y ago
I wonder if one could use something like an antipode map to show two sides at once: https://engaging-data.com/antipodes-map/ https://engaging-data.com/antipodes-map/
mch82 5y ago
Cesium Sandcastle has a number of interesting 3D map examples, https://sandcastle.cesium.com/ https://sandcastle.cesium.com/. Best to use a desktop browser. Their mapping library is focused more on 3D.

mourner 5y ago

I'm the author of the article — happy to see this upvoted, feel free to ask any questions about web maps!

s1mon 5y ago
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".
fenfe1 5y ago
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.
- mourner 5y ago
  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.
- derekja 5y ago
  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!
nixpulvis 5y ago
Are there live demos that could be embedded instead of (or in addition to) the animated gifs?
- mourner 5y ago

vanderZwan 5y ago

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)

mourner 5y ago
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.
thinkingemote 5y ago
> 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 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?

CGamesPlay 5y ago

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).

mourner 5y ago
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 https://news.ycombinator.com/item?id=29541230
kzrdude 5y ago
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.
jacobolus 5y ago
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
deleted 5y ago
[deleted]

rspoerri 5y ago

Maybe check out Mia's Worldmapgenerator: https://www.worldmapgenerator.com/ 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.

divbzero 5y ago

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.

mourner 5y ago
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 https://github.com/mapbox/mapbox-gl-js/issues/10784
- modeless 5y ago
  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.
  - mourner 5y ago
    Yes, but there’s a difference between a consumer app and an SDK for developers. Changing the default this drastically is a breaking change.

ordx 5y ago

Really hope that this will be added to OSS fork of Mapbox [1] [1] https://github.com/maplibre/maplibre-gl-js https://github.com/maplibre/maplibre-gl-js

GeneralTspoon 5y ago
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)

sp332 5y ago

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?

jlarocco 5y ago
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?

greggman3 5y ago

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

chaostheory 5y ago

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/

Acrobatic_Road 5y ago

I wish one day we get this kind of flexibility in grand strategy games.