Book Image

Building Web Applications with ArcGIS

By : Hussein Nasser
Book Image

Building Web Applications with ArcGIS

By: Hussein Nasser

Overview of this book

Table of Contents (13 chapters)

Using online map from the JavaScript API

Although the ArcGIS online map viewer is incredibly easy to use and configure, it is still limited, and doesn't allow us to add our own code and functionality. That is why Esri allowed you to use ArcGIS JavaScript API to extend the functionality of ArcGIS Online so that they can host the data and you work on the application. Luckily, Esri has provided us with the source code of a complete JavaScript API viewer for ArcGIS Online. All you have to do is to add some configurations and you are ready to use it. In this section, we will learn how to connect ArcGIS Online using the JavaScript API viewer.

Each map you create in ArcGIS Online has a unique global map ID; yes, even the one you just created has an ID and we will need this ID to connect to our map. Follow these steps to get your map ID and configure your ArcGIS online viewer:

  1. Log in to and then click on My Content.

  2. Click on Bestaurants map to open it.

  3. Take a look at the address bar. You will see a link similar to That is your map ID after the id=, mine is 8a8ada9b1a79439eb8a2c4d929b8d74d; keep yours in a safe place since we will be using it.

  4. Now, we will use the ArcGIS Online JavaScript Viewer to point to our Bestaurants map. You can find the viewer at 2955OT_AA\OnlineViewer. Copy the OnlineViewer folder to c:\inetpub\wwwroot.

  5. Using windows explorer, browse C:\inetpub\wwwroot\OnlineViewer\config. This is where the configuration of the web viewer is located.

  6. Using Notepad++, edit the defaults.js file and add your map ID in the Webmap key as shown in the following screenshot:

    Believe it or not, that is it!

  7. Browse your new web application at http://arcgismachine/OnlineViewer. Take some time to explore the rich tools the viewer provides you with. Its source code can be found at C:\inetpub\wwwroot\OnlineViewer\index.html.

  8. Edit the file and use your JavaScript API skills and tools you have acquired in this book to add your own functionalities to it as shown in the following screenshot: