Tag: JavaScript

Questions and answers about HTML5 and ArcGIS

We recently presented a live training seminar titled Using HTML5 with ArcGIS. In the seminar we provided an overview of HTML5 and looked at a number of common examples of how to use HTML5 in your GIS applications. We also showed a bunch of tips and tricks to get you started. If you missed the seminar, the recording is available on the Esri Training site.

The seminar included three question and answer sessions. We thought it would be worthwhile to post the five most frequently asked questions along with answers. Continue reading

Posted in Services, Web | Tagged , , , | 8 Comments

ArcGIS API for JavaScript Version 2.7 Released

Version 2.7 of the ArcGIS API for JavaScript is now available! Highlights include:

  • Superpan map navigation is now the default when using an Apple trackpad or magic mouse. More information is available in the Map Navigation conceptual help topic.
  • Feature layers in on-demand mode now automatically generalize features when map scale changes. Refer to the Feature Layer best practices conceptual help topic, specifically the Feature Generalization section, for a detailed explanation.
  • Some more ArcGIS Server 10.1 features have been added in this release for those testing the beta software:
Posted in Web | Tagged , | Leave a comment

Esri picture marker symbol generator for JavaScript developers

The ArcGIS.com map viewer provides a nice collection of picture marker symbols that can be used to symbolize features on your map. If you’re a developer, you might wonder how you can use these symbols in your applications. You could potentially use tools like Firebug or Chrome Developer tools to inspect ArcGIS.com and discover the image URL, but to make things easier, we’ve created a sample that allows you to select a symbol and generate the JavaScript Object Notation (JSON) needed to draw the symbol:

When using this sample, just click a symbol and Continue reading

Posted in Web | Tagged , , , | 3 Comments

Enhanced map navigation for Mac OS X using ArcGIS API for JavaScript

With the release of OS 10.6 Snow Leopard and Lion OS, the Mac Magic Trackpad and Magic Mouse allow you to interact with the system using touch gestures like tap, scroll and swipe. While not all gestures are passed on as native browser events, some gestures emit traditional browser scroll events that enable intuitive and powerful map exploration.

If you have a Mac with OS X 10.6 or greater, click here to view a demo that shows how to pan and zoom using the track pad gestures. The default behavior is pan, press the shift key to enter zoom mode.

Trackpad Zoom Gestures Trackpad Pan Gestures

Continue reading

Posted in Web | Tagged , | Leave a comment

Hardware accelerated map navigation with CSS3

One of the enhancements to the ArcGIS API for JavaScript at version 2.6 is the use of CSS3 transforms while panning and zooming a map. When enabled, there is a subtle animation and fade when images that make up tiled map layers are added to or removed from the map. You can see this in one of the simple SDK samples. This is similar to how the other ArcGIS web APIs, for Flex and Silverlight, operate.

There are both aesthetic and performance benefits from using the latest and greatest in CSS. Aesthetically, the transition between map levels is more pleasing due to a fade animation. For performance, some webkit and mobile browsers use hardware acceleration when a webpage uses CSS transforms. This is especially beneficial on older versions of iOS.

Like other new HTML5 and CSS3 capabilities, transforms are not yet consistently implemented across browsers. For a complete rundown of browser support, check out caniuse.com’s browser support chart for CSS3 transforms. While that’s a good reference, there are some subtleties to the current implementations. In Chrome on XP, there’s an existing bug that will hopefully be addressed by Chrome 17 in early 2012. For Firefox, version 10 (also due in early 2012) should bring full support for transforms.

Version 2.6 of the ArcGIS API for JavaScript uses CSS3 transforms by default where they’re supported. The API will automatically use CSS3 transforms for the following browsers:

Posted in Services | Tagged , , | Leave a comment

Version 2.6 of the ArcGIS API for JavaScript released today

Version 2.6 of the ArcGIS API for JavaScript is now available! Highlights include:

Improved map display using HTML5 and CSS3

When supported by the browser, the API now uses CSS3 transforms to provide a smoother zooming and panning experience.

Support for the latest version of maps from ArcGIS Online

ArcGIS Online web maps with layers created from remotely hosted comma-separated values (CSV) files are supported. This includes fusion tables and CSV files hosted on the open web.

Enhancements to the Basemap Gallery widget

The Basemap Gallery now supports working with a group of maps within ArcGIS Online. To use a group, specify the basemapsGroup constructor parameter when creating a Basemap Gallery widget.

Support for new features in ArcGIS Server 10.1 beta 2

New features now supported by the ArcGIS API for JavaScript but that require a 10.1 service:

Additional API Enhancements and Bug Fixes

Please refer to the What’s New in Version 2.6 topic in the documentation for additional information about version 2.6 of the ArcGIS API for JavaScript.

Contributed by Derek Swingley of the ArcGIS API for JavaScript development team

Posted in Services | Tagged , , , , | 1 Comment

Some thoughts on the direction of the ArcGIS web mapping APIs (JavaScript, Flex, and Silverlight)

With Adobe’s announcement of discontinuing support for Flash on mobile device browsers, industry rumors on the lifespan of Silverlight, and the growing future of HTML5, many users have asked for Esri’s perspective on this news.

Esri continues to fully support four distinct patterns of application development:

  1. JavaScript / HTML5
  2. Silverlight
  3. Flex
  4. Native device applications

We’re committed to providing the best technology for GIS developers and giving choices from the most widely used developer platforms in the market. By offering many options, we enable developers to address different customer needs and expectations. Our commitment is not based on a specific technology, but based on supporting the GIS developer regardless of the platform chosen. Each of these areas: JavaScript/HTML 5, Flex, Silverlight, and native application code, gain significant improvements in the upcoming ArcGIS 10.1 release.

We have been supporting HTML5 developers through the ArcGIS API for JavaScript for some time. HTML5 is leveraged internally by the API when supported by the browser. The ArcGIS API for JavaScript documentation includes a broad variety of developer examples using HTML5. Our agenda for supporting HTML5 developers will continue to be aggressive.

Adobe recently announced the discontinuation of support for Flash Player in mobile device browsers, however there is continuing commitment and development for Flash Player for browsers on desktops. In addition, Adobe is directing mobile developers to write native applications using authoring tools such as Flash Builder and AIR, and replace Flash-based web mobile browser applications with HTML5-based applications. Adobe is evolving its developer offerings to match this vision, and Esri’s ArcGIS API for Flex will continue to closely match them with upcoming releases. Outside the mobile space, Adobe continues playing a major role. We’re committed to supporting Flash/Flex for the foreseeable future as many of our customers have successful deployments using it.

EDIT: Adobe has released more information to clarify their recent announcement:

Some have asked about Silverlight support as well, given the various industry rumors on its lifespan. We work closely with Microsoft and will continue to support and advance this platform as demanded by our users. Several product updates and new releases based on Silverlight are scheduled for the upcoming months, including our ArcGIS API for Silverlight, ArcGIS Viewer for Silverlight, ArcGIS for Windows Phone, and ArcGIS for SharePoint. We’re committed to providing the Microsoft developer with the best GIS tools, and our offerings will closely match the latest trends promoted by Microsoft.

In addition, we are aggressively adding to our native application support by providing the new ArcGIS Runtime on multiple platforms. This technology will enable developers to leverage the native capabilities of various platforms and devices, and is supported across desktops (Windows and Linux), and mobile and tablet devices (Android, iOS, Windows Phone, and Windows Mobile).

Esri has always focused on computing and development platforms that are viable and demanded by our customers, and that focus has not changed. We have strong strategic alliances with organizations like Microsoft, Adobe, W3C, and others to ensure we are technically aligned and participating in the future directions of technology. This keeps our GIS offerings relevant in the fast-paced world of platforms, devices, and technologies.

Contributed by the Esri Product Management team

Posted in Services | Tagged , , , , | 8 Comments

ArcGIS API for JavaScript – Basic Viewer template now available

We recently added a new JavaScript application template to
ArcGIS.com called the Basic Viewer. Using ArcGIS.com and the Basic Viewer
template, you can quickly create and publish applications with commonly
requested functionality such as a legend, basemap gallery and print tools. The
template includes many out-of-the-box widgets from the ArcGIS API for
JavaScript including the Editor, TimeSlider and Measurement widgets.
The Basic Viewer template is a fully configurable application that you can configure in ArcGIS.com or via a configuration file if you choose to download the template and host it on your
web server.

How to make a web application with the Basic Viewer

Create a Web application based on the Basic Viewer template
by performing the following steps:

  1. Open an existing map (or create a new one) using
    the ArcGIS.com
    map viewer
    . Use the map viewer to add layers, set an extent, configure map popups and add map notes. All of these settings are honored by the template and will appear in the application built using the template.
  2. Click the Share button and choose who can view the map. To publish the map as an application, you need to make the map available to a group, your organization, or the public.
  3. Click the Make
    a Web Application
    option to display a gallery of templates.
  4. Select Basic Viewer and use the Preview
    option to view your web map in the Basic Viewer template. The preview option is a great way to determine which template works best for your map.
  5. Close the preview window and select the Publish option for the Basic Viewer
    template to create a custom application based on the template. This published
    application is added to ArcGIS.com and can be shared with the public or with
    users in your group or organization.

If you would rather host the application on your own
web server, you can select the download option and download a zip file
containing the full source code for the template. The zip file contains
instructions for installing and configuring the template.

Configure the published template

After publishing the web map as an application, use the Configure App option to modify the application’s tools, title and color scheme.

  1. The last step of the application publishing process displays a dialog with details
    about the newly published application, and includes a link so you can view the
    item. Click go to the item now to edit the application’s description, thumbnail
    image, tags, and to begin the configuration process. You can always access the
    application via the My Content tab.
  2. Click the Configure App button to display the application configuration page. This page displays a preview of your web map using the Basic Viewer template along with options that allow you to change the appearance of the application and specify the functionality you want to
    Basic Viewer Config Pane
  3. After making the changes, click Refresh to view the template with your new settings and click Save to apply
    the changes to your application. Note that you can return to the configuration panel at any time and modify the template.

