mapseed/platform

Explore Leaflet 1.0 options

Closed this issue · 3 comments

futuresoup commented

Leaflet 1.0 is out!
http://leafletjs.com/2016/09/27/leaflet-1.0-final.html

Would be great to play around with it. Some examples:

  • The new map flyover animations could greatly improve our storymap feature.
  • Fractional zoom support will go well with vector tile zoom controls from Mapbox
  • Map rotation would be handy

UPDATE: We have a branch set up for experimenting with Leaflet 1.0's features. It's called exploreLeaflet1point0-466, and is already set up to link to Leaflet 1.0 libraries.

As a start, we could try spicing up the animated pans that occur when users navigate stories. We currently use Leaflet's setView() method to control map movements (see here and here), but Leaflet 1.0 has a new flyTo method that sounds like it combines pans and zooms into a smooth, curved animation.

Note that there is some code duplication in the two links above. The code at the first link controls map movements for landmarks; the second for places. It would be fine to experiment with only one of these code blocks, and in any case we are planning to reduce the code duplication via #527 soon.

futuresoup commented

This is a guess, but I'm thinking the flyTo method will provide the smoothest flyover animation if it's used with vector tiles, because the browser can draw and render in a more 3D like space, unlike raster tiles which are flat raster images served in a blocky pancake fashion.

So whoever works on this, keep in mind to test with both our vector and raster basemap layers

modulitos commented

Unfortunately, I think CartoDB is holding us back (See #753).

It looks like cartodb.js has support for Leaflet 1.x coming on their v4 release:

And here are some other related PR's/issues for Leaflet 1.x:

But they all seem to be on the v4 branch, and I'm not sure when that's going to be released. So I see a couple options here:

  • We can wait until they release v4, and start using Leaflet 1.x at that time. This might be the most time efficient option for the moment.

  • Maybe there is a way we can use cartodb.js v4 before it's been released? The project seems to be actively developed, so it might be worth filing an issue asking them the best way to do that. But if their v4 is unstable, it might not be worth the trouble.

  • Perhaps this should be it's own issue, but we can consider replacing cartodb.js with an alternative solution that builds custom map tiles. This will require some extra work, and it's not an urgent issue, but here are some problems we are having with cartodb.js:

    • It doesn't support Leaflet 1.x (yet) - althought their v4 release should add this support
    • It slows down our site (although this may be improved in v4)
    • It interferes with other features - like our pointer icon (#273) and the legend (#327)
    • The workflow isn't ideal. We are juggling multiple free-tier accounts and don't have much control over our data
    • The styling workflow isn't user-friendly. There are better style editors out there (see the OpenMapTiles option below)

    And here are some solutions, where we can host our own tile server and replace our reliance on CartoDB:

goldpbear commented

Leaflet 1.0.x changed the way getLatLngs() returns arrays of coordinates from polygon geometry. This creates a breaking change for us in geometry-editor-view.js. See this commit for the diff between Leaflet 1.0.3 (old version) and 0.7.5 (new version).

Making a note of this here so we don't forget about it if/when we re-upgrade to 1.0.x.