Tag: Dojo

Explore Eight Incredible Apps at the 2017 User Apps Fair

2017 User Apps Fair

Visit the 2017 User Apps Fair! The 2017 User Apps Fair will showcase the best customized applications that utilize Esri technology. These competitors will present and display their applications at the 2017 Esri User Conference from Tuesday, July 11th through … Continue reading

Posted in Analysis & Geoprocessing, App Developers, Apps, ArcGIS Enterprise, ArcGIS Online, ArcGIS Pro, ArcMap, Cartographic Design, Community Maps, Developer, Geodata, Imagery, Local Government, Location Analytics, Mapping, Mobile, National Government, Open Data, Portal for ArcGIS, Python, Sciences, State Government, Uncategorized, Web | Tagged , , , , , , , , , , , , , , , , , , , , , , , , , | Leave a comment

Impact Summary: Dazzle Them With Your Data


Esri’s Disaster Response Program helps support worldwide incidents, such as earthquakes, floods, wildfires, and severe weather. To increase public knowledge of the disaster impacts, we wanted an app to highlight areas and show related statistics, such as data that shows … Continue reading

Posted in ArcGIS Online, Developer, Mapping, Mobile, Web | Tagged , , , , , , , , , , | Leave a comment

GeoForm: Editing via pop-UPs got you DOWN?

Pop-up editing

Frustrated with submitting data via a pop-up? Collecting map information doesn’t need to be so map-centric. Many non-GIS users are accustomed to entering data via a form, not a map pop-up. It’s not always about the map, sometimes it’s about … Continue reading

Posted in Apps, ArcGIS Online, Community Maps, Developer, Public Safety, Services, Web | Tagged , , , , , , , , | 39 Comments

New weapons for your webmaps!


Our latest version of the JavaScript API (version 3.7) includes new map widgets for you to take advantage of and make killer apps. While creating web applications to aid our Disaster Response program, we noticed some commonly used mapping elements … Continue reading

Posted in App Developers, Developer, Mapping, Story Maps, Web | Tagged , , , , , , , | 2 Comments

Making Your Pop-up Pop!

Making your pop-up pop!

Want to make a beautiful pop-up to match your map or website? With a little elbow grease, CSS, and a keen eye for design, it’s easy. Here’s how you can skin the ArcGIS API for JavaScript pop-up widget. The pop-up … Continue reading

Posted in ArcGIS Online, Developer, Mapping, Web | Tagged , , , , , , , , , , , , | 10 Comments

Writing Unit Tests for Your ArcGIS API for JavaScript Apps

Whether you’re working with an existing application, or you’re planning a new app, unit testing provides an efficient, dependable way to verify that your code functions as expected and ensure that your app’s features work. In a nutshell, unit testing provides an automated way to target, test and validate specific components of an application.

As with most things JavaScript, Dojo has you covered. Specifically, the Dojo Objective Harness (DOH), which ships with Dojo, provides a framework for writing and running unit tests. The ArcGIS API for JavaScript team uses DOH to run unit tests throughout the development process to check that changes made to the API do not break existing functionality, and that new features accomplish their intended purpose. For more background on DOH and to get up to speed on its capabilities, please head over to the Dojo reference guide page for DOH. Please read through that page to get a better understanding of what DOH can do for you. Continue reading

Posted in Developer, Web | Tagged , , , , | 4 Comments

IE 9 support coming in version 2.3 of the ArcGIS API for JavaScript

Version 2.2 of the ArcGIS API for JavaScript was released in early March. . . .right around the time that Microsoft announced that Internet Explorer 9.0 was final and Dojo announced that version 1.6 was available. Version 2.2 does not support either of these, but version 2.3, planned for early May, will support them. We’ve put together an early version of 2.3 to demonstrate how the IE9 enhancements lead to a better mapping experience.

Internet Explorer 9

Internet Explorer 9.0 provides many new features including improved support for CSS3 and HTML5 and dramatic improvements in graphics performance. In earlier versions of Internet Explorer, drawing 1000+ graphics performed poorly compared to browsers like Firefox and Chrome. At IE9, graphics drawing performance is much improved over earlier versions of IE and is comparable to other browsers.

We created a simple test case that draws 1000 graphics on the map to test the performance improvements in Internet Explorer. This table shows our test results, in milliseconds. You can run the test on your machine using the code here. Note that your results may vary depending on the specs of the test machine.


Internet Explorer 9 now supports CSS3 behaviors like rounded corners, media queries, transforms and more. The image below shows a sample application in Internet Explorer 8. The css for this application specifies that the corners should be rounded and the header should have a box-shadow applied. However, IE 8 does not support the border-radius or box-shadow properties and they are ignored.

View Application in IE 








Here’s the same sample running in IE9, note that the rounded corners and box shadow are now applied.

 View application in Ie

HTML5 support was also enhanced, so now you can take advantage of capabilities like the Canvas Element and Geolocation in IE 9.

  • The HTML5 Canvas Element is a space on the page you can use to render images on the fly. Click here to view a sample that demonstrates using the Canvas Element to draw a raster image.
  • The Geolocation API which can be used to find the user’s current location is now supported across all major browsers. You can test this using the Geolocation sample.

