Live data from Hacker News

High Performance Map Interactions Using HTML5 Canvas

chairnerd.seatgeek.com

21–26 of 26 posts

Re: High Performance Map Interactions Using HTML5 Canvas

#21
post #20

Earlier quoted context omitted.

https://seatgeek.com/senators-at-flyers-tickets/4-11-2015-ph...

Tiles are good and responsive, but you may want to add a shadow behind the text "Section N, Row M" because some arena pictures are largely white!

Any chance we could get a screenshot of where you are seeing this? Or at least a venue/section? Thanks!

Re: High Performance Map Interactions Using HTML5 Canvas

#22
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?

there is also http://hugepic.io/ as well as the related github repo at https://github.com/peterbe/tiler

Re: High Performance Map Interactions Using HTML5 Canvas

#23
Canvas tiles are exactly the approach we took in making the ChromoZoom genome browser, where we wanted people to smoothly zoom in on client drawn data at 60fps through 10 orders of magnitude: http://chromozoom.org (Note that it's only used for user provided data, as the default tracks are prerendered, like Google maps v1.)

I highly recommend this hybrid approach of 10-20 canvases plus a sprinkling of HTML elements for anybody looking to maximize responsiveness in this type of UI. In our tests, SVG and HTML start stuttering in draggable layers around tens of thousands of elements (easier to hit than you'd think). We actually decided to do mouseover calculations ourselves, in a pixel map within a mousemove handler, since having separate elements to trigger the mouseover was too expensive.

Re: High Performance Map Interactions Using HTML5 Canvas

#25
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?

Cool, thanks for all the recommendations people!
Post reply on HN