We've covered mobile development and how it is different from traditional web development. We also looked at some of the key JavaScript frameworks and toolkits. It's now time to build our first mobile ArcGIS application.
In this chapter, we will cover the following topics:
- Development and coding review
- The ArcGIS API for JavaScript API
- ArcGIS map layers
- Listening for map events
- JavaScript Geolocation API
Before we move to the meat of this chapter, it is worth quickly reviewing some basic web development concepts and approaches. Specifically, let's consider the following:
- JavaScript Development Tools
- WebKit browsers
- HTML5, CSS3, and the viewport
- Web server setup
Often, when developers embark on a new programming project, they turn to their favorite integrated development environment or IDE. There are many IDEs in the JavaScript world; these include intelliJ IDEA, Aptana, WebStorm, and Visual Studio. One of the beauties of JavaScript development is that any simple text editor will suffice. Notepad++ is a free and excellent source code editor for Windows. Chrome's DevTools is also very popular with JavaScript developers. This is a set of web authoring and debugging tools that is built into Google Chrome. To access Chrome's DevTools, download the current version of the Chrome browser.
Note
Chrome can be downloaded from https://www.google.com/chrome/.
As shown in following screenshot, clicking on the menu item in the top-right corner of the browser and navigating to More Tools|Developer tools will open DevTools (Shortcuts: Ctrl + Shift + I or F12):
Opening Chrome's DevTools
Chrome's DevTools provides many debugging options that include breakpoints and object inspection. A new super useful feature is the device mode and mobile emulator. Using this option, you can test your mobile application on different simulated devices. Another very useful part of Chrome DevTools is remote debugging. This allows developers to debug live content on an Android device from any development machine.
Note
Find out more about remote debugging on Android using Chrome at https://developer.chrome.com/devtools/docs/remote-debugging.
The following screenshot illustrates debugging options in Chrome's DevTools to Mobile Emulator:
Chrome's DevTools to Mobile Emulator
Note
It is worth getting to know Chrome's DevTools better. There are a plethora of tools provided to help mobile web developers. You can find out more at https://developer.chrome.com/devtools.
Next, let's discuss in brief the building blocks of web application developmentâHTML5, CSS3, and the viewport.
Note
For a deep dive into web ArcGIS development, see Eric Pimpler's book Building Web and Mobile ArcGIS Server Applications with JavaScript, available at https://www.packtpub.com/hardware-and-creative/building-web-and-mobile-arcgis-server-applications-javascript.
The base of all web applications is HTML. The new HTML standard is HTML5. This new specification defines how the tags and angle brackets, which make up HTML, interact with JavaScript through the Document Object Model (DOM). There are a number of JavaScript APIs that are part of the HTML5 standard and these include the Geolocation API. CSS3 is the new cascading stylesheet standard for styling web applications. As we will discuss later, many mobile web browsers support these new standards. Together, HTML5, JavaScript, and CSS3 will help to increase the flexibility and performance of your mobile mapping applications.
Now we will talk about the viewport. A browser identifies a page using the viewport: this is the viewable area of the canvas. The viewport controls how much a browser zooms into a page. On a mobile device, the viewport can be larger or smaller than the viewable area of the screen. This can cause problems with map layout and orientation change. There are some recommended settings that are worth mentioning and these are as follows:
<head> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> </head>
The width attribute sets the width of the canvas to the width of the device's screen. The initial-scale property controls the zoom level when the page is first loaded. By default the initial-scale is 1.0. A scale of 1.0 means that no zoom is applied to the view. The maximum-scale property controls how the users are allowed to zoom in or out of the page. Viewport zooming can be prevented by setting the user-scalable property to no, as we have done in this case. This way only the map will zoom with a finger pinch, for example, and not the full screen.
Not all browsers are built equally. Before we move to the basics of web development, let's consider their differences and the ever more popular WebKit engine.
One of the more challenging aspects of web development is cross-browser compatibility issues. What works and looks good in one browser might not look good in another. As we mentioned earlier, some JavaScript frameworks help but do not remove all of these challenges. Web standards are applied differently between browsers.
WebKit is one of the most standards-compliant browser rendering engines that is currently available. A rendering engine is the engine that a browser uses to render or read and display the HTML in a web page. Webkit fully supports the new HTML and CSS standards: HTML5, JavaScript, and CSS3. The good news is that most mobile browsers use WebKit as their rendering engine. One of the exceptions is Windows Internet Explorer, which uses the Trident engine. The large number of standards-compliant browsers means that cross-browser compatibility issues are less important now than they were in the past, particularly to mobile web developers. However, they still cannot be ignored.
Note
Unfortunately, the Android OS continues to be problematic for debugging because the default browser used isn't consistent. You can find more information about the Android OS at http://slides.com/html5test/the-android-browser#/.
Before we step into coding, let's cover one other area: mirroring the environment in which your mobile application will ultimately reside.