Using esri ArcGIS in PhoneGap Applications

Posted by on

In this post I will describe how to get esri maps to work in PhoneGap applications.

ESRI is a company that provides a large variety of GIS (geographic information systems) services.  They have native controls for all major mobile devices.  However, they do not have clear instructions on how to use their services in PhoneGap applications.  The whole idea is to download all scripts and css ahead of time and include it in your package to save time, bandwidth and battery of your mobile device when your app is being run.

The steps to get all that to work are very simple.

Step 1

Download JavaScript SDK for ESRI on their download page.  make sure to pick ArcGIS API for JavaScript v3.4 API link, not SDK link, as you need the actual API, not samples.  After you download, you can unzip the content of the folder.

Step 2

Create new PhoneGap project.  I used Windows Phone SDK, but you can use Android or iPhone SDK just as well.  Add the content of ArcGIS api to js folder under www folder in your project.

PhoneGapEsri

I kept the name of the original folder, so you see 3.4compact folder under js.  You can just copy the same folder in Windows Explorer, right click on js folder in Visual Studio and click paste.

Step 3

Fix base root url folder for dojo that esri JavaScript API is using.  To do that open init.js file under 3.4compact folder.  Look for HOSTNAME_AND_PATH_TO_JSAPI words.  Replace the area around that word to look like the following – {async:0,baseUrl:”./js/3.4compact/js/dojo/dojo”,

Step 4

Update index.html to include css file and js files from www folder

<!DOCTYPE html>
<!--
       Licensed to the Apache Software Foundation (ASF) under one
       or more contributor license agreements.  See the NOTICE file
       distributed with this work for additional information
       regarding copyright ownership.  The ASF licenses this file
       to you under the Apache License, Version 2.0 (the
       "License"); you may not use this file except in compliance
       with the License.  You may obtain a copy of the License at

         http://www.apache.org/licenses/LICENSE-2.0

       Unless required by applicable law or agreed to in writing,
       software distributed under the License is distributed on an
       "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
       KIND, either express or implied.  See the License for the
       specific language governing permissions and limitations
       under the License.
-->
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta name="format-detection" content="telephone=no" />
    <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" />
    <link rel="stylesheet" href="js/3.4compact/js/esri/css/esri.css">
    <link rel="stylesheet" href="js/3.4compact/js/dojo/dijit/themes/claro/claro.css">
    <title>Hello esri</title>
</head>
<body class="claro">
    <div id="mapDiv"></div>
    <script src="js/3.4compact/init.js"></script>
    <script>
        dojo.require("esri.map");

        function init() {
            var map = new esri.Map("mapDiv", {
                center: [-83.5, 34.0],
                zoom: 12,
                basemap: "streets"
            });
        }
        dojo.ready(init);
    </script>
</body>
</html>

Step 5

Verify that everything works by running the app.  You can use Ripple or Phone Emulator to test – your choice.

Enjoy.

5 Comments

  2. Nicely done, this will let me work offline mode with cached titles. But remember, doing this will disable you from using online phonegap build. There is project size limit for upload. The esri 3.4compact folder itself is more than what phonegap build allows.

    Reply to this comment

  4. You have to replace
    baseUrl:(location.protocol === ‘file:’ ? ‘http:’ : location.protocol) + ‘//’ + “[HOSTNAME_AND_PATH_TO_JSAPI]js/dojo/dojo”
    with
    baseUrl:”./js/3.9compact/js/dojo/dojo”

    Make sure the version matches your API download.
    You must replace this in both the /3.9compact/init.js and in /3.9compact/js/dojo/dojo/dojo.js files

    Reply to this comment

Leave a Reply

Your email address will not be published. Required fields are marked *