For more details about CSS3 and HTML5 support in IE9 visit caniuse.com.

Dojo 1.6

Enhancements to Dojo 1.6 include Dojox.Mobile enhancements and a growing set of tutorials on various aspects of working with Dojo and Dojox.Mobile. Version 2.3 of the ArcGIS API for JavaScript will use Dojo 1.6.1 which is due out any day now and is scheduled to include several bug fixes for IE9.

Contributed by Kelly Hutchins of the ArcGIS API for JavaScript development team

Posted in Services | Tagged , , | Leave a comment

Introducing the Map Widget for ArcGIS

The Map Widget for ArcGIS is a mapping component based on the ArcGIS API for JavaScript that adheres to IBM’s iWidget Specification. This Widget allows you to add mapping and GIS analytical capabilities to composite applications built with IBM products such as IBM Mashup Center, IBM WebSphere Portal Server, and IBM Cognos.

The Map Widget can be used to display geographic data stored in ArcGIS Server map services and Spatial Data feeds on ArcGIS Online or ArcGIS Server basemaps enabling ESRI to provide Geographic Business Analytics to the Desktop.

The Map Widget can be used to display geographic data stored in ArcGIS Server map services and Spatial Data feeds on ArcGIS Online or ArcGIS Server basemaps enabling ESRI to integrate GIS with Business Analytics.

Benefits of Map Widget for ArcGIS:  

  • Built to standard provided by IBM
  • Lower development costs, deliver rapid integrated applications.
  • Empower business users by improving effectiveness and save time
  • Unlock siloed information from spreadsheets et. All, with geographical content by visualizing data
  • Multiple deployment platforms, IBM Mashup Center & IBM Portal Server.  

Included with Map Widget for ArcGIS

  • Send/Recieve events to other iWidgets and Portlets
  • Configure base maps for ArcGIS Online and ArcGIS Server
  • Add operational layers from ArcGIS Online and ArcGIS Server
  • Rich user interactive map operations


  1. You can download the Map Widget for ArcGIS from IBM Lotus and WebSphere Portal Business Solutions Catalog
  2. The Map Widget for ArcGIS is open source.  You can obtain the source code distribution for ArcGIS Online 
  3. The Map Widget for ArcGIS is based on the iWidget 2.0 specification

This is a first in a series of posts which will dive into using and extending the Map Widget for ArcGIS. 

Posted in Developer | Tagged , , | Leave a comment

Version 2.1 of the ArcGIS API for JavaScript released

Version 2.1 of the ArcGIS API for JavaScript is now available. To begin using it, just update the script and style sheet tags in your applications to point to version 2.1:

<script src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=2.1" type="text/javascript"></script>
<link href="http://serverapi.arcgisonline.com/jsapi/arcgis/2.1/js/dojo/dijit/themes/claro/claro.css" rel="stylesheet" type="text/css" >

Some of the new features are:

  • Three new out of the box widgets that can quickly make your sites look better without requiring a lot of code.
    Legend Widget

    Display a legend for the layers in the map.

    Scalebar Widget

    Add a scale bar to the map in metric or Imperial units.

    Basemap Gallery Widget

    Use the Basemap Gallery to provide a collection of potential basemaps for your application.

  • Support for Dojo 1.5, whose enhancements include a new theme (claro) and Dojo Mobile.
  • Enhanced touch-aware map control that now includes support for double-tap and muti-finger tap to zoom in and out on iOS devices.
  • Support for OGC Web Map Service (WMS). View the API reference and sample for more details.
  • Online SDK samples that highlight the new functionality. The Samples Overview page in the ArcGIS API for JavaScript Resource Center displays the newest samples first, so it’s a good way to quickly find the new samples.

For a complete list of enhancements and bug fixes, view the What’s new in Version 2.1 document.

Posted in Services | Tagged , | Leave a comment

Building Web applications for iOS and Android using dojox.mobile

Several weeks ago we had a post on how to get started building iPhone applications with the ArcGIS API for JavaScript. In this post we’ll dive a little deeper and look at how you take advantage of the features available in Android and iOS mobile browsers to build rich internet applications.

Mobile Frameworks

There are several mobile JavaScript frameworks available that provide a starting point for building iPhone and Android applications. Frameworks like JQTouch, dojox.mobile and JQuery Mobile (coming later this year) provide lightweight widgets optimized for mobile devices and CSS to easily give your application a native iPhone or Android look and feel. The examples in this post use dojox.mobile which provides a set of lightweight widgets that help you build pages that look and act like native applications.


Dojox.mobile is part of Dojo 1.5, which will be included with version 2.1 of the ArcGIS API for JavaScript. Dojox.mobile provides several lightweight widgets (views, buttons, lists, etc) that look and act like those found on the iOS and Android native interfaces. The View widget defines a single page in your application. You can add multiple views to your application then use the provided transitions (flip, fade, slide) to move between the views.

