High Performance Map Interactions Using HTML5 Canvas

#1

Post by efkv » Tue, Aug 19, 2014, 3:43 PM UTC

High Performance Map Interactions Using HTML5 Canvas
chairnerd.seatgeek.com

Re: High Performance Map Interactions Using HTML5 Canvas

#2

Post by csytan » Tue, Aug 19, 2014, 5:02 PM UTC

Great write up! I've been working with maps lately and this was a very interesting read.

I've tried the Leaflet SVG layer and it can become quite slow when loaded with thousands of points.

Another approach would be to use a custom SVG layer overlay using CSS Transforms. I've used an SVG overlay with D3 and it was much faster at panning and zooming. It could handle ~30k points (and lots of lines) without a problem on my laptop.

Edit + an example: http://i.imgur.com/ey8YDWJ.jpg

Re: High Performance Map Interactions Using HTML5 Canvas

#3

Post by piyush_soni » Tue, Aug 19, 2014, 5:03 PM UTC

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

Re: High Performance Map Interactions Using HTML5 Canvas

#4

Post by dallasgutauckis » Tue, Aug 19, 2014, 5:05 PM UTC

piyush_soni wrote: post #3

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

Re: High Performance Map Interactions Using HTML5 Canvas

#5

Post by coderzach » Tue, Aug 19, 2014, 6:02 PM UTC

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.

Re: High Performance Map Interactions Using HTML5 Canvas

#6

Post by dmix » Tue, Aug 19, 2014, 6:17 PM UTC

This is great. I use Seatgeek 100% because of their excellent design work.

Re: High Performance Map Interactions Using HTML5 Canvas

#7

Post by undershirt » Tue, Aug 19, 2014, 6:31 PM UTC

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?

Re: High Performance Map Interactions Using HTML5 Canvas

#8

Post by huskyr » Tue, Aug 19, 2014, 6:34 PM UTC

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?

Re: High Performance Map Interactions Using HTML5 Canvas

#9

Post by albertoleal » Tue, Aug 19, 2014, 6:42 PM UTC

Are canvas tiles more performant than one giant canvas sized to fit within a user's browser?

Re: High Performance Map Interactions Using HTML5 Canvas

#10

Post by hobbes78 » Tue, Aug 19, 2014, 6:55 PM UTC

huskyr wrote: post #8

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