Tag: Dojo

Impact Summary: Dazzle Them With Your Data

Screen-Shot-2014-06-19-at-9.37

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 , , , , , , , , , , | 36 Comments

New weapons for your webmaps!

thumb

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 , , , , , , , , , , , , , , | 6 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 , , , , , | 3 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

Resources

  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

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>
</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();
container.appendChild(progressIndicator.domNode);
progressIndicator.start();

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

  esri.request({
url: "http://local.yahooapis.com/LocalSearchService/V3/localSearch",
content: queryParams,
handleAs: "json",
callbackParamName:"callback",
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) {
doReport(evt.mapPoint);
});
}
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;
newReport.setGeometry(geometry);
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
});
});
}

Resources

  • 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 , , | 1 Comment

ArcGIS 10 for Java and Linux developers

All of our teams have made a tremendous effort to make ArcGIS 10 a very special release. This week, the Java team posted some videos and demo code to highlight some of the changes they’re including.

Java Add-ins for ArcGIS Desktop

ArcGIS 10′s brand new Add-ins overhaul the way extensions to ArcGIS Desktop work and have garnered a lot of interest for their ease of use and deployment. The video “Add-ins for ArcGIS Desktop” shows you all you need to know to create and deploy a Java Add-in from scratch.

Server Object Extensions using Java

ArcGIS 10′s Server Object Extensions have been improved based on your feedback, allowing access via REST as well as SOAP. And you can now register and unregister SOEs via ArcGIS Server Manager, which will also auto-discover newly deployed SOE jar files. There are the usual documentation resources, but the Java team has put together a quick video walkthrough of deploying SOAP services for SOEs.

ArcGIS Server Web ADF

On the ADF side there are both performance and usability enhancements and there’s a video to show you how to best make use of these performance-tuning features at ArcGIS 10. There’s also a video and an accompanying sample that demo how to use the new Dojo Widgets and event hooks to make your JavaScript apps that much slicker.

Linux and ArcGIS Server

Lastly, let’s not forget all the work that’s gone into ArcGIS Server on Linux. There have been improvements in performance, stability and server management for ArcGIS Server 10 on Linux with some serious scalability work and testing going on. Check out the Java Blog’s post for more details on improved failover behavior and scripts to ease cache generation.

Additional Resources

There are more Java code samples and videos for you to check out over in the Java Resource Center, including their Java-specific “What’s coming in ArcGIS 10″ overview video.

– Nick

Posted in Developer | Tagged , , , , , , , | Leave a comment