Wednesday, 6 June 2012

Rolling your own MapGuide Mobile Viewer: Easy as 1-2-OpenLayers

Want to view your MapGuide maps on your tablet or mobile device? Don't have AIMS (and its mobile viewer extension)? No problem!

OpenLayers has made "rolling your own map viewer" a dead-simple affair. You can have something basic or you can go full blown framework with every bell and whistle under the sun. Fusion itself (and probably every web mapping framework out there for that matter) is built on top of OpenLayers, which tells you the pedigree and ubiquity of this JavaScript mapping library.

The release of OpenLayers 2.11 introduced support for HTML5 and mobile web browsers (which the soon-to-be-released 2.12 version improves upon). Put 2 and 2 together, and you'll find out that making your MapGuide maps available on Mobile Devices is actually pretty simple with OpenLayers.

How simple? Here's a mobile viewer I built using OpenLayers (2.12 RC) with Twitter Bootstrap and HTML5.

Devices shown: HP TouchPad (modded for Android 4.0), Samsung Galaxy Nexus (Left), Samsung Galaxy S2 (Middle), iPhone 3GS (Right)

In case the above photo's a bit blurry (sorry, all the good cameras were unavailable :D), here's a same viewer on a desktop machine.

This is the same viewer being shown here. A true testament to the power of OpenLayers with HTML5

The source for this mobile viewer can be found here. The viewer is very basic at the moment. Do not expect AJAX/Fusion viewer levels of features and functionality. Consider this a proof-of-concept or a starter template for your own mobile MapGuide viewer. And you know what? Someone else can take the glory and build this viewer to its full potential :-) For me this viewer was simply a learning exercise in HTML5 and Twitter Bootstrap

No comments: