ArcGIS JavaScript Maps SDK Blog - Page 6

cancel
Showing results for 
Show  only  | Search instead for 
Did you mean: 

Latest Activity

(80 Posts)
MikieKelly
Occasional Contributor

I have just created an app with Esri's JavaScript API. It shows an exaggerated form of Earth's Crust - go find some mountains hidden in the ocean!

You can check it out via the following link: Earth's Crust

It is built with Esri's 4.x JavaScript API which allows end users exaggerate topobathy elevation layers for more insightful visuals. A number of custom widgets have been built to enhance the experience:

  • Layer List
    • Select layers from the Living Atlas are available for overlaying on the map
  • Shuffle
    • Various slides have been added to the underlying Web Scene. Every time you click the widget, you are guided to a new location and the relevant title is displayed. The vertical exaggeration and basemap get updated according to slide settings
  • Map Screenshot
    • Download a .png image of the current map view. Layer List settings are honored
  • Contact/Feedback Form
    • Contact the developer and look for information or provide feedback (via Survey123 form)
  • Share
    • Copy the current URL to clipboard
  • Vertical Exaggeration
    • Alter the vertical exaggeration of the elevations from 0 to 100 using a slider
  • Basemap
    • Toggle between Esri Imagery and National Geographic basemaps

Other Features

  • Elevation
    • As you pan the scene, view the elevation of the map center point in meters and feet
  • URL Parameters
    • x, y, z, wkid, heading, tilt, fov: These are updated as you browse the 3D Scene so you can bookmark areas of interest
    • basemap: Updates as you toggle basemaps
    • exaggeration: Stores the current vertical exaggeration
  • Mobile Friendly
    • Original screen resolution determines whether vertical exaggeration widget is expanded by default

Cool Living Atlas layers available through the app are listed below:

  • Distance to Shore
  • Distance to Coast
  • TopoBathy Elevation Tinted Hillshade
  • Temperature - Sea Surface
  • Temperature - Sea Floor
  • Temperature - Land - January Average
  • Temperature - Land - July Average
  • Population - 2016 Density Estimate
  • Geomorphology - Sea Floor
  • Earthquakes (Recent) - Shake Intensity
  • Earthquakes (Recent) - Events by Magnitude
  • Earthquakes (Major) - Historic Records
  • Volcanic Eruptions (Significant) - Historic Records
  • World Exclusive Economic Zone Boundaries


Suggestions and feedback welcome

Here are some of screenshots of the app:

Via Desktop Browser:

Via Mobile Browser:

Screenshot of the app visualized on mobile

Screenshot of the app visualized on mobile (Firefox)

Screenshot of the app visualized on mobile (Firefox)

Photos downloaded through app widget:

Screenshot created from app of elevation exaggeration

Screenshot created from app of elevation exaggeration with geomorphology layer

Screenshot created from app of elevation exaggeration with sea floor temperature layer

Screenshot created from app of elevation exaggeration with sea surface temperature layer

Screenshot created from app of elevation exaggeration showing elevation of India vs Tibet

Screenshot created from app of elevation exaggeration around California

Suggestions and feedback welcome 

ArcGIS API for JavaScript

ArcGIS Living Atlas of the World

ArcGIS Online

Web GIS

Web Developers

3D Mapping

Elevation Data

Global Content

Geo Developers

Developer Communities

GIS Developers

GIS Geeks

GeoGeeks

error.notfound.socialgroup

more
5 0 7,485
Noah-Sager
Esri Regular Contributor

Today, we are pleased to release versions 4.15 and 3.32 of the ArcGIS API for JavaScript. Here are some of the 4.15 highlights (please refer to the 3.32 link at the end for 3.x updates).

The stats

We fixed 50 bugs, added 17 new classes, created 8 new samples, and 99% of the codebase in now written in TypeScript. We also play nicely with deck.gl:

Build a custom layer view using deck.gl

Edit Features in 3D

Make sweet edits and updates to FeatureLayers in 3D SceneViews with your favorite 2D editing widgets: Editor, FeatureForm, FeatureTemplates, and Sketch. When you scale or rotate 3D symbols with the interactive handles of the 3D point transform tool, the feature attributes are automatically updated through VisualVariable configurations. Check out the new Edit features in 3D with the Editor widget sample for a live example.

https://developers.arcgis.com/javascript/latest/guide/release-notes/#featurelayer-editing-in-3d

Edit features in 3D with the Editor widget

Modernize. Adapt. Overcome.

The API returns native promises (instead of Dojo promises) by default. We plan to completely remove Dojo promises at 4.16. This change might break your app, or it might not. You can opt-out of this change with a flag, but we’ll remove this opt-out flag at 4.16, so you might as well make your updates now. You can also use the esriConfig object as a global variable to set esri/config properties.

https://developers.arcgis.com/javascript/latest/guide/release-notes/#api-modernization

 

Seat at the Feature Table

Win friends and influence stakeholders with the new FeatureTable (beta) widget. When working with a large dataset, the table loads additional features as the user scrolls. Users can select rows (features) within the table. Works well with or without a map.

https://developers.arcgis.com/javascript/latest/sample-code/widgets-featuretable/index.html?search=F...

FeatureTable widget with a map

Attachment issues?

Don’t worry, this is all work related. The Editor widget was updated to support attachment editing. We also introduced a new Attachments widget which allows users to view attachments associated with a feature (pop-ups now use this widget under the hood to display attachments).

https://developers.arcgis.com/javascript/latest/guide/release-notes/#attachments%3A-viewing-and-edit...

That’s so Metal

The MeshMaterialMetallicRoughness (based on MeshMaterial) uses the metallic/roughness lighting model to enable physically based lighting. The metallic and roughness properties can be used to model various realistic materials including metals and plastics.

https://developers.arcgis.com/javascript/latest/api-reference/esri-geometry-support-MeshMaterialMeta...

Low poly terrain using mesh geometry

Wait, there’s more!

Act now to receive even more updates at no additional cost. Tools to better explore BuildingSceneLayer. Display features on top of IntegratedMeshLayer. Helpful updates to Clustering, MapImageLayer, and a variety of widgets. And there’s even more than that. Check out the links below to discover everything that’s new and exciting at 4.15 and 3.32.

Release Blog

https://www.esri.com/arcgis-blog/products/product/announcements/whats-new-in-arcgis-api-for-javascri...

4.15 Release Notes

https://developers.arcgis.com/javascript/latest/guide/release-notes/index.html

 

4.15 Samples

https://developers.arcgis.com/javascript/latest/sample-code/?search=4.15

 

3.32 What’s New

https://developers.arcgis.com/javascript/3/jshelp/whats_new.html

more
3 4 4,396
JimBarry
Esri Regular Contributor

When using the ArcGIS API for JavaScript (v4), and creating ~Layer objects, there are two ways to connect to the resource, either by loading the portal item by its portal ID, or by calling the REST endpoint URI directly:

var fl = new FeatureLayer({
  portalItem: {
    id: 'a624a764295e4887b096ab7972b7bd8f'
  }
 });

// OR...

var fl = new FeatureLayer({
 url: "https://services6.arcgis.com/0p6i4J6xhQas4Unf/arcgis/rest/services/SI_TRACKS/FeatureServer"
});‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

In either case, any rendering, popups, or other settings and configuration that you've saved back with the layer will come through.

If a layer or other resource in the app/page has some sharing perms set on it, making it only accessible by the Owner, or an Organization or Group within, it's by design that the API will open up a modal login dialog to see if the user is allowed to access that resource.

One advantage to loading the layer using its portal ID is when it comes to figuring out which layers are opening a modal dialog when you're not expecting them to. If your map contains many layers, this can be a bit of troubleshooting.

If you created the layer using the url property, the modal login dialog will look like this:

Not very useful.

But, if you created the layer using the portalItem property, the modal login dialog will look like this:

Very useful.

The dialog tells you right there exactly which Portal Item it is trying to open. You can go back into your code or your Content tab and find the layer that may not have its sharing permissions set as you expected. Or perhaps it's an item owned by some other person or organization. Or maybe the content used to exist, and doesn't any longer, and maybe then you can find the source data and rehost it yourself, then change the path/ID. Or just drop that item altogether if maybe it's no longer needed for your map or app.

There may be other pros and cons for creating layers with url or portalItem, but this here is a case where loading by portalItem gives you useful info for troubleshooting.

more
2 0 2,338
Noah-Sager
Esri Regular Contributor

Today, we are pleased to release versions 4.14 and 3.31 of the ArcGIS API for JavaScript. Here are some of the 4.14 highlights (please refer to the 3.31 link at the end for 3.x updates).

 

The stats

We fixed 43 bugs, added 12 new classes, created 15 new samples, and tacked on 2 new guide pages.

TimeSlider with timeOffset

Cluster Blockbuster

Point clustering is now a supported method of feature reduction on FeatureLayer, CSVLayer, and GeoJSONLayer in 2D MapViews. There are some differences between the 3.x and the 4.x implementations of clustering. The 4.x version is objectively better, or will be better, as we continue to iteratively add more functionality in future releases.

https://developers.arcgis.com/javascript/latest/sample-code/index.html?search=clustering

Clustering Samples

 

Widgets

We added the Line of Sight widget to analyze visibility in your 3D scenes, and the Daylight widget to change the time and date of your 3D scenes interactively.

https://developers.arcgis.com/javascript/latest/guide/release-notes/#3d-line-of-sight-widget

 

Daylight widget

Save Those Web maps

Web maps can be easily saved to ArcGIS Online and ArcGIS Enterprise with save() and saveAs() methods. This capability is in addition to creating and stylizing web maps in ArcGIS Online and ArcGIS Pro.

https://developers.arcgis.com/javascript/latest/sample-code/webmap-save/index.html

 

Soft-edge masks with Canvas2D

Performance enhancements

  • Significantly improved GPU performance by reducing number of polygon vertices drawn.
  • When rendering vector tiles, we generate significantly fewer WebGL and JavaScript calls.
  • Improved mesh strategy reduced the number of geometries that needed to be tessellated.
  • Optimized the Basemap Gallery widget data loading behavior in 2D MapViews.
  • Switching to/from DotDensityRenderer and/or HeatmapRenderer is much, much faster.

https://developers.arcgis.com/javascript/latest/guide/release-notes/#performance-enhancements

New Guides

All the color ramps used in the Smart Mapping symbology APIs can now be easily viewed, filtered, and copied to your apps in a new Esri Color Ramps guide page.

https://developers.arcgis.com/javascript/latest/guide/esri-color-ramps/index.html

This guide, together with the new Visualization best practices guide, provides easy access to more than 300 stunning color ramps designed by color experts.

https://developers.arcgis.com/javascript/latest/guide/creating-visualizations-manually/index.html

Esri Color Ramps

 

Depreciation

We’re trying out something new this time around. Rather than sticking to the typical naughty or nice list, we’re offering a list of deprecated items to help our users get ahead of upcoming API changes.

https://developers.arcgis.com/javascript/latest/guide/release-notes/#deprecated-classes%2C-propertie...

 

And more...

Have a better time with our API with time related updates, editing updates, map navigation updates, client-side geometry updates, smart mapping updates, my goodness, tessellation updates, and more. See the release notes to get the full story.

Tessellation helpers for custom WebGL layer views

Release Blog

https://www.esri.com/arcgis-blog/products/product/announcements/whats-new-in-arcgis-api-for-javascri...

4.14 Release Notes

https://developers.arcgis.com/javascript/latest/guide/release-notes/index.html

 

4.14 Samples

https://developers.arcgis.com/javascript/latest/sample-code/?search=4.14

 

3.31 What’s New

https://developers.arcgis.com/javascript/3/jshelp/whats_new.html

more
5 0 3,297
Noah-Sager
Esri Regular Contributor

Today, we are pleased to release versions 4.13 and 3.30 of the ArcGIS API for JavaScript. Here are some of the 4.13 highlights (please refer to the 3.30 link at the end for 3.x updates).

 

The Stats

We added 18 new classes, 4 new widgets, and fixed 33 bugs. Also, 96% of the codebase is now written in TypeScript.

ArcGIS API for JavaScript - 4.13

Attribute driven composite symbols

Wouldn’t it be sweet to symbolize features using a dictionary of symbols configured with multiple attributes? Well, now you can. With the new Dictionary Renderer, we offer a data-driven approach for symbolizing features when there are so many permutations that a UniqueValueRenderer would be inappropriate.

https://developers.arcgis.com/javascript/latest/guide/release-notes/#attribute-driven-composite-symb...

 

Performance

VectorTileLayers? They now draw faster and smoother with fewer network requests.

SceneLayers? Now twice as fast with half the calories.

FeatureLayers? More stable z-ordering and faster rendering of large polyline and polygon features.

https://developers.arcgis.com/javascript/latest/guide/release-notes/#performance-improvements

 

Modernization

We are planning to make the API return native Promises by default at 4.14, then completely remove Dojo promise at 4.15. We are also planning to remove the dependency on Dojo's `declare` module. These are significant changes that will both strengthen the API and make it play nicer with other frameworks. This release took a large step forward laying the foundation for these changes.

https://developers.arcgis.com/javascript/latest/guide/release-notes/#api-modernization

 

ImageryLayer

First, we reduced the number of files requested from CDN. But we didn’t stop there. You can now display images in ImageryLayer in their original coordinate system. And if the format is set to `lerc`, we now offer a client-side renderer.

https:// developers.arcgis.com/javascript/latest/guide/release-notes/#imagerylayer-updates

ArcGIS API for JavaScript - 4.13

 

And more...

There’s so much more to cover. Add, edit, delete, and reorder bookmarks with the Bookmark widget. PointCloudLayer now supports popups. One measurement widget to rule them all. Even better smarter mapping!

It’s been a fantastic release, and we are excited to share it with you. Please feel free to let us know how we’re doing via email/Slack/GeoNet/Twitter.

https://developers.arcgis.com/javascript/support/index.html

 

Couple more links to share:

 

Release Blog

https://www.esri.com/arcgis-blog/products/js-api-arcgis/announcements/whats-new-in-arcgis-api-for-ja...

Measurement Widget Blog

Measure Once with the new Measurement Widget 

 

4.13 Release Notes

https://developers.arcgis.com/javascript/latest/guide/release-notes/index.html

 

4.13 Samples

https://developers.arcgis.com/javascript/latest/sample-code/?search=4.13

 

3.30 What’s New

https://developers.arcgis.com/javascript/3/jshelp/whats_new.html

more
3 0 2,943
Noah-Sager
Esri Regular Contributor

Today, we are pleased to release versions 4.12 and 3.29 of the ArcGIS API for JavaScript. Here are some of the 4.12 highlights (please refer to the 3.29 link at the end for 3.x updates).

 

The Stats

We added 42 new classes, 11 new widgets, and fixed 34 bugs. Also, 93% of the codebase is now written in TypeScript.

 

TimeSlider

Time

Time is a key component of this release. We added a TimeInterval class to describe a length of time in different temporal units, a TimeSlider widget to simplify time manipulation in your application, and a timeExtent property in 2D MapViews and 3D SceneViews to easily update all time aware layers.

https://developers.arcgis.com/javascript/latest/guide/release-notes/#time

 

Performance

Loading, rendering, fetching, drawing, all these verbal nouns saw significant improvements with this release. Parallelization of requests. Tile processing optimizations. We’re talking revamped tessellators folks. Who wouldn’t want the new I3S specification version 1.7 to make your scene layers load 2x faster? Or how about pure client-side queries in 3D that don't require a round-trip to the server?

https://developers.arcgis.com/javascript/latest/guide/release-notes/#performance-improvements

 

Modernization

We take major strides to modernize our API at every release. This modernization allows our API to play nicer with others (e.g. other frameworks, native browser methods, and 3rd party APIs). This time around we made the BeforeInterceptorCallback function asynchronous, so it can now also return a promise. In fact, most asynchronous methods in the API now support an optional abort signal parameter, so they can be canceled and return a promise that will be rejected with an error. Lastly, there is a new has flag available to enable native JavaScript promises. Look out for an upcoming blog post to discuss this further.

https://developers.arcgis.com/javascript/latest/guide/release-notes/#api-modernization

 

Sliders

Note: we’re talking widgets, not small hamburgers. We added a slew of new slider widgets to help you interact with any kind of user input involving numbers or a range of values. You already met the TimeSlider, but we have several more Slider widgets that might interest you, including a base Slider widget, which is a great starting point if you want to make your own customized slider experience.

https://developers.arcgis.com/javascript/latest/guide/release-notes/#new-widgets

 

And More...

There’s so much more to cover. Realistic water rendering with the new WaterSymbol3DLayer. New 2D WebStyleSymbols (used to be only available in 3D)! Scale-dependent visualizations for smart mapping. Even better labeling options and behaviors??

 

It’s been a great release, and we are excited to share it with you. If we don’t see you at the UC in San Diego next week, please feel free to let us know how we’re doing via email/GeoNet/social media. Couple more links to share:

 

Release Blog

https://www.esri.com/arcgis-blog/products/js-api-arcgis/announcements/whats-new-in-arcgis-api-for-ja...

 

Video: What's new with the ArcGIS API for JavaScript 4.12

https://www.youtube.com/watch?v=J7LPAQx8IBg

 

4.12 Release Notes

https://developers.arcgis.com/javascript/latest/guide/release-notes/

 

4.12 Samples

https://developers.arcgis.com/javascript/latest/sample-code/?search=4.12

 

3.29 What’s New

https://developers.arcgis.com/javascript/3/jshelp/whats_new.html

more
1 7 5,092
Noah-Sager
Esri Regular Contributor

Today, we released versions 4.11 and 3.28 of the ArcGIS API for JavaScript. 


At 4.11, we added an Editor widget, a new GeoJSONLayer, made some significant enhancements to our 3D capabilities, and redesigned the website. Actually, we did a lot more than that, so please check-out our Release Blog and read the 4.11 Release Notes and the 3.28 What’s New from the links below to learn more.

ArcGIS API for JavaScript - 4.11

Read more here:

Release Blog

https://www.esri.com/arcgis-blog/products/js-api-arcgis/announcements/whats-new-in-arcgis-api-for-ja...

 

New 4.x Website Blog

https://www.esri.com/arcgis-blog/products/js-api-arcgis/announcements/a-better-experience-with-the-n...

4.11 Release Notes

https://developers.arcgis.com/javascript/latest/guide/release-notes/index.html

 

4.11 Samples

https://developers.arcgis.com/javascript/latest/sample-code/index.html?search=4.11

 

3.28 What’s New

https://developers.arcgis.com/javascript/3/jshelp/whats_new.html

more
1 0 1,899
BjornSvensson
Esri Regular Contributor

Today we released versions 4.10 and 3.27 of the ArcGIS API for JavaScript. Read more about it in:

and even more details in

more
3 0 1,722
BjornSvensson
Esri Regular Contributor

Today we released versions 4.9 and 3.26 of the ArcGIS API for JavaScript. Read more about it in:

and even more details in

more
6 5 3,472
JuliePowell
Esri Contributor

Support for CORS will be enhanced in 4.9 and will potentially require changes to your code. Read further for the full scoop on this.

The ArcGIS API for JavaScript has long supported CORS. CORS allows web applications to bypass a browser's same origin policy and access resources or services on other servers/domains.

When the web server supports CORS, a proxy is not required to do cross-domain requests. Supporting CORS as opposed to using a proxy is helpful as it can:

  • Provide a performance boost since the web application no longer has to send a CORS detection request back to its server, wait for the server to access the desired resource, and interpret the result before sending it back to the client.
  • Simplify development as it is no longer necessary to maintain a proxy on your server. Avoiding the use of a proxy also ensures that web tier authentication (i.e. Active Directory) can be used when accessing secured resources.

CORS and WebGL

There are multiple scenarios when either CORS or a proxy is needed due to cross-domain requests for a resource. CORS is more important now than ever before when using the ArcGIS API for JavaScript due to the API’s use of WebGL. Thanks to WebGL, the API can render hundreds of thousands of features with fast performance using the GPU. However, WebGL has different requirements than the traditional method of rendering using SVG. When loading images (such as an image used by PictureMarkerSymbol), SVG simply adds an image in the DOM, while drawing on the WebGL canvas requires access to the raw image data. Since the raw image data is required for rendering, the image must meet one of the following requirements: (1) be on the same domain as the app, (2) be hosted on a server that supports CORS, or (3) a proxy must be used.

With WebGL becoming the primary way in which the API renders graphics and its requirement to access raw image data, we’ve optimized the way in which we approach CORS.

Changes to how the API will handle CORS, starting at 4.9

The API will assume web servers support CORS. Here are the details behind how the API handled CORS until 4.8, and how it will change starting at 4.9.

Previously, the API would handle CORS in the following way:

  • Developers could predefine a list of corsEnabledServers to explicitly indicate whether CORS was setup for a given server.
  • If the service was published with ArcGIS Server, the API would automatically send a request to see if CORS was supported (note: this resulted in an extra request to the server before a resource could be requested).
  • If the server didn’t support CORS, a proxy rule could be configured (note: this resulted in the extra hop and performance hit described above).
  • JSONP was used as a workaround when the server wasn't known to support CORS and the request was a GET request for JSON. An example would be using a FeatureLayer from an ArcGIS Server version 10.0 or earlier.

If none of the above criteria could be met (not listed in corsEnabledServers, not an ArcGIS Server service, and no proxy setup), the API didn’t make the request to the resource and generated a console error.

Starting at 4.9, the API will handle CORS in the following way:

If you have configured a proxy rule in your code, the API will continue to use your proxy. Otherwise, requests will always be made with the assumption that CORS is supported.

Assuming CORS support is particularly useful when you don’t know what web servers you might be accessing in advance, for example in some scenarios when loading a web map with a mash-up of services. The first request will be sent assuming CORS is supported, and if the request fails due to the lack of support the API will automatically fallback to the configured proxy (via the proxyUrl property in esri/config.request).

This change also results in a performance gain when working with ArcGIS Server because it is no longer necessary to send a CORS detection request before accessing a resource (in the case when the server isn’t listed in corsEnabledServers).

What do you need to do?

  • If it doesn’t already, configure your web server to support CORS (if possible).
  • Another change at 4.9 is support for JSONP is being removed, which will simplify webpack builds. If your server doesn’t support CORS, setup your proxy so that the app would fallback to using the proxy when the CORS request failed. If you have a specific requirement for using JSONP, you can use the dojo request script module as a workaround.
  • If you previously used any of these APIs, they should be removed as they are no longer needed. Your CORS enabled server should “just work” since the API will make the request assuming CORS support.

esri/config.request

corsDetection

corsDetectionTimeout

corsEnabledServers*

forceProxy

useCors

 

esri/request

allowImageDataAccess option

* If your app is using corsEnabledServers with objects that have withCredentials: true, you should push the domain to esri/config.request.trustedServers instead.

This guide topic will be updated with the latest information about working with CORS after the 4.9 release.

more
11 1 22.5K
247 Subscribers