Esri JavaScript API Examples: 15 High-Tech Webmaps and Webscenes

esri javascript api windfarm webmap webgl

Last Updated: Apr 21, 2018

What can you do with the Esri Javascript API?

The maps you can build with Esri Javascript API are altering the way that we perceive our world and the way that we interact with it.

Its powerful API helps keep us engaged for the challenges and opportunities in the 21st century, both in interactive 2D and 3D environments.

Just like any API, the Esri JavaScript API offers ways to create your own custom applications in a variety of ways.

For example, the Esri Javascript API lets you build 2D webmaps and 3D webscenes with rich information like basemap imagery, geoprocessing widgets, integrated mesh layers and 3D objects.

1 PointCloudLayer (3D LiDAR)

esri javascript api point cloud layer

Since ArcGIS API for JavaScript 4.2, point cloud scenes have given the functionality for quick display of large volumes of symbolized and filtered point clouds.

Just for a ballpark figure for how big a point cloud is: the LiDAR web scene below is more than one billion points. Do you want to create a PointCloud layer?

First, create a LAS dataset layer. Next, you have to generate a scene layer package (.slpk). Finally, you have to publish it as a scene service on Portal or ArcGIS Online.

Imagine the capability to share PointCloud Layers within your organization?

require(["esri/layers/PointCloudLayer"], function(PointCloudLayer))

2 Live Web Service & WebGL (Windmill Speed and Orientation)

esri javascript api windfarm webmap webgl

One of the nice things about the Esri JavaScript API is how you can create 3D models in external applications and render them as a built-in layer.

For example, this windmill model was created in Blender with the 3D rendering in WebGL.

And the best part?

Depending on the current weather conditions in Palm Springs, the windmill blades orientation and speed adjust accordingly. So we have near real-time windmills spinning in sync with a web service. How cool is that?

require(["esri/views/3d/externalRenderers"], function(externalRenderers))




3 Integrated Mesh Layer (3D Office Space)

esri javascript api building floors map

The building wireframe, interior space, walls and doors are a thing of beauty in this web scene. Each one represents a separate mesh scene layer.

If you want to generate 3D integrated mesh layers of your own, then you can automatically construct them in applications such as Drone2Map.

But what’s best in this web scene is how it uses spatial querying to identify the separate 3D pieces of the building meshes and wireframes.

require(["esri/layers/IntegratedMeshLayer"], function(IntegratedMeshLayer))

4 Animate Color Variable (New York Construction)

esri javascript api new york construction animation

For over 1 million buildings, this webmap animates building construction in New York City since 1934.

As you increase the year of construction, the building footprints change to blue based on slider year. For all buildings constructed in years before, footprints are gradually shaded pink.

Overall, it’s a unique way to visualize the changing landscape of New York before 1934. You can use the Esri JavaScript API to achieve the animated color visual variable in the following manner:

requestAnimationFrame() + HTML slider

5 Election Results (Opacity Variable)

esri javascript api 2008 election results animate variable

Using the opacity visual variable, you can add some rich cartographic effects to your web maps. For example, this web map displays the 2008 US presidential election for each voting precinct. While more votes means larger circles, color represents the candidates.

But what’s special is how the opacity visual variable represents the margin of victory. When the slider is at the “contested” end of the spectrum, circles are opaque and the winner won by a small margin of victory. But when at “landslide”, this represents a large margin of victory.

Using WebGL, this renders faster and allows more features than SVG.

require(["esri/layers/FeatureLayer"], function(FeatureLayer))




6 Martian Coordinate Systems (Life on Mars)

esri javascript api life on mars

Today’s astronomers want to examine an increasing number of planets and moons in a dynamic way. In the case of Mars, we can irrigate the martian planet to see how water drains against a proxy reference datum called the Mars areoid.

While the Hellas Impact Crater is the lowest point, Olympus Mons volcano is the highest peak above the areoid. In this web map, it simulates if you filled water in the martian planet.

Elevation data is from the Mars Orbitor Laser Altimeter (MOLA) instrument. Interesting to note, this web map uses the Mars 2000 Equidistant Cylindrical (based on Plate Carrée). Instead of the Web Mercator projection, we can measure distances correctly on Mars.

Projection: Mars 2000 Equidistant Cylindrical (based on Plate Carrée)

7 Data Driven 3D Extrusion (Western Pacific Typhoons)

esri javascript api western pacific typhoons

In the typhoon-record breaking year of 2005, the Western Pacific Typhoon web scene shows 23 typhoons that ripped through the Pacific Ocean at this time.

Like these weather maps, we can interact with this map in interesting ways. For example, we see how wind speed (cylinder scale) relates with barometric pressure (red to yellow color scheme) in each typhoon path.

Typhoons can grow enormously along its path of destruction (in blue). This thematic global scene combines various 2D and 3D data sets to tell the complete story of how far typhoons can travel in the Pacific Ocean.

