At GIS Cloud, we were always inspired to push online mapping beyond it’s borders. When we started building GIS Cloud a few years ago our vision was, and still is, to move the entire GIS industry into a browser i.e. into the Cloud.
Because custom maps can be quite complex and difficult to handle we had to build certain technologies from scratch. Among those is our own vector and raster map engine. At first, we used Adobe Flash as the output format. Flash delivered great performance, but had two major problems: it’s not a web standard and it isn’t properly supported on all devices. So, today with browsers being more than capable of handling HTML5 graphics we decided to take our map engine to the next level.
As of now, HTML5 will be the default GIS Cloud map engine, through which we plan to deliver the full GIS experience right in your browser. Our biggest challenge and success was to leverage HTML5 to handle “Big Data”!
Even if your map has thousands or millions of features, you can now experience it with high user experience right in your browser!
Who likes caching map tiles?
One of the most common tasks you need to perform when delivering a map project on the web is caching your map tiles in advance. With raster mapping technologies this is a crucial step because you definitely don’t want to deliver a map that is loading so slowly it makes your solution unusable. With large vector datasets this process can be a long running task going on for days or even weeks. When you need to work with your map dynamically like in GIS this problem is even more pronounced; if you are styling your map you want to see the result immediately, just as you would on your desktop GIS.
The solution to the above problem is rendering maps through vectors, and this is where our HTML5 Canvas viewer comes in. It’s designed to render vector graphics in real-time and enable full map interactivity. Data is retrieved from the server as a vector and renders as a vector!
HTML5 Canvas – ideal for map rendering
HTML5 is great for mapping not only because it can render maps very quickly, but also because it is a standard. It works on the desktop, on the web, on smartphones and on tablets which means your GIS can work on those devices as well! No need to build native apps for each of those platforms, with HTML5 you get high performance right from the browser.
One of the biggest benefits of vector mapping is interactivity. The map is not just a flat raster anymore, it’s a fully interactive surface. Each object can be clicked and styled dynamically, and gives hover feedback!
HTML5 in practice
We built our HTML5 canvas map engine on top of CloudMade’s Leaflet, a modern, lightweight JavaScript library that we extended a bit to support all map projections and make it more suitable for GIS.
To show the power of HTML5 Canvas we embedded a few GIS Cloud maps below. You can also go to the GIS Cloud application and browse some maps or build your own for free.
UK map, created from Open Street Map data, showing how HTML5 handles more than 2.000.000 features:
The next map shows how 1.000.000 points can be rendered in real time:
Styled vector street map showing the State of New York:
link to the full map
A dataset with more than 300.000 polygons:
It’s possible to render imagery as well. Below we have a map made out of several MrSID images, stitched together:
link to the full map
The biggest issue in GIS throughout the years has been bad user experience. If you were not a professional user using such a system was often not easy. Finally with HTML5 and the next generation of visualization technologies we are going to deliver a new level of GIS user experience. By making GIS attractive and easy to use it can become a much more valuable tool in organizations than it has been until now.
With HTML5, we can now finally visualize the processing strength and scalability the cloud provides, supporting large datasets while maintaining a great user experience. There are now no more barriers to moving all GIS into the Cloud, making communication and data sharing easy which will lead to better decisions, and help move your business forward!
Curious about how HTML5 can handle your data? Just sign in here.