GIS Cloud Starts HTML5 Mapping Revolution!

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:

link to the full map


The next map shows how 1.000.000 points can be rendered in real time:

link to the full map


Styled vector street map showing the State of New York:

link to the full map


A dataset with more than 300.000 polygons:

link to the full map


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.

 


25 Responses to “GIS Cloud Starts HTML5 Mapping Revolution!”

  1. Anderw Zolnai says:

    2nd image doesn’t post – good piece otherwise.

  2. Oliver Morris says:

    Great work, now if only everyone uses an HTML 5 compatible browser this will really come into its own.

  3. admin says:

    Thank you.

    Today the only browser that doesn’t support this is IE lesser than version 9. So that shouldn’t be such a big issue.

    However for users that use browsers that aren’t compatible with HTML5 we have made automated transition to our flash viewer. So they will be able to use GIS Cloud without any problem.

  4. Pedro Mendes says:

    Really nice job!
    2.000.000 features… Never thought I could see something like this!

    Will the the enhancements done in the Leaflet API contributed back to the project?

  5. admin says:

    Thanks!

    Actually all our Leaflet enchantments are contributed back. Some of them are already pulled in their master and the rest of them are here: https://github.com/giscloud/Leaflet

    Although, the back-end map engine that does the heavy lifting is, for now, closed.

  6. Geoff Dutton says:

    The performance is impressive (but the NY State map won’t show attributes). Your main difficulty is that feature-rich maps have to be GENERALIZED appropriately to the map scale, which your solution is not doing. This is even more imperative if features are labeled (BTW, where are the labels?) or compete for space with other types of features. You need either a multi-scale database or on-the-fly feature selection and feature simplification. You can also do feature typification, but this is a much more difficult task to automate. This is good work but it’s way less than half done.

  7. admin says:

    The examples above are mostly there to show off the performance itself. There is not much real world use for a million features of the same layer shown on a map. Take a peek at this map by the Ohio University. http://www.giscloud.com/map/17010/ohio-universitybeta

    The feature simplification is done on the fly.

  8. Geoff Dutton says:

    Thanks for making that campus map available. It works pretty well and I rummaged around in it for half an hour. Allow me to share some observations.

    1. I like the interactive legend and the attributes displays.
    2. I see generalization by selection for place names (but not for their symbology)
    3. I cannot detect any feature simplification. Either shape points are not being dropped at small scales or they are being culled at less than pixel size. I suspect the latter because indentations in buildings never go away, they just blur out. Shape simplification would eliminate those jags.
    4. The gray walking paths are always present even at scales where their shape cannot be perceived.
    5. Something like that is going on with the little green boxes North of Ping Center, which turn into blue streaks (in HTML5) and and blue squares (in normal mode), and never really vanish.
    6. At small scales I see many red dots peppered about. They go away at larger scales, counter-intuitively. What are they?

    When I tried to print the map to see it more crisply, I was asked to switch out of HTML5 mode. I did and got a crisper WYSIWYG rendering. However, I could find no way to revert back to HTML5 mode after that. What’s the secret?

    HTH.

  9. James Passmore says:

    Fastest, for me, on Linux Chromium and very impressive too, however in relation to other supported browsers.

    > Today the only browser that doesn’t support this is IE lesser than version 9. So that shouldn’t be such a big issue.

    I tried on Opera both Linux and Windows 7 and get no map.

    Opera/9.80 (X11; Linux x86_64; U; en-GB) Presto/2.9.168 Version/11.51

    and

    Opera/9.80 (Windows NT 6.1; U; Edition United States Local; en) Presto/2.9.168 Version/11.51

    Similarly I get no maps in IE9 unless I switch to compatibility mode, in which case I get some maps. I tried both 32 and 64 bit versions.

  10. admin says:

    James, thanks for the feedback and testing!

    Yeah Chrome/Linux is fastest of all. We’ll double check what is going on with Opera.

    IE9 should be ok, we’re forcing it to be in the “edge mode”. We’ll double check that as well.

    Thanks!

  11. admin says:

    Geoff,

    Sorry for missing out your comment. Things are quite hectic over here during the last few days..

    Features are being simplified at optimal rate. We’re trying to simplify and keep visual appearance on the level, so actually it’s very hard to notice it.

    Regarding 4,5: we cannot notice this issue. if possible could you please send us a screenshot?

    6: It’s part of simplification process, we’re working on resolving it.

    You can switch back to HTML5 mode by click on greyed HTML5 logo in the top-right corner of the map viewer.

  12. maxolasersquad says:

    This is sick. Completely amazing. I can’t wait to see more OSM uses out of this. It’s really be great to the next version of Potlatch use this technology so we can get away from Flash entirely.

  13. Andi says:

    How did you implement the hover effect, since this is no SVG?
    It reacts instantly, and I am interested to use this (in Leaflet) to highlight features and make them clickable to load more contextual information

  14. admin says:

    We implemented event handling ourself. Since we have all geometry loaded into JavaScript we can detect mouse events and react on them accordingly. A lot of “manual work”, but the only way to do it using Canvas. We plan to open source this code. Stay tuned.

  15. Andi says:

    So you haven’t added this to Leaflet?
    This is what KothicJS is still missing and which makes rendering maps on the client even better.
    I guess you used an RTree for bbox and additional geo checks since the hover highlighting is very fast.

  16. admin says:

    This code is outside of Leaflet so it’s possible to port it to Google Maps, OpenLayers, etc.

    We don’t use RTree on the client. We can do fast highlighting because of down-sampled geometry which is being loaded into the client through vector tiles.

  17. Dr. Christopher von Nagy says:

    Very impressive technology. I assume that maps exposed to the general user would allow for various layers to be made visible or invisible. Are moderated or unmoderated interactive conversations tied to an object possible?

  18. Dinesh says:

    Can you please explain more , how you guys highlight features and how loading the vector tiles on client side work ?

  19. Matt T says:

    Great on lines, points, imagery – how does it hand labeling on the fly (That’s 50% of cache time)

  20. admin says:

    Hi Matt,

    Labels can be rendered as a separate layer and also produced on the fly with placement optimization to avoid overlaps.

    As we are dealing with vector and attribute information on the client-side we are also exploring ways to generate and render labels entirely on the client-side from the geometry and attribute data.

  21. Mark B. says:

    This is a nice demonstration of your concept. You mention that you are supporting “Big data” how large are your datasets (MB, GB, TB) and how is your data being stored? Geospatial RDBMS, NoSql?

    Thanks, and again, nice work.

    -Mark

  22. admin says:

    Thanks Mark.

    We have an internal proprietary storage system that enables us to ready geospatial data efficiently. We’ve tested datasets with tens of millions vector features and probably we could render even larger ones.

  23. George says:

    Hello.Nice work admin.Can you please tell me where can i find a documentation of html5 and it’s tools for reach web mapping applications??Thank you very much.

  24. admin says:

    Hi!

    You can find out more about our API here: http://dev.giscloud.com/

  25. George says:

    Thank you very much.Greetings from Greece.

Leave a Reply