Developer’s Corner: HTML5 Mapping Evolution

By: Danny Bradshaw

It’s upon us.  The re-invention of the web using a little known technology called HTML5.  Well maybe it’s not that obscure, but there’s no doubt it’s upon us.  As a GIS technology firm, the question is how can we leverage these changes in technology to continue to push the envelope for our customers.

Since the adoption of mobile devices has exploded, there is a major advantage in having an application available to both desktop and mobile device markets.  This market is split between several platforms, however, and it is costly to develop native applications for several operating systems.  HTML5 solves this by being a common platform that is accessible for every mobile device with a modern web browser and an internet connection.

To better understand how and why HTML5 adds value in our modern technology stack, we need to understand what this new toolbox offers.  In particular, HTML5 adds many new syntactic features.  These include the new <video>, <audio> and <canvas> elements, as well as better support for SVG content, and MathML for mathematical formulas.  We’re also seeing increasing support for some very exciting new APIs:

  • Offline Web Applications
  • Document Editing
  • Drag-and-Drop
  • Microdata
  • Web Storage
  • Geolocation
  • File Writing
  • Web Sockets

Wow, we’ve only just begun talking about HTML5 capabilities and we’re already describing a GIS system.  Georeferenced videos, added to a sewer or gas network by dragging and dropping captured video files to be stored offline until you get back to the office.  Nice!

Not to mention the capabilities of the canvas.  This one should have all GIS professionals geeked out.  Why so?  Through the use of the canvas element, along with SVG graphics, we can comfortably render dynamic maps that have thousands or even millions of features with an excellent user experience.

Tiles Anyone?

One of the challenges of many of our customers is they have dynamically changing datasets that don’t fit well in a cached (tiled) workflow.  It’s no secret that cached tiles are the de-facto standard for delivering high performance web-content.  With raster mapping technologies, this is a crucial step otherwise the content (and the solutions built on that content) become unusable.  Unfortunately, with large vector datasets this process turns into a long running process that can delay the delivery of your content to those who need it.  Not to mention that moment of panic you’ll feel when you realize the tiles that you’ve been cranking on all week don’t have labels turned on for your waterways layer.

Not only is the HTML5 canvas a great mechanism for rendering thousands of dynamic vectors without even batting an eye, it’s also plugin-free, and more device agnostic than ever before.  For example, the other day I was browsing a dataset with half-a-million features on my iPad!  Not to mention making your data accessible to so many devices/users often justifies your investment in GIS in the first place or opens the possibility for crowdsourcing.

The Golden Trio

It’s not all fun and games however.  Leveraging the full capabilities of a HTML5 can’t be discussed without bringing along its trio, JavaScript and CSS(3).  Staying on the topic of the canvas, what separates this element from being, frankly, a very boring and inflexible element, is that the actual drawing and manipulation of this simple API is done through JavaScript.  This makes it possible to do a lot beyond simple drawings.  Fortunately, new JavaScript libraries and frameworks that ease development, or use optimized algorithms are freely available to the community and support the building of otherwise complex functionality.

It is also arguable that there is no goal in web design more satisfying than getting a beautiful and intuitive design to look exactly the same in every [currently] used browser.  Unfortunately, that goal is generally agreed to be almost impossible to attain (when speaking from HTML development). This is one of the clear advantages of plug-in based deployments (such as Adobe Flash or Microsoft Silverlight).    Some have even gone on record that perfect, cross browser compatibility is not necessary.

While I agree that creating a consistent experience for every user in every browser (putting aside mobile platforms for the moment) is never going to happen for every project, but I also believe that a near-exact cross-browser experience is attainable in many cases.  The continued adoption of consistent CSS in popular browsers has opened the doors to consistent experiences across each device.

You Chose, Wisely

In the end, your choice should ultimately be guided by your data and the goals of your delivery.  However, as HTML5 adoption continues to gain traction, big data (read GIS) applications will finally be able to deliver a new level of user experience.


Application Development for Mobile Web

As a recipient of the Spring 2010 GIS inc Research and Development award, I had the privilege to work on a solo project incorporating cutting edge technologies. During my brain storming process, I settled on probably the coolest segment of the development market at the moment: Mobile Applications.

My first goal setting out was to develop a cross-platform and location aware application for mobile devices. The mobile market is so small at the moment; I felt it would be wise to broaden the application to more than solely iPhone users or solely Android users. This was the greatest challenge.  The iPhone and Android SDKs are in very different languages and do not lend themselves to interpolarity. Read more of this post