Esri provides an API to build solutions on a number of different platforms including iOS, Android, Native Desktop and also Web.  When developing for the web, which allows your application to be displayed in a web browser, Esri is providing a new developer API labeled as 4.0. The API is accessible through the JavaScript language which allows for a rich client side user experience.  The 4.0 includes many breaking changes from earlier 3.0+ API versions as the team at ESRI is trying provide a cleaner and more intuitive API going forward.  

The 4.0 JavaScript API is a major step forward to help ensure more widespread adoption as more organizations move to web based mapping applications.  It provides new capabilities, as well as enhancing existing capabilities, for displaying and interacting with your GIS data.  The most impactful new feature will likely be the support for displaying 3D content in your application.  

Viewing 3D Data

3D symbology has previously not been available to view in a web application using Esri JavaScript API.  3D support is available with a 3D Analyst license.  More information about 3D symbology can be found here.

Modern web technologies are allowing for much richer experiences with your Esri map data that was before only possible with desktop applications.  WebGL is the technology that allows for visualization of 3D symbology without the use of browser plugins.  All modern web browsers including IE 11, support WebGL.  Which means IE 11 should support viewing any 3D symbology you’d like to display in your web application.  Although IE 11 will likely not support future versions of WebGL.

Esri is calling the viewing of 3D symbology SceneView.  When using SceneView in your application you can define a WebScene.  An instance of a WebScene is defined in ArcGIS with either the on-premise solution or by using ArcGIS Online.  Once a WebScene is defined it only takes a few lines of code to display the data in your application.  The following is an example when using arcgis.com as your data provider.

var scene = new WebScene({
  portalItem: new PortalItem({
  id: "affa021c51944b5694132b2d61fe1057"
 })      
});

The Esri 4.0 JavaScript API also has a concept of WebScene Slides where you can easily change the view of a certain area with an easy to follow navigation pane.  This particular example is able to show different 3D views of an area where new construction is being proposed.

Touch Support and Compass Widget

The web based Esri maps support touch orientation. For instance a user can perform pinch gesture with two fingers to zoom in on a map. If a user places two fingers on the map they also have the ability to rotate the map. When a user rotates the map the compass widget allows the map to reset to its original orientation. By default the compass widgete is included with a 3D map. If you want include the new compass widget into a 2D map, the code is pretty straightforward.

Import the widget with your required statement:

    require([
        "esri/Map",
        "esri/views/MapView",
        "esri/widgets/Compass",
        "dojo/domReady!"
      ]

Then add a few lines to add the compass to your map:

        var compassWidget = new Compass({
          view: view //view is the map object
        }, "compassDiv");
        compassWidget.startup();

Simply pressing the compass icon on the screen will reset the orientation of the map.

Map After Rotation	Map after resetting the orientation with the compass widget

A full interactive demo of using the compass widget.  (Best to use with a touch screen and/or track pad)

Summary

The examples shown here are just a few of then many possibilities available in the JavaScript API.  The final release of the API will still not be ready until sometime in 2016.  The development team here at SSP is staying on top of the new features and and beta releases so we’ll be ready to help your organization with knowledge based or implemenation consulting.  If your orgaanization is moving from an older API to the 4.0, we can help with that migration path as well.

Stay tuned for updates as this release comes closer to its final implementation.  And if you’re interested in learning more about the use of this technology with your organization, please contact us.