Click here
to view an application created using the Basic Viewer template. We hope you enjoy using the new template and are excited to see applications you build!

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

Posted in Services | Tagged , | 9 Comments

Cross Origin Resource Sharing (CORS) with the ArcGIS API for JavaScript

HTML5 Powered with Performance & Integration Version 2.5 of the ArcGIS API for JavaScript introduced support for cross-origin resource sharing (CORS). CORS allows web applications to bypass a browser’s same origin policy and access resources or services on other servers/domains. CORS is supported in modern, non-IE browsers and is usually classified as a component of HTML5.

When both the web server and browser support CORS, a proxy is not required to do cross-domain requests to get around that same origin policy. CORS both simplifies application development and provides a performance boost. Development is simplified because it is no longer necessary to maintain a proxy page on your server. The performance boost comes from no longer using a proxy page. Instead of a web app sending a request back to its server, waiting for the server to access another resource or service, and then interpreting the result, the app just accesses the resource or service directly. Eliminating the server as a middleman makes apps faster and frees up resources on the app’s server.

To use CORS from an ArcGIS API for JavaScript application, add the root URL for CORS enabled servers to esri.config.defaults.io.corsEnabledServers, which is an array of strings. As stated previously, web servers must be pre-configured to support CORS. This is a straightforward, simple process and enable-cors.org has walkthroughs on how to enable CORS for popular web servers.

While additional server side configuration is required to use CORS with a 9.3 or 10.0 ArcGIS Server instance, 10.1 instances of ArcGIS Server will support CORS out of the box.

Within the ArcGIS API for JavaScript, the main use cases for CORS are sending large geometries to a geometry service and doing various editing operations. Both are done with HTTP POSTs, and would otherwise require a proxy page if the ArcGIS Server services being used were not hosted on the same domain as the requesting application.

To test CORS with the ArcGIS API for JavaScript, check out the sample CORS apps in the ArcGIS API for JavaScript documentation. If you’re using a browser that supports CORS, you will see cross-domain POST requests when monitoring your HTTP traffic using Firebug, Chrome Dev Tools or some other tool. If you hit the apps with Internet Explorer, you’ll see that a proxy is still used. You can also experiment with the ArcGIS Server services running on servicesbeta.esri.com as that server has been configured to support CORS. Enjoy!

Contributed by Derek Swingley of the ArcGIS API for JavaScript development team

Posted in Services | Tagged , | Leave a comment

Version 2.5 of the ArcGIS API for JavaScript released today

Version 2.5 of the ArcGIS API for JavaScript is now available! Highlights of this release include:

Identity Manager Widget

This new widget provides a streamlined experience for using secure services in the ArcGIS API for JavaScript. Secure services can now be consumed from a JavaScript application using a single line of code:


When included in an app, the identity manager provides a basic sign-in form for secure services:

Identity Manager widget

Enhancements to KML Support

The KMLLayer class now supports more features of network links, extended data feature attributes, and time information. Also, the outSR parameter now supports well-known text (WKT) spatial references.

Bookmark Manager Widget

This widget allows the user to jump to map extents of particular interest (bookmarks). You can load bookmarks from an array on application startup, or you can allow users to create bookmarks on the fly. Two new samples show each use case:

Bookmark Manager  

Enhancements to Popups

The look and feel of the popup has been improved so that popups have a smaller footprint on the map:

New popups

Popups also have two new events: onMaximize and onResize that fire when a popup’s maximize or restore button is clicked. This allows an application to insert or remove content depending on the current size of the popup. Finally, popups are automatically attached to the map, making the following line of code no longer necessary:

dojo.place(popup.domNode, map.root);

Support for Cross Origin Resource Sharing (CORS)

Cross Origin Resource Sharing is a specification usually classified as an HTML5 technology that outlines how browsers can do cross domain requests. These are normally not allowed by browsers due to the same origin policy. Version 2.5 of the ArcGIS API for JavaScript supports CORS via an array of server URLs that you specify in esri.config.defaults.io.corsEnabledServers.

To successfully use CORS, web servers must also be configured to support it. enable-cors.org is a fantastic resource for enabling CORS. An additional blog post in the near future will go into greater detail about CORS support in the ArcGIS API for JavaScript. Refer to caniuse.com for a list of browsers that support CORS.

Additional API Enhancements and Bug Fixes

Please refer to the What’s New in Version 2.5 topic in the documentation for additional information about version 2.5 of the ArcGIS API for JavaScript.

Contributed by Derek Swingley of the ArcGIS API for JavaScript development team

Posted in Services | Tagged , , | 7 Comments