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:
Log in to www.arcgis.com and then click on My Content.
Click on Bestaurants map to open it.
Take a look at the address bar. You will see a link similar to http://www.arcgis.com/home/item.html?id=8a8ada9b1a79439eb8a2c4d929b8d74d. That is your map ID after the
id=, mine is8a8ada9b1a79439eb8a2c4d929b8d74d; keep yours in a safe place since we will be using it.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 theOnlineViewerfolder toc:\inetpub\wwwroot.Using windows explorer, browse
C:\inetpub\wwwroot\OnlineViewer\config. This is where the configuration of the web viewer is located.Using
Notepad++, edit thedefaults.jsfile and add your map ID in theWebmapkey as shown in the following screenshot:
Believe it or not, that is it!
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 atC:\inetpub\wwwroot\OnlineViewer\index.html.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:
