Tag: Dojo

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 , , , , , , , , , , , , , , | 2 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

ArcGIS 10 for Java/Linux developers

ArcGIS 10 is expected to be released shortly and please visit the new What’s coming in ArcGIS 10 site for more information on 10. The demo videos on the site are awesome and a must watch to get an inside scoop on ArcGIS 10. Meanwhile, we have created our own set of casual videos and a few other samples to highlight ArcGIS 10 for Java/Linux platform. The video on what’s coming in ArcGIS 10 covers most of the significant enhancements and I encourage you to watch it for a broad overview on ArcGIS 10. But, here is a short note on ArcGIS 10 for JavaLinux developers in no particular order.

ArcGIS Server for the Linux platform

The past year, we vigorously tested the stability and scalability of ArcGIS Server on Linux platform. In our test environment, we were able to achieve a throughput of more than a million dynamic maps per hour (about 1.5 million maps) on a cluster of 8 machines (with a total of 64 CPUs). This effort has made the product more scalable and stable at 10. Also, we have automated the user synchronization of SOM machines and you do not have to manually synchronize users to handle failovers. The ‘How to automatically sync local ArcGIS Server Users between two SOM machines’ section in the help doc on Managing GIS Server User accounts describes the necessary steps you must take to achieve auto synchronization. For managing map caching workflows better, we have added new shell scripts to export and manage cache on Linux machine and have added new documents on cache generation. You might find them very helpful for creating and managing caches on Linux platform.

ArcGIS Server Web ADF 

On the Web ADF front, you will notice a significant performance improvement in startup and response time of the application. We have created a 10 min video on the Web ADF performance enhancements. Please watch the video to take advantage of all the new performance tuning features.  The other major enhancement is, our refactored Dojo based JavaScript API. The new API has several new dojo based adf events and allows seamless integration of Dojo and other third-party widgets in your web ADF application. Please download the sample application Dojo JavaScript API demo and watch the video on Dojo Widgets in Web ADF application to get started with the new JavaScript API.

ArcGIS Java Server Object Extensions

We introduced SOE’s in our previous release and have incorporated several of your feedback on development and deployment of SOEs in ArcGIS 10. To begin with, you can now access Server Object Extensions via REST as well as SOAP. This allows you to directly consume SOE services in SilverLight, Flex, JavaScript and Web ADF applications. The samples and help docs in ArcObjects SDK provides a step by step walkthrough on the development and deployment of SOEs. Alternatively, you can also watch the video, ArcGIS 10 : Server Object Extensions as SOAP services to understand the deployment steps to create SOAP services for SOEs. The second major enhancement is on the deployment aspect of SOEs. At 9.3.1, we provided a tool to register SOEs. But now, when you deploy SOE jar files, ArcGIS Server Manager will auto-discover them and you can register and unregister SOEs via Manager. 

Java Add-ins for ArcGIS Desktop

We have introduced add-ins at 10, which allows you to create custom buttons, tools and other UI elements for ArcGIS Desktop. Add-ins follow the plug-in model and are easy to install and uninstall. It is also very simple and easy to create an add-in using Eclipse IDE. Also, since add-ins are self-contained single archive file, it is very easy to share them via email, network share and public download. The video New at 10: Add-ins for ArcGIS Desktop can help you get started on creating, deploying and consuming add-ins in ArcGIS Desktop.

In summary, we encourage you to explore the new features at 10 and take advantage of them. We’ll discuss in detail the other areas of enhancements and migration strategies in the coming weeks.

- MJ 

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

Find graphics under a mouse click with the ArcGIS API for JavaScript

Dojo filter exampleMapping applications built with the ArcGIS API for
JavaScript
commonly allow users to click or hover over a map and get information about all the features under the current mouse location.
To add this functionality to your application you can listen for the graphics layer’s onClick event, however if graphics are stacked on
top of each other, only the top one fires an event. So how do you determine how many graphics are under the point?

One approach is to do the following:

  1. Listen for a click event, perhaps onMouseDown or onClick.
  2. Define a search radius by constructing a new extent around the input point.
  3. Use dojo.Filter to create a new array that contains only the features that are within the search radius.

Listen for onClick event

First, we use dojo.connect to listen for the onClick event. The code snippet below
connects an event handler to the map’s graphics layer that fires whenever a user clicks a graphic.

dojo.connect(map.graphics,"onClick",identifyFeatures);

The event argument provides access to the screen point, map point, and graphic. The map point is the location, in map units,
under the mouse cursor. In the handler function identifyFeatures, call a function that builds a search radius around the input mouse location and
returns the new extent.We’ll examine how to build the pointToExtent function in the next step.

   function identifyFeatures(evt){
var extentGeom = pointToExtent(map,evt.mapPoint,10);
}

Construct an extent around the input point

In this step, we’ll construct an extent
around the input map point using the following function. This function uses an input point and tolerance to calculate the extent.

function pointToExtent(map, point, toleranceInPixel) {
//calculate map coords represented per pixel
var pixelWidth = map.extent.getWidth() / map.width;
//calculate map coords for tolerance in pixel
var toleraceInMapCoords = toleranceInPixel * pixelWidth;
//calculate & return computed extent
return new esri.geometry.Extent( point.x - toleraceInMapCoords,
point.y - toleraceInMapCoords,
point.x + toleraceInMapCoords,
point.y + toleraceInMapCoords,
map.spatialReference );
}

Filter the graphics collection using dojo.filter and display the results

Dojo.filter takes an input array and a filtering function
and returns a new array that contains only the items that met the filter requirement.

Let’s look at how to use dojo.Filter to loop through the graphics in our graphics layer and test each graphic against a condition.
In this case, we use extent.contains to perform a spatial query to determine which graphics are within the extent. If a graphic is within the extent, the
function returns true and the graphic is included in the filteredGraphics output array.

  var filteredGraphics = dojo.filter(map.graphics.graphics, function(graphic) {
return extentGeom.contains(graphic.geometry);
})

Now we have an array that contains only graphics located within the specified tolerance. We can use this array to build a table containing
one row for each graphic under the mouse location. In the snippet below, we construct a table, then use dojo.forEach to
loop through the filteredGraphics array and add a row that displays the city name and population. Finally we build an info window to display the results.

  var content = "";
content = "<i>Total Features: " + filteredGraphics.length + "</i>";
content += "<table><tr><th>City</th><th>Population</th></tr>";

//Build a table containing a row for each feature found
dojo.forEach(filteredGraphics,function(row){
content += ""
+ row.attributes['CITY_NAME'] +
"</td><td>" + row.attributes['POP1990'] +
"</td></tr>";
})
content += "</table>";

//display the results in an infow window
map.infoWindow.setContent(content);
map.infoWindow.setTitle("Identify Results");
map.infoWindow.show(evt.screenPoint,map.getInfoWindowAnchor(evt.screenPoint));

Click here to view a live sample that uses dojo.filter to display information about all the graphics under the mouse point.

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

Posted in Services | Tagged | 2 Comments