NZQuake going mobile with Grails and jQuery Mobile
Introduction
NZQuake Mobile built with Grails and jQuery Mobile is now available at http://m.nzquake.co.nz.
The application was developed to present information relating to New Zealand earthquakes on smart phones and mobile devices in a clear and concise manner by combining QuakeML with Google Maps using HTML5.
For the record, when excluding unit test code from the grails stats output there are a total of 242 lines of server-side code for the application. That should cut down on maintenance effort giving more time to work on other things.
I hope you find the application informative.
jQuery Mobile with Google Maps
Introduction
jQuery Mobile is an HTML-5 user interface framework for smartphones and mobile devices. Having recently developed NZQuake using Grails, I wanted to see how rapidly a mobile version of the application could be created without rolling a native iOS or Android application. At this point in time, I’m willing to forgo the benefits of native applications on mobile devices for the sake of simplicity and meeting self-imposed deadlines.
Given that a key feature of NZQuake is integration with Google Maps v3 and QuakeML it was essential that the mobile version of the application also offered this functionality. I decided that there would be a list view and details view for earthquake related information to convey the information as succinctly as possible. This article focuses on the details view which contains the Google Map and provides JavaScript and CSS code to render a Google Map using jQuery Mobile.
Visit the live NZQuake Mobile site at http://m.nzquake.co.nz to see the code from this article working in action.
CSS Code
The following is contained in mobile.css
html, body {
font-size: .9em;
font-family: Arial, Helvetica, Sans-serif;
background: #666666;
padding: 0px;
}
.details-page {
width: 100%;
height: 100%;
}
#map_content {
padding: 0px;
width: 100%;
height: 100%;
overflow: hidden;
}
#map_canvas {
width: 100%;
height: 100%;
padding: 0;
text-shadow: none;
}
The map_canvas div and the containing map_content div must use 100% of the screen height and width. Due to the fact that jQuery Mobile uses text shadow for fonts, I have deliberately removed the text shadow from the map_canvas to enhance readability for text rendered on the map. Specifying overflow: hidden; ensures that no scrollbars are drawn in the viewport.
JavaScript Code
The following is contained in mobile.js
/*!
NZQuake (c) Copyright Greg Smith
*/
var map;
function createQuakeEventMarker(quakeEventLatlng) {
return new google.maps.Marker({position: quakeEventLatlng, map: map});
}
function setupMap(lat, lng, mapZoom, showOverviewControl) {
var mapLatlng = new google.maps.LatLng(lat, lng);
var myOptions = {
zoom: mapZoom,
center: mapLatlng,
overviewMapControl: showOverviewControl,
zoomControl: true,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.SMALL,
position: google.maps.ControlPosition.LEFT_TOP
},
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
}
The zoom control is configured to use small icons that will fit within the viewport of a mobile device.
HTML Markup
The HMTL code for the detail page is vanilla markup with a few attributes specific to jQuery Mobile. Items of significance have been highlighted and explained in more detail.
<!DOCTYPE html>
<html>
<head>
<title>Details | ComDynamics NZQuake</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
<link rel="stylesheet" href="/nzquake/css/mobile.css" />
<meta name="layout" content="mobile"/>
</head>
<body>
<div id="details" data-role="page" class="details-page">
<div data-role="header" data-theme="a">
<h3>NZQuake Details</h3>
<a href="/nzquake/history" data-icon="home" data-iconpos="notext" data-direction="reverse" class="ui-btn-right jqm-home" data-ajax="false">Home</a>
</div>
<div data-role="content" id="map_content" data-theme="a">
<div id="map_content">
<div id="map_canvas"></div>
</div>
</div>
</div>
<script type="text/javascript" src="/nzquake/js/mobile.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
<script type="text/javascript">
function initialize() {
setupMap(-43.60132, 172.11984, 11, true);
var quakeEventLatlng = new google.maps.LatLng(-43.601, 172.12);
var marker = createQuakeEventMarker(quakeEventLatlng)
marker.setAnimation(google.maps.Animation.DROP)
}
// Initialize the map when the jQuery Mobile pageshow event is triggered
$('.details-page').live("pageshow", function() {
if (map == null) {
initialize();
}
});
</script>
</body>
</html>
Line 13 specifies that the page class is called “details-page” which allows the binding of the jQuery Mobile pageshow event to the details page.
Line 41 is the jQuery Mobile handler triggered for a pageshow event.
Important: Due to the way jQuery Mobile injects values into the DOM tree, line 16 has uses data-ajax="false" for navigating back to the list view. The navigation link from the list view to the details view also uses data-ajax="false" to ensure the map initialization JavaScript function is called when the pageshow event is triggered. The implications of this are that jQuery Mobile page transitions are not used when navigating between pages however this ensures the map is correctly drawn each time the page is loaded.
Screenshot
On an iPhone 4 the page renders showing map zoom controls positioned on the top left as specified in the JavaScript code. The map is fully scrollable within the viewport.
Conclusion
When using a RAD full-stack web framework like Grails or Rails, it is possible to develop a Google Maps and jQuery Mobile site with minimal effort for use on a variety of smartphones and mobile devices. Visit the live NZQuake Mobile site at http://m.nzquake.co.nz to see the code from this article working in action.
