Developing with the JavaScript Sandbox

LarsSchmitz

<\/HEAD>

To create web applications with the ArcGIS API for JavaScript, you do not necessarily need programming skills. Often it is enough to understand public code examples and adapt them. Today I want to focus on a tool that is very helpful when creating web applications: the Sandbox. With it, you can easily and clearly test codes in the browser while servers and data remain unchanged.<\/P>

<\/P>

Let's take a look at the code examples<\/A> on the pages of the ArcGIS API for JavaScript. The examples are thematically organized, for example by analysis, geocoding, or routing. When clicking on one of the examples, you almost always have the option Explore in the Sandbox. Selecting this option opens the Sandbox as a split viewer: on the left appears the code, on the right the application. If you change the code on the left, you see on the right in the application what effect the code changes have.<\/P>

<\/P>

Application example: What can I see when I stand on Zugspitze?<\/H1>I present the use of the Sandbox using the code example Viewshed<\/A>, which calculates the field of view from a certain point.<\/P>

<\/P>

<\/P>

<\/P>

On the website for this example there is a description of what happens in the application with the current code: When clicking on the map, it is calculated using a geoprocessing service provided by Esri which areas are visible from the clicked point with a visibility range of 5 miles. The map center is located in California when loading the document and the basemap is a street map.<\/P>

<\/P>

I now want to adapt the map to my needs: Let's assume today in the Alps there is visibility of 20 kilometers. I am interested in which areas I can see if I now climb Zugspitze. To determine the coordinates of Zugspitze and any other point on Earth, we can use this helpful

example <\/A>from the ArcGIS API for JavaScript. To clearly see what changes in code cause, I click in the Viewshed example on Explore in the Sandbox<\/A>.<\/P>

<\/P>

<\/P>

<\/P>

First, I want to move the map center from San Diego to Zugspitze. The center of the map is defined in the parameter center, which always contains geographic X and Y coordinates. I change the value center: [-122.436, 37.73] to center: [10.99393, 47.42118], i.e., the coordinates of Zugspitze. If I now click on the orange RUN button at top right, the changes in code are applied and the map center changes directly in the map window. To now display a topographic map instead of a street map as basemap, we change basemap: "streets" to basemap: "topo".<\/P>

<\/P>

Now I want to make changes to visibility distance that are passed to the

publicly available geoprocessing service<\/A> in this code block:<\/P>

vsDistance.distance = 5;<\/P>

vsDistance.units = "esriMiles";<\/P>

<\/P>

Now I just have to change values at distance to 20 and units to "esriKilometers". Of course, the layout of the map can be further changed arbitrarily. For example, I can modify in tag <div id="info" class="esriSimpleSlider">the content of text field at bottom left on map so that users of application know exactly what to expect.<\/P>

<\/P>

<\/P>

<\/P>

As soon as I am finished and satisfied with changes to application, I can download code. The HTML file with JavaScript code shown on left side of Sandbox can now be made available as functional application on internet. Reminder: For this I did not have to write code from scratch and design application but only make a few changes in existing code. Also, I did not need any software for this—just a web browser.<\/P>

<\/P>

Further use cases <\/H1>The presented example is a simple model. And especially in Alps visibility varies strongly over time and space due to many factors. However, it should also be clear that there are hardly any limits to customization possibilities with Sandbox: You can not only change map properties and input/output parameters of existing geoprocessing services but also integrate completely different services into existing sample code that perform other tasks than sample applications.<\/P><\/P>At EDC developer forum at TU Dresden about "Geoprocessing on Web"<\/A> we took application as basis that searches for pizzerias in California within certain drive-time polygon via a Yahoo! service<\/A>. With some adjustments in original code we created an application that finds schools in Dresden from extensive OpenStreetMap database reachable within certain walking time via another search service (Nominatim<\A>).<\p>

An overview of freely available geometry services from Esri that can be integrated into JavaScript applications is available

here<\a>.<\p><\body><\html>