<div id="directionsView" dojoType="dojox.mobile.View">
<h1 dojoType="dojox.mobile.Heading" back="Map" transition="flip" moveTo="mapView">Directions</h1>
<div id="directions" dojoType="dojox.mobile.RoundRect" shadow="true" ></div>

A native-looking Progress Indicator is also provided. You can use this indicator to inform users that an operation is in progress. The progress indicator looks like that found on the target device, so if you are running the application on an Android it will look like a bar, and on an iOS device it will have a more circular look.

Android Example

iPhone Example

    progressIndicator = dojox.mobile.ProgressIndicator.getInstance();

Applications that run on an Android have a distinctly different look than iPhone applications. Dojox.mobile provides CSS style-sheets for both the Android and iPhone. You could build a separate application for each device, or you could use JavaScript to determine the type of device the application is running on and then use the appropriate style-sheet.

 if (navigator.userAgent.indexOf('Android') > -1) {
document.write("<link href='http://ajax.googleapis.com/ajax/libs/dojo/1.5/dojox/mobile/themes/android/android.css' rel='stylesheet'>");
} else {
document.write("<link href='http://ajax.googleapis.com/ajax/libs/dojo/1.5/dojox/mobile/themes/iphone/iphone.css' rel='stylesheet'>");

App for iOS built with the ArcGIS API for JavaScript
App for Android built with the ArcGIS API for JavaScript

Sample Applications

Let’s look at a few samples that use Dojox.mobile to build an application for the iPhone and Android.

Find nearby businesses

The first sample uses the Geolocation API to determine the current geographical location. Once the location is discovered, Yahoo’s Local Search Web Services is used to find businesses and services near the input location. In this snippet we use esri.request to request results from the local search web service.

What's Nearby Workflow

url: "http://local.yahooapis.com/LocalSearchService/V3/localSearch",
content: queryParams,
handleAs: "json",
load: buildYahooLocalLocations,
error: esriConfig.defaults.io.errorHandler

Details about each result location such as phone number, address, and rating are displayed in a list. You can then use the Route Task to generate a route and driving directions from the input location to the selected item.

routeTask.solve(params, function(solveResult) {
var directions = solveResult.routeResults[0].directions;
routeGraphicLayer.add(new esri.Graphic(directions.mergedGeometry));
dojo.forEach(directions.features, function(feature,index) {
//do something with the direction information here

Volunteered Geographic Information (VGI)

This sample uses the new Feature Service in ArcGIS Server 10 to allow a user to provide geospatially-enabled feedback to an organization. If a resident in a local town spots a potential issue, he or she could make a note of where it is, provide some basic information including comments, and, optionally, take a picture of it and attach it to the report as a feature attachment. The sample also logs the date and time the report was created. This is a way for an organization to leverage volunteered geographic information (VGI) to create a dialogue between an organization and its constituents.

Adding features to VGI Map

To capture user input, start listening for the Map’s onClick event when the Web page is initially loaded. Each time a user taps on the map, the onClick event fires, and a new feature is added to the Feature Service using the FeatureLayer’s applyEdits method.

function init() {
clickHandler = dojo.connect(map, 'onClick', function(evt) {
function doReport(geometry) {
var report = featureServiceLayer.types[0].templates[0].prototype;
var newReport = new esri.Graphic(report.toJson());
newReport.attributes.Comments = dojo.byId('comments').value;
featureServiceLayer.applyEdits([ newReport ], [], [], reportComplete);

Once the edits are complete, we will populate a global variable with the Object ID for the newly created feature. We will need this later if the user chooses to add an attachment to their report.

function reportComplete(addResults, updateResults, deleteResults) {
theAddedOID = addResults[0].objectId;

Now let’s look at how to add attachments, like a picture, to the newly created report. For the iOS, this application uses a third party helper application called PicUp to provide access to the camera, since the Safari browser on the device does not natively have access to it and does not support input type=”file”. Another application that provides similar functionality is cliqcliq Quickpic. For Android 2.2, the browser supports input type=”file”, so the user could provide a photo that has already been taken by browsing for it.

In order to add a photo feature attachment, we need to be able to allow a user to browse for a photo. In this case, we will use an input type=”file” html control and a button for submitting the attachment. We need to listen to the button’s onClick event, and when it fires, call the feature layer’s addAttachment method. We pass the Object ID of the feature we want to attach the photo to and a handle to the html form that contains the file input html element.

Function init() {
var button = dojo.byId('submitButton');
dojo.connect(button, 'onclick', function(event) {
featureServiceLayer.addAttachment(theAddedOID, dojo.byId('myForm'), function(data){
//Attachment Added


  • Dojox.mobile test pages – Several samples showing how to use various features of dojox.mobile.
  • Dojox.mobile Documentation
  • API Reference for dojox.mobile
  • Instructions for installing and configuring the Android Device Emulator. You can use the emulator to test the application if you don’t have access to an Android device.
  • Visit the Safari Reference Guide or tips on building web applications on the iPhone

Contributed by Kelly Hutchins of the ArcGIS API for JavaScript development team, and Scott Moore of Esri Technical Sales.

Posted in Services | Tagged , , | 2 Comments