11–20 of 26 posts
Are canvas tiles more performant than one giant canvas sized to fit within a user's browser?
This is awesome, thanks for sharing! One question, on your previous version you had a ton of big purple timeline bars. Were those mostly "recalculate styles" or "update layer trees"? I'm having similar issues and I'm wondering if canvas may be a better decision than DOM.
Really great to have a case study like this for knowing when to use SVG/DOM or Canvas. I knew that Canvas can easily be redrawn 60fps for things like games (though it may overheat your laptop). Didn't know about using them as shiftable tiles though. What a great way to minimize redraw! Is this how most online maps work?
I was playing with the demo linked elsewhere in this thread [demo], and noticed a bit of a hiccup when scrolling past multiple zoom levels. It seems like there'd be a bit of a pause as the tiles were rendered at each successive zoom level. It may be worthwhile to debounce the scroll event listeners with a small timeout, so you can catch multiple successive scroll events and zoom straight to the target zoom level without having to render each step along the way.
Quick video of the stuttering: http://gfycat.com/BrilliantActiveAfghanhound
[demo] https://seatgeek.com/senators-at-flyers-tickets/4-11-2015-ph...
Bit off-topic, but do any of the readers of this topic know of a good combination of an open source (backend) tile server and a (frontend) JS zooming library for dealing with large high-resolution images, of say, something like old paintings?
Like this? http://www.thekremercollection.com/art/artists/Pieter-Codde/... It's actually based on Google Maps API, which isn't open source, but OpenLayers has equivalent functionality though I find it less fluid and slower...
GetTileFileName(zoom, x, y) {
return "/MonaLisa/tiles/z" + zoom + "lon" + x + "lat" + y + ".png";
}This is an awesome writeup! I was playing with the demo linked elsewhere in this thread [demo], and noticed a bit of a hiccup when scrolling past multiple zoom levels. It seems like there'd be a bit of a pause as the tiles were rendered at each successive zoom level. It may be worthwhile to debounce the scroll event listeners with a small timeout, so you can catch multiple successive scroll events and zoom straight t…
This has been an issue we have struggled with for a while. What you are suggesting is basically how Leaflet typically handles scroll events. The issue, however, primarily lies with the Apple trackpad. Basically the Apple trackpad "fakes" inertial scrolling. When using the base Leaflet implementation, we would zoom straight to the target zoom level (great), but then the tail end of the intertial zoom would force it to zoom once more (bad).
For a normal map of the world that has like 20 or 30 zoom levels, accidentally missing the target zoom by a level does not matter too much. However, on our maps, with only a couple zoom levels, missing your target zoom level really hinders usability. Therefore we debounce the scroll events to keep zooming to a level at a time. So its not a matter of tile rendering blocking zoom, but rather a purposeful, if imperfect, decision.
This is by no means the right solution and we are keeping our eyes on the new Leaflet release that may help solve this. Great catch, btw.
If you are really interested, here is a thread on exactly this issue: https://github.com/Leaflet/Leaflet/issues/2154
This is an awesome writeup! I was playing with the demo linked elsewhere in this thread [demo], and noticed a bit of a hiccup when scrolling past multiple zoom levels. It seems like there'd be a bit of a pause as the tiles were rendered at each successive zoom level. It may be worthwhile to debounce the scroll event listeners with a small timeout, so you can catch multiple successive scroll events and zoom straight t…
Thanks! This has been an issue we have struggled with for a while. What you are suggesting is basically how Leaflet typically handles scroll events. The issue, however, primarily lies with the Apple trackpad. Basically the Apple trackpad "fakes" inertial scrolling. When using the base Leaflet implementation, we would zoom straight to the target zoom level (great), but then the tail end of the intertial zoom would for…
Earlier quoted context omitted.
Thanks! This has been an issue we have struggled with for a while. What you are suggesting is basically how Leaflet typically handles scroll events. The issue, however, primarily lies with the Apple trackpad. Basically the Apple trackpad "fakes" inertial scrolling. When using the base Leaflet implementation, we would zoom straight to the target zoom level (great), but then the tail end of the intertial zoom would for…
Thanks for the thread. I figured mapping continuous input to discrete levels was more difficult than I was making it seem (especially with the fragmented way the web presents these devices).
Bit off-topic, but do any of the readers of this topic know of a good combination of an open source (backend) tile server and a (frontend) JS zooming library for dealing with large high-resolution images, of say, something like old paintings?
Tiles are on (ahem) dropbox at moment - but S3 / local server would be same. Tiles were generated with TileMill.
@Developers, I'm sorry if I missed it in the article, but can I see the online demo somewhere? I went to your website and maps but still couldn't get to it. Thanks.
https://seatgeek.com/senators-at-flyers-tickets/4-11-2015-ph...