Let's start by looking at our pregenerated code in index.html in the www directory of our foo project:
<html>
<head>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="msapplication-tap-highlight" content="no" />
<!-- WARNING: for iOS 7, remove the width=device-width and height=device-height attributes. See https://issues.apache.org/jira/browse/CB-4323 -->
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
<link rel="stylesheet" type="text/css" href="css/index.css" />
<title>Hello World</title>
</head>
<body>
<div class="app">
<h1>Apache Cordova</h1>
<div id="deviceready" class="blink">
<p class="event listening">Connecting to Device</p>
<p class="event received">Device is Ready</p>
</div>
</div>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="js/index.js"></script>
</body>
</html>As you can see, this is very simple code. We see a reference to css/index.css, cordova.js, and js/index.js.
Let's now add a new file to our www directory and call it indexmap.html. Next, at the top level of our foo directory (C:Cordova_ripplefoo), you will see a file named config.xml. Open this file and set indexmap.html as the page where you want the application to launch:
<content src="indexmap.html" />
Below is our new indexmap.html file:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"/>
<title>Basic Map</title>
<style type="text/css">
body, html {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
#mapDiv {
height: 100%;
width: 100%;
margin: 0px;
}
</style>
</head>
<body>
<div id="mapDiv"></div>
<!-- Load the library and CSS references for ArcGIS API for JavaScript -->
<link rel="stylesheet" type="text/css" href="http://js.arcgis.com/3.8/js/esri/css/esri.css">
<script src="http://js.arcgis.com/3.8compact"></script>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript">
var app = {
// Application Constructor
initialize: function() {
this.bindEvents();
},
// Bind Event Listeners
//
// Bind any events that are required on startup. Common events are:
// 'load', 'deviceready', 'offline', and 'online'.
bindEvents: function() {
document.addEventListener('deviceready', this.onDeviceReady, false);
},
// deviceready Event Handler
//
// The scope of 'this' is the event. In order to call the 'receivedEvent'
// function, we must explicity call 'app.receivedEvent(...);'
onDeviceReady: function() {
app.receivedEvent('deviceready'),
},
// Update DOM on a Received Event
receivedEvent: function(id) {
console.log('Cordova device ready event: ' + id);
require(["esri/map"],
function(Map) {
// Create map
var map = new Map("mapDiv",{
basemap: "satellite",
center: [-122.69, 45.52],
zoom: 3
});
}
);
}
};
app.initialize();
</script>
</body>
</html>You will notice that we have the ArcGIS style sheet and library references that we used in earlier chapters. Overall, this code sample looks a little different to our earlier examples. Here, we have an initialization function that is called using app.initialize() and we are making use of binding. In simple terms, we have set up a listener and functions for a deviceready event. Ultimately, we load a satellite base map when the device is ready. After building this code, re-signing it, and pushing it to our device, we should see the image in the following screenshot:
ArcGIS Android app on a device
There you have it! Your first installed hybrid mobile ArcGIS application.
We have provided additional code examples based on the preceding code example that show GPS, a web map, and jQuery respectively. These code examples can be found at http://webmapsolutions.com/book/mobilearcgis/chapter7/.
Note that the provided examples will not actually render in a browser. After you load the page in your browser, right-click and select the source code. Copy this code to your own local version and build it as we did in the preceding code.
Note
Andy Gup, an Esri technical evangelist, has provided some excellent ArcGIS resources in GitHub at https://github.com/Esri/quickstart-map-phonegap.
We have leveraged some of Andy's code samples as our additional examples.
Before we finish this chapter, let's briefly discuss plugins. They provide advanced features and simpler ways to compile our final hybrid mobile ArcGIS app for distribution.