require(["esri/symbols/ExtrudeSymbol3DLayer"], function(ExtrudeSymbol3DLayer))

8 Local Environment (France Live Scene)

esri javascript api livescene

Depending on the time of day, this webscene view reflects the local time in Brest, France. Alternatively, if you want to adjust the clock’s hands, the surrounding environment will change accordingly.

As time passes, day turns to-night and the scene view darkens in a realistic fashion. At night, the position of the stars will align in their proper locations in relation to the Earth. This means that you can gaze at the stars in the comfort of your home as if you are in France. Pretty neat.

Using the Esri JavaScript API environment setting, you can set the lighting and atmosphere parameters. Here’s where you can set the sun position to reflect the current time.

view.environment.lighting.date = Date.now();




9 Integrated Mesh Layer (Yosemite)

esri javascript api integrated mesh layer

Just to really hit the point home on the beauty of mesh layers…

This integrated mesh layers web scene includes VRICON’s 3D surface model of Yosemite. The realism of the natural and built environment 3D textures is surreal.

It captures all the small details of trees, cliffs and valleys.

require(["esri/layers/IntegratedMeshLayer"], function(IntegratedMeshLayer))

10 Dashboard (New York 3D Animated Crime Rates)

esri javascript api crime animated 3D heatmap

In this NYC dashboard web application, you can interactively buffer locations in New York and find crime trends.

Pick any spot on the map, and watch NYCs open data crime stats grow and shrink depending on crime locations. On the right side, the dashboard upticks or down-ticks based on the number of crimes.

Instead of a table, this a neat way to explore crime trends. It’s animated. It’s interactive. And it’s pleasing to the eye.

11 Composite Views

esri javascript api composite views

Like having multiple data frames in ArcMap, Esri JavaScript API MapViews is how you can display different locations in a map with different viewports.

For example, if you wanted to show the contiguous 48 states of the United States, you can add them to one viewport. For Alaska and Hawaii, these can go into separate map views.

On top of that, each map view can have its own projection system.

require(["esri/views/MapView"], function(MapView))




12 Scene Look Around Camera

esri javascript api realistic scene look around

As if you are on the rooftop of a building, you can rotate in a fixed camera position. Instead of dragging with a mouse pointer, you can use keys to look up, down, right and left.

In the Portland web scene, you can use keyboard shortcuts to get a view in all possible directions.

And you can adjust the tilt, position and heading of the camera. From the camera properties, you can set how these interact in your scene view.

require(["esri/Camera"], function(Camera))

13 Geoprocessing Widgets (Viewshed)

esri javascript api viewshed analysis tools

Since the release of the Esri JavaScript API 4, you can perform 3D analysis in your web scenes. That’s right, if you want to perform a viewshed, geodesic buffers or hot spot analysis, you can do it in a web application.

For example, you can click anywhere in this mountain-filled web scene and see what’s visible from that point in space. And you can simulate viewsheds in multiple locations to really get a feel for how viewsheds work by interacting with the application.

If these types of tools are going to be available in web applications, what does this mean for desktop GIS software?

require(["esri/tasks/Geoprocessor"], function(Geoprocessor))

14 Sea Temperature (Custom Elevation Layer)

esri javascript api 3d custom thematic sea temperature

This web scene represents the thematic layer of sea surface temperature using a custom ElevationLayer. If temperatures are above 17°, you can hide it by overlaying a white graphic on top.

You can interact with this map by moving the slider left to right. For example, you can adjust the slider for various times of the year.

BaseElevationLayer.createSubclass( { /* code goes here */ })

15 GeoEnrichment Analysis

esri javascript api geo-enrichment

Geoenrichment is how to visualize information about people, places or locations through charts, tables and infographics. For example, if you click in this web map, you obtain information about the age groups for neighborhoods in California in an age pyramid infographic.

There are four types of geoenrichment infographics available:

  • One Variable shows a single variable
  • Related Variables display multiple variables
  • Age Pyramid shows an age pyramid
  • Lastly, tapestry gives lifestyle information for neighborhoods

require(["esri/dijit/geoenrichment/Infographic"], function(Infographic))

Conclusion

Everyday, the Esri JavaScript API allows us to connect with our community and our place that we’re living in unique, innovative and powerful ways.

From Esri JavaScript API 3 which gave us 2D webmaps… to Esri JavaScript 4 which now gives us the opportunity to build interactive 3D webscenes… ArcGIS Online (AGOL) has revolutionized the art of mapping online.

With the Esri Javascript API, we can better inform for decision-making and represent priorities from our own spatial knowledge. We can convey and claim our own future giving our own sense of place that we’re living in.

Now, it’s your turn:

Have you used Esri JavaScript API? What are some of the features that you use?

Be the first to comment

Leave a Reply

Your email address will not be published.


*