Client-side mapping and rendering of data in the browser has improved substantially over the last few years. A variety of new methods are available for geospatial analysis, geometry manipulation, and  rendering large spatial datasets in the browser. In fact, using modern JavaScript packages, we rarely make any round trips to the server to perform analysis or dynamic rendering. This trend will continue as devices and browsers that leverage GPU become increasingly capable of performing advanced graphics processing. Here’s a short synopsis of some of the major browser-based tools we’ve leveraged in our projects at DVG. Best of all, they are all free.

Client-side Spatial Analysis: Esri JSAPI and Turf

The Esri ArcGIS API for Javascript (JSAPI) geometryEngine (esri/geometry/geometryEngine
) has been nothing short of a game changer in terms of ‘doing GIS over the web’. By GIS, I mean actual, meat and potatoes spatial analysis, not just rendering a pretty map in your web browser.
Esri has included this module in their JSAPI for years and it continues to improve to this day. In particular,  when combined with the recent addition of the projection module and the JSAPI’s dynamic rendering and labeling capabilities. Gone are the days of making calls to the ArcGIS Server Geometry Service to perform overlay operations, topology, geometry statistics and geometry manipulations. Leveraging the geometryEngine, particularly the async version that uses WebWorkers, allows us to test spatial relationships, geometry editing, geometry measurements, statistics and overlay analysis without degrading user experience. Most importantly, it allows us to perform these powerful GIS calculations in a disconnected editing environment. The following illustration provides a good example of the power of the geometryEngine and featurelayerviews, which allows for real-time user feedback and geometric calculations on the fly:

Example utilizing the Esri JSAPI geometryEngine

If you are looking to do any geometry manipulation or measurement in the browser, chances are you will want to use the geometryEngine. However, this is not the only spatial analysis library available.

Turf.js is another powerful Javascript library for performing spatial analysis and geometry manipulations in the client. Turf has been on the scene since before the advent of the JSAPI geometryEngine and enjoys a healthy user base and support system, as it is stewarded by Mapbox. It’s powerful, lightweight and includes a plethora of similar spatial operations and geometry functions to the geometryEngine.

To be clear, there is no one ‘better’ library when choosing what to use for spatial operations in the client. It depends particularly on the nature of your spatial data (i.e. format and projection), the type of operation you need to perform and the context of your web application infrastructure (is it already leveraging Esri based services and technology?). We have used the geometryEngine extensively in many of our more complex projects, particularly in those applications that are already loading the JSAPI. Turf has a clear advantage when you need to perform a few spatial operations in an application that doesn’t utilize the JSAPI or is utilizing GeoJSON based data. You also have the added advantage of leveraging it serverside in NodeJS. However, if you need to perform spatial operations on Esri geometries or data that is in a custom or local projection, the Esri JSAPI has the clear advantage as Turf only supports WGS84 and Web Mercator.

Reprojections? Yeah you can do that too

As of the Esri JSAPI 4.7, you can now perform reprojections of layers entirely on the client-side utilizing the (esri/geometry/projection) module. This is yet another way that we can prevent an expensive round trip to the server for a geometry service operation. Using the client-side projection module instead of the geometry service can substantially improve processing times and application performance, particularly when large datasets and many geometries are involved. The projection module is currently only supported in browsers that support WebAssembly, however the module includes a handy method (isSupported()) that allows us to test this. Regardless, this offers a substantial improvement in performance and reduced network traffic when dealing with a large number of features to project.

Dynamic Rendering and Visualization

This is perhaps where client-side has made the most progress and massively changed the user experience in the browser. With the rise of vector tile services and new web rendering technologies leveraging the client GPU, the traditional and tough barriers to true dynamic and fluid rendering of large complex datasets on the client have largely been removed. When combined with the (esri/renderers/UniqueValueRenderer) &  (esri/layers/support/LabelClass) classes in the JSAPI, we can quickly and seamlessly dynamically render, filter and relabel our operational data content without having to request new content from the server. Similarly, with the rise of VectorTilelayers and vector tile basemaps we have the ability to publish large complex map products once and re-render/label in many different ways to suit every targeted application. But we will leave an in-depth discussion of vector tiles for another day.

Rendering more data with WebGL

Vector based feature layers (esri/layers/FeatureLayer) were traditionally rendered using Scalable Vector Graphics (SVG), which limited the number of features that could be shown on the map at a given time. Since 4.5, Esri has added greater support for leveraging WebGL with large feature datasets on the client. This has allowed us to go from rendering several hundred features on the map at a time to hundreds of thousands. It has also allowed us to dynamically symbolize and render these features faster on the client. To enable WebGL for feature layers, simply add the following script to your application before importing the Esri JSAPI.

var dojoConfig = {
has: {"esri-featurelayer-webgl: 1}
};

FeatureLayerViews

As mentioned earlier, featurelayerviews (esri/views/layers/FeatureLayerView) also pave the way for powerful, dynamic and interactive spatial applications in a myriad of ways. The Esri Javascript API now adds full client-side support and power to layerview spatial and statistical queries. What does this mean for your web GIS application? Again, it means no round trips or queries directly to your web services, such as a hosted featurelayer service when wanting to filter and ‘drill down’ on your data. Leveraging featurelayerviews allows you to create complex and real-time queries on a featurelayer’s data in the client, and it allows you to render the results and statistics in real time without ever having to make a network request. If you haven’t been utilizing featurelayerviews when dealing with large featurelayer datasets, we recommend taking a closer look at it.

Here at DVG we are always striving to do more on the client in order to enhance user experience and improve performance in thin client applications. These tools and libraries have become an important part of our toolbox in helping to meet this objective. The bottom line: better user experience and opportunity for interactive data exploration of large datasets on the client.