Leveraging the HTML5 Canvas/Javascript for web and mobile maps with CartoVista
ISBN 978-85-88783-11-9
Authors
1Bouchard, D.
1DBX GEOMATICS INC. Email: dbouchard@dbxgeomatics.com
Abstract
ABSTRACT Developing cross-browser mapping applications is a challenge that requires good design and a sound understanding of browser and mobile application capabilities. The HTML5 Canvas and Javascript open a new world of possibilities for creating interactive map content. However if you wish to interact with a large number of features, your map rendering has to be designed with care! The CartoVista5 engine has been developed with advanced canvas rendering techniques, for both vector and raster data. With the proliferation of smartphones and tablets, HTML5 is an opportunity to deliver the richness of an immersive mapping experience that can be similar to what we are used to on the desktop. Introduction HTML5 includes an exciting new element—the CANVAS element. This element has a lot of uses, but in order to use it you need to learn some JavaScript as well as HTML and sometimes CSS. This makes the CANVAS element a bit daunting for many cartographers, and in fact, most cartographers will probably ignore the CANVAS element until there are reliable tools to create CANVAS animations and games without knowing JavaScript at all. The HTML5 CANVAS element can be used for a lot of things that previously you had to use an embedded application like Flash to generate: • Dynamic graphics • Online and offline maps • Animations • Interactive video and audio • Games The Canvas Rendering Challenge Making your map rendering device-friendly and responsive is quite challenging when you take into consideration the following factors. Performance Smartphones and tablets have fewer hardware resources than desktop computers today—less RAM, CPU power, GPU resources, etc. In particular, this is an important factor to consider when working with complex vector map features and content (e.g. a large layer of polygons). Screen size As the mobile applications continue to proliferate and reach more devices, developers need to adopt techniques for authoring with multiple screen sizes and resolutions in mind. Interaction In addition to the web interface, the application UI should anticipate touch-based input, accelerometers, screen orientation, etc. and shouldn't assume the presence of a physical keyboard or mouse. Advanced HTML5 Rendering / User Experience Several techniques in HTML5 / Javascript can be used by cartographers and developers to author content that will render properly on the web or any device, regardless of its screen resolution and pixel density. Javascript and HTML5 technologies offer a very rich set of functionality to help developer design their maps and UI graphics with ease. Rich User Experience with high quality rendering The presentation introduces the design patterns differences between mobile and browser-based applications while reviewing the challenges to create a seamless, predictable experience between the end users and the cartographic content. This paper provides concrete map examples of how the HTML5 Canvas was used in CartoVista for web and mobile maps, combining a rich user experience with high quality rendering: • Canvas Support in Today’s Browsers • Web Interface Vs Mobile Interface • Vector Data Content Optimizations • Spatial Indexing • HTML5 Data Interactions (Charts, data tables, legends, etc.) • Raster Data (Numeric and Classified) • Advanced rendering (Blend Modes, opacity, filter effects, drop shadow, glow effect, etc.) This presentation will walk through the steps necessary to eliminate the various potential points of variation so that you can create a mapping experience with HTML5 that is similar to the desktop, while leveraging the innovative capabilities of mobile devices. The maps and code samples in this presentation will help developers and cartographers understand how to build map applications that are better-suited for mobile and tablet devices while leveraging the benefits of today’s browsers graphic capabilities.
Keywords
HTML5; Canvas; Interactive Map