Loading…

Flash Player 9 (or above) is needed to view presentations.
We have detected that you do not have it on your computer. To install it, go here.

Like this presentation? Why not share!

Like this? Share it with your network

Share
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
658
On Slideshare
658
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
4
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />

Transcript

  • 1. HTML5 Mapping and Tiling Library
  • 2. 2 Before We Start • Ask questions. Whenever you want to. I’m happy to talk about anything - mapping, mobile mapping, HTML5 canvas (and other bits), JS performance, why squirrels are so cute, etc. • I’m not an expert on anything, especially Javascript. • I’m more stubborn than I am intelligent.
  • 3. What is Tile5?
  • 4. 4 HTML5 Mapping Library • “It’s a HTML5 javascript mapping library - plus it does more generic tiling interfaces” • “Um, ok, why on earth have you built another mapping library - we have plenty...” • “Fair, point, let’s talk about the why first”
  • 5. Why Tile5?
  • 6. 6 Mapping for Mobile Devices • Do we really need another mapping library - there are already so many... • Currently, only Google’s HTML API caters for mobile touch events. So if you can use GMaps no, but not everyone chooses a Google solution. • Many map providers, but all maintain their own proprietary APIs (Native, JS, etc).
  • 7. 7 Mapping for Mobile Devices • What about OpenLayers (http://openlayers.org/)? • Designers vs the Engineers perspective - consumers have come to appreciate native interactions on mobile devices. • As Coke consider their competition to be water, Tile5’s competition is native mapping interfaces on mobile, not simply other javascript libraries.
  • 8. How is it Built?
  • 9. 9 HTML5 using Canvas • Canvas’ feature set is excellent, albeit a little complicated. • Quite a few JS libraries available that abstract and simplify operations - fabric.js is a nice one. • No need for browser plugins - awesome. • Canvas’ speed is ok, but there are some things
  • 10. 10 T5.View Layering • Tile5 implements a layering system much like is implemented in CSS. • The View and ViewLayer are used extensively to build mapping interfaces (amongst other things)
  • 11. 11 Canvas Performance Notes • Only IE9 and FF4 implement hardware acceleration for canvas, which means you have to be conservative. • Best thing you can do be conservative with your draw code. Watch out for clearRect and drawImage on large buffers. • Chrome’s “Speed Tracer” is awesome for watching performance. I rewrote Tile5 draw code a few times.
  • 12. 12 The Cost of Performance • Optimising for performance has meant support for opacity in layers is limited, but I’m working on that by using clipping regions. • It hurts your brain.
  • 13. 13 More on JS Performance • Need to rethink strict OOP principles of design, i.e. an object has both state and methods. Methods on JS objects = memory bloat. This hurts on Mobile Safari due to 10M memory cap. • Consider “Eteration” as an alternative to Iteration due ensure nice non-blocking interfaces. Mobile javascript performance make this necessary. > Get an iPhone 3G (arghhh!!!)
  • 14. 14 JS Performance Future It will get faster ! So fast now = great soon... Don’t forget readability though
  • 15. What’s Next?
  • 16. 16 Development Roadmap • Implement GeoJSON (and other vector) overlays • Play with heatmaps. • Investigate “baking tiles” on the client to further optimise performance and do other interesting things (such as crowd tile rendering). • Consider how to do all of the above efficiently and in a JS performance friendly way.
  • 17. 17 Development Roadmap • Get around to building b64proxy.appspot.com to serve base64 data strings for images. This should allow using caching tiles via localStorage. • Check that everything is abstract as it can be. For example, adding an annotation to a T5.View rather than a T5.Map. • Improve Documentation (sorry about that) • More sample code • Build applications based on Tile5 that I think are useful.
  • 18. 18 Development Roadmap • Break out some of the most useful stuff into “COGs”: http:// github.com/sidelab/cog • Observable and Configurable Patterns (done) • Touch (done) • Image Loading • Device detection (it’s a bit naughty, but necessary as feature detection isn’t completely reliable) • Write some friendly build helpers, looking at Juicer: http://github.com/cjohansen/juicer
  • 19. Any Questions?