Esri Technical Support Blog

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

Other Boards in This Place

Latest Activity

(380 Posts)
MunachisoOgbuchiekwe
New Contributor III

Introduction

This is a quick blog post to show how easy it is to integrate beautiful graphs into your JavaScript application using the 4.x API. If you are new to the ArcGIS API for JavaScript, we provide an easy way to get started making web mapping applications. Head over to the ArcGIS API for JavaScript site to get started. For this sample we will be using a third party library called Chart.js. Chart.js is a simple yet flexible JavaScript charting library which makes it easy to make simple graphs for your data.

Load in the Chart.js library into your JavaScript application

In order to use Chart.js in our application we need to load it in as a module. This is because Dojo uses Asynchronous Module Definition (AMD) format to load in modules as supposed to loading in a file using a script tag. To achieve this we can use dojoConfig to load in our custom JS package as a module.

<script>
        const options = {
            // tell Dojo where to load other packages
            dojoConfig: {
                async: true,
            packages: [
                {
                    location: 'https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.js',
                    name: 'Chart'
                }
            ]
            }
        };
</script>

<script src="https://js.arcgis.com/4.7/"></script>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

As you can see from the sample code above, we are going to tell dojo to load in a module from a Content Delivery Network (CDN). In this case we are using the CDN that Chart.js provides for us. You can also install the files through a package manager like npm or Bower. You can learn the different ways of installing Chart.js through their Installation documentation. To avoid any potential errors, ensure the dojoConfig is declared before the ArcGIS for JavaScript API.

Integrating Chart.js in your JavaScript application

Once you have completed the above steps, we can now use Chart.js in our JavaScript file...

require([
    "esri/Map",
    "esri/views/MapView",
    "esri/PopupTemplate",
    "esri/layers/FeatureLayer",
    "esri/widgets/Popup",
    "esri/tasks/support/Query",
    "https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.js",
    "dojo/domReady!"
  ],
  function (Map, MapView, PopupTemplate, FeatureLayer, Popup, Query, Chart)‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

In the require array we put in the CDN link to the library. We then name the module Chart so that we can create a new instance of it later on in our code.

Querying data from a Feature Layer

In this example I am using a Feature Layer of California from ArcGIS online . Each time I click on a county, I want a pop up to show information about the demographics of the area. For this we can use a Query, which will allow us to get information from our Feature Layer and spatially query the layer to only show data where we clicked. Once the promise has resolved, we will call the view's PopUp and send the data to setContentInfo. This is a function that will create the chart for us. The setContentInfo function will be explained more in detail on the next section. Here is the code snippet that shows this.

   var query = new Query();

    query.returnGeometry = true;
    query.outFields = ["STATE_NAME", "WHITE", "BLACK", "ASIAN", "HAWN_PI", "OTHER", "HISPANIC"];
    query.where = "1=1";
    query.num = 50;

    // On view click, query the feature layer and pass the results to setContentInfo function.
    view.on("click", (e) => {
      query.geometry = e.mapPoint;
      featureLayer.queryFeatures(query).then((results) =>{
        if(results.features[0].attributes.STATE_NAME === "California"){
          view.popup.visible = true;
          view.popup.open({
              title: "Doughnut Graph Example",
              content: setContentInfo(results.features[0].attributes)
          });
        }
      });
    });‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Create a graph using Chart.js

We now get to include the Chart module that we instantiated awhile ago. In the previous code we set the content parameter to a function called setContentInfo and passed in the data. In the next code snippet, we are going to create this function and use it to initialize our charts inside the pop up. To start off we are going to create a new canvas element and give it the id of myChart.

var canvas = document.createElement('canvas');
canvas.id = "myChart";‍‍‍‍

Then we are going to set up the Data Structure object with our own data. In this particular case we are using a doughnut graph which would have a different Data Structure than a line graph. For more information about the different types of charts you can use, please see the following documentation on the Chart.js website. For a doughnut graph the object would look like the following code snippet below.

var data = {
      datasets:[{
        data: [results.ASIAN, results.BLACK, results.HAWN_PI, results.HISPANIC,
                 results.OTHER, results.WHITE],
        backgroundColor: ["#4286f4", "#41f4be", "#8b41f4", "#e241f4", "#f44185", "#f4cd41"]
      }],
      labels: [
        'Asian',
        'Black',
        'Hawaiian',
        'Hispanic',
        'Other',
        'White'
      ]
    };‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

You can see that in the data array, we are setting the results that we got from our feature layer. Each result will represent one piece of the doughnut graph, the backgroundColor is also set for each result value. Additionally, the labels attribute is set for each item in the data array.

Finally, our last step is to create a new Chart object with the data and type properties. Then we return the Chart object.

var myPieChart = new Chart(canvas,{
      type: 'doughnut',
      data: data
  });
return canvas;‍‍‍‍‍‍‍‍‍‍

Once the object is return we should get a chart inside our pop up showing demographic information each time we click on a county. You can also create this sample using TypeScript. Here is a link to the sample, if you are wondering how it would look in TypeScript.

Tip: Here is a quick video showing how the sample works.

Conclusion

The ArcGIS API for JavaScript makes it super simple to integrate beautiful graphs from third party libraries like Chart.js. There are many more libraries that you can integrate into your JavaScript application like this that allows you to make powerful maps with additional functionality. Feel free to head over to the GitHub Gist page for the full sample.

more
3 2 3,836
JuliePowell
Esri Contributor

This post provides insight into how we manage version 3.x of the ArcGIS API for JavaScript (JSAPI) release plan and technical support strategy.

 

The JavaScript development team has made great progress bringing version 4.x of the JSAPI closer to parity with 3.x, meanwhile introducing new tech for building very dynamic, expressive 2D and 3D apps. Over the next year, each release will be a balance between capabilities for reaching full parity with 3.x and brand-new innovation. Many customers’ app requirements are fully met by the current release of the 4.x API (4.7) while others are still dependent on 3.x (either with existing apps that they are maintaining or new apps that have requirements such as full editing support). We also have many Esri apps built on 3.x, such as the 2D version of Web AppBuilder for ArcGIS.

 

Technical Support Plan

Because we have a large customer base that still depends on 3.x, we are very careful about how we manage the Product Life Cycle (PLC). Our strategy is to make all PLC dates relative to our estimation of the last 3.x release. When is the last release? It depends on when we reach full parity in 4.x, enabling us to move critical apps such as ArcGIS Online’s map viewer to 4.x. When we reassess our estimation of the final release date, PLC phase dates are updated accordingly.

 

Relative dates for each PLC phase are determined in the following manner:

- 3.x remains in "General Availability" until the last release of 3.x.

- 3.x moves into "Mature Support" after the last release, and lasts for 1 year. 

- 3.x is retired 3 years after General Availability ends. 

For more information about the above software support phases and what they entail, refer to the PLC.

 

Recent Update to the PLC

Version 3.x was scheduled to move into mature phase next month; July 2018. Based on the current status of the API, this was moved to July 2019, with the mature phase starting August 2019 and retirement in August 2022. As mentioned above, these dates will be revisited depending on progress made towards 3.x parity.

 

If you need further clarification on the above, please reach out to Technical Support through the normal channels.

 ArcGIS API for JavaScriptKwasi Asante‌ 

more
6 4 3,160
GregoryLehner
Esri Contributor

This blog post provides the latest updates regarding deprecated features in the recent release of ArcGIS 10.5.1.

With each release, Esri assesses and adjusts the products and functionality supported in the ArcGIS Platform based on customer needs and technological trends. The purpose of the Deprecated Features for ArcGIS document is to provide as much advanced notice as possible regarding these changes.

For more information on Esri's plans for deprecating features, refer to the following PDF document, Deprecated Features for ArcGIS 10.5.1 (this deprecation plan is also available in the following technical article from the Esri Support Knowledge Base). The documentation linked above provides additional information about each note below, in addition to recommendations of alternative workflows and applications. Information from previous releases (10.4 and 10.5) is also included in the link above.

Here are some of the major changes in ArcGIS 10.5.1:

  • ArcGIS 10.5.1 is the last release to support Visual Studio 2013 for the ArcObjects SDK.
  • In the near future, the cluster functionality in the ArcGIS Server component of ArcGIS Enterprise will be deprecated. Instead, it is recommended to create separate ArcGIS Server sites where multiple clusters would have been used previously.
  • ArcGIS Enterprise 10.5.1 will stop bundling the portalpy module in favor of the ArcGIS API for Python. No further development is planned for this module.
  • ArcGIS 10.5.1 will be the last release to support the PostgreSQL 9.3.x series of releases, DB2 versions 9.7 and 10.1, and the ST_Raster data type for Oracle, SQL Server, and PostgreSQL.
  • ArcGIS 10.5.1 is the last release to support anything other than the Data Store product as a data store for a Hosting Server.

Note: The deprecation of cluster functionality does not affect the ability to create multi-machine sites. ArcGIS Server sites with multiple machines continue to be fully supported.
Gregory L. - Online Support Resources

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

This blog post is the third in a series of JavaScript debugging tips and tricks to help you on your way. See JavaScript Debugging Tips Part I  and also JavaScript Debugging Tips Part II for our previous segments.

In the past two JavaScript Debugging Tips posts on the Esri Support blog, we looked at the Network Tab and the Console Tab as part of the Google Chrome Developer Tools. While most modern browsers have some form of developer tools, here we use Chrome for our examples.

Our goal for this third blog post in the series is to introduce more advanced tips and tricks to enable you to more effectively debug and troubleshoot your JavaScript code. Specifically, we will focus on three areas: enhanced messaging to the console, better ways to set breakpoints using conditions specified at runtime, and a more efficient way of stepping through breakpoints in the Sources tab with a method called blackboxing.Part 1: Console.table

Console.log is our primary debugging function, but this function's output can be a bit difficult to read (especially when viewing a lot of data). One way to enhance our console log messaging and view data more easily is to display a list of objects as a table, which is accomplished using the console.table function. This function takes one mandatory argument, which must be an array or an object, and one additional optional parameter. Each element in the array is a row in the table.

Let’s take a look at the Console Table sample.

1. Open the Chrome Developer Tools by using shortcut keys (Windows: Control + Shift + I, and Mac: Command + Option + I), or by navigating to the top right-hand pane of the browser, clicking the three grey vertical dots, and choosing “More tools” > “Developer tools”.

2. Select the console tab.

3. Click “Perform Query” in the sample application. This performs a query task to view all counties in Connecticut. The code uses the console.table to print the results in a table as shown below.

console.table_.png

console.table



Every row in the table shows all attributes for a specific county. Next, we use the console.log to compare the console.log and console.table. This function will print a line with an array of objects.
console.log_.png

console.log



Once we expand the array, we can view the objects in a list.
console.log-expanded.png

console.log expanded



To view the attributes, we must expand the objects in the list.
console.log-expanded-with-attributes.png

console.log expanded with attributes

While we can access the attributes of one feature when using console.log, we can view all attributes for all features at once using console.table! The image below shows both functions in the console window.
console.table-console.log_-e1496352191442.png

console.table & console.log

Part 2: Conditional Breakpoints

In JavaScript Debugging Tips Part II, we talked about setting a breakpoint in the Sources tab, refreshing the application, and pausing the application at that line of code. This is a great way to examine your code and how functions are called, and where potential areas of trouble could arise.

However, sometimes we don’t want the breakpoint to be reached every time. Sometimes we only want the breakpoint to be reached if certain conditions are met. While we could write some logic code in the form of a loop to check for values, there is an easier way to do this at runtime.

For example, let’s look at a sample.

1. Open the Edit Features sample and the Chrome Developer Tools.

2. Navigate to the Sources tab, and left-click line 301 to set a breakpoint there.

3. After the breakpoint is set, right-click the breakpoint and select “Edit breakpoint…”.
EditBreakpoint2.png

Edit Breakpoint

Note: We could also get here by first right-clicking line 301 and selecting “Add conditional breakpoint…”.
AddConditionalBreakpoint1.png

Add Conditional Breakpoint



4. Set a condition whereby the breakpoint will be reached only if the user inputs “test” into the “Contact:” field when updating a feature. Here is the code: editFeature.attributes["Incident_Address"] == “test”Note: We do not want to use "=" because this assigns a value and thus always returns true, so we must use "==".
BreakpointExpression1.png

Breakpoint Expression



5. If we input “test” for the “Contact:” and click “Update incident info”, the breakpoint will be reached and the application pauses.
ConditionMet1.png

Condition Met



These conditional breakpoints can be useful for testing when you want to ensure data is sent back to the server correctly, or for error handling when you want the application to pause so you can inspect the object(s) of interest rather than letting your error handling code take over.Part 3: Blackboxing

While setting breakpoints is a great way to make friends and go through your code, this process can occasionally kick you out of the file of interest and into another source file or into a third-party JavaScript library.

For example, let’s look at a sample.

1. Open the Query SceneLayerView sample to follow along (this is similar to the sample found on developers.arcgis.com).

2. Open the Chrome Developer Tools, select the Sources tab, and left-click line 49 to set a breakpoint.

3. Refresh the page so the debugger pauses on line 49. From here, a "Paused in debugger" message appears (next to a "Play" button and a "Step Over" button). See below for a screenshot.
PausedAtLine49.png

Paused At Line 49



4. If you click the "Step Over" button about five times, you exit out of the main .html file and into the init.js file of the ArcGIS API for JavaScript. You can explore the init.js file, but we want to focus on the code that we wrote. Click the "Play" button to get home safely.
DebuggerInInitJSFile.png

Debugger in init.js file



Enter blackboxing to save the day. Blackboxing is a method to exclude files and libraries from the debugger, so that your focus remains on your file(s) of interest. Let’s take a look at how we can blackbox the ArcGIS API for JavaScript library so we can just step through the main file of interest.

1. With the Developer Tools open, click the three vertical dots in the far right-hand pane of the window and select Settings.
Developer-Tool-Settings.png

Developer Tool Settings

Developer-Tool-Settings2.png

Developer Tool Settings



2. On the left-hand side of the window, click “Blackboxing” to open the “Framework Blackbox Patterns”.
Blackboxing.png

Blackboxing



3. Click the “Add pattern…” button, and enter this framework pattern: js.arcgis.com.*\.js
Blackboxing-Pattern.png

Blackboxing Pattern



4. Click “Add” and check the box above the pattern input to “Blackbox content scripts”.

5. Close the Settings window and return to the Sources tab.

6. Refresh the page so the debugger pauses on line 49.

7. If you click the "Step Over" button about five times, you exit out of the main .html file and into the debugger:///VM file (this is an empty function which you can safely ignore, or read more about here), as well as complete one more "Step Over" operation into the application. Now rather than debugging unnecessary, ancillary libraries, you can focus on debugging the code you wrote or are trying to understand.Debug_Blackbox.gif

One last point worth mentioning is that blackboxing applies to the browser, not just to the webpage or web app of interest. After testing completes, feel free to remove the blackboxed pattern(s) to ensure a conventional web browsing experience.

This concludes our blog about advanced tips for using the Google Chrome Developer Tools with examples from the ArcGIS API for JavaScript. We hope you found the above tips useful and entertaining. For more information about debugging tips with JavaScript applications, here are a couple additional resources from the past several years:Additional Resources
Join us next time as we continue to delve ever deeper into Developer Tools and learn some valuable lessons. Happy debugging!</span>

Artemis F. and Noah S. - Esri SDK Support

more
3 1 5,025
ArtemisFili
Esri Contributor

Web AppBuilder for ArcGIS (Developer Edition) version 2.4 supports a Report class with which you can print a file with a map, tables, and other supporting elements.

Check out the ArcGIS blog post, Creating a Custom Widget for Web AppBuilder for ArcGIS using the Report Class, that describes how you can extend the Report class to create your own custom widget to use in Web AppBuilder for ArcGIS (Developer Edition).


Artemis F. - Technology Lead, SDK

more
0 0 625
Noah-Sager
Esri Regular Contributor

This blog post is the 2nd in a series of JavaScript debugging tips and tricks to help you on your way. See JavaScript Debugging Tips Part I – Google Chrome and the Network Tab for our first segment.




The most enjoyable part of any programming assignment is right near the beginning when you sit down with a pile of tools and resources and start hammering away at raw clumps of code. The more difficult part comes when you attempt to launch the application, only to watch that tightly-written code unravel into multiple late nights staring at a computer screen. However, all is not lost, as we have an excellent recommendation for you, which is the subject of this blog: the Console tab inside your favorite browser's Developer Tools.

If you’re feeling upset or emotional, the Console tab is the perfect choice for you. Maybe someone in your family is dealing with a difficult time, and could use some cheering up. Consider the Google Chrome Console tab (gluten free options are available). Users who like the Console tab might also enjoy the ArcGIS API for JavaScript.
Sad_Console.png

I obviously do not understand homographs



As we wrote in Part I, accessing the Chrome Developer Tools is easily done using shortcut keys (Control + Shift + I) or by navigating to the top right of the browser, clicking on the hamburger and choosing “More Tools”, then “Developer tools”.

Once the Developer Tools are open (other Developer Tools are available in other browsers), there are several Tabs that become accessible to you. Here we will focus on the Console. If you want to open the Console tab in Chrome Developer Tools directly, use this keyboard shortcut: Control + Shift + J (the “J” stands for jocular). For more neat tips, please check out the official Google documentation about Chrome DevTools: Using the console.

The Console is used for two purposes: 1) to display logged information from an application's JavaScript (usually during application development), and 2) to interrogate objects and execute JavaScript interactively. In this blog, we will look at both kinds of examples, and elaborate on some additional tips and tricks that we use in Technical Support.

The first thing we can do is to add some “console.log” statements inside our application. We will take a modified sample, hosted on GitHub, which can be found here: Sample Console Application. Feel free to follow along at home.

At lines 60-62, and again at line 66, we’ve added some of those “console.log” statements to display information about our Feature Layer. Our use case is that we are creating a web mapping application, and during our testing, we want to ensure that the data we are consuming from ArcGIS Online is the correct data to display on the map. To this end, we print out a few choice pieces of information about the Feature Layer: the title of the layer, and the URL of the layer. Since I do not know the syntax for the URL property, I use “URL” and “url” as seen below.
ConsoleLog_JavaScriptCode.png

JavaScript console.log statements



Here is a screenshot of the output of the “console.log” statements. We see the relevant information we were expecting. Also, please note that the output for “featureLayer.URL” is “undefined”. This is because items in the console are case sensitive. The valid property is “featureLater.url”, and invalid properties do not throw an error, and instead return an undefined result. This can be a tricky thing to trap, but later on in this blog we will look at some tips for dealing with this sort of issue.
JavaScript_Write_To_Console_Example1.png

JavaScript Console Output from console.log



With the Console still open, let’s try entering the same property values from the code:

featureLayer.titlefeatureLayer.URLfeatureLayer.url


Notice that all of these properties now return an error, instead of an actual value (or even “undefined”). This is because the local variables are no longer in scope after the app is initialized, so even the “featureLayer” object cannot be recognized.  Here is a screenshot of the output of the new console statements.
JavaScript_Write_To_Console_Example2.png

JavaScript Console Output after App is loaded



If we had made “featureLayer” a global variable, we would then see “undefined” returned for the object in the Console (variable is known, but the details are still not accessible). The point is: only variables that are in scope can be interrogated in the Console. So can we use the Console interactively and type in property values? Let’s find out.

The next thing we can do to our sample app is to add a “debugger;” statement in the code. We will take another modified sample, hosted on GitHub, which can be found here: Sample Console Application 2. Feel free to follow along at home.

At line 60, we’ve added a “debugger;” statement to help display information about our Feature Layer in the Console.
JavaScript_Write_To_Console_Example3.png

JavaScript debugger statement



How does this statement work? Click the link to run the application. Then, open the Developer Tools (Control + Shift + I or Control + Shift + J), and refresh the application. The application should pause, and you should see a “Paused in debugger” message at the top of the screen, and the “debugger” line highlighted in the Sources tab:
PausedDebugger2.png

Paused in debugger 1



Now, with the application paused, we can go back to the Console tab, and try interrogating the featureLayer properties again. Here we see that we have proper scope to the variable and we can see the output:
PausedDebugger3.png

Paused in debugger 2



Cool, right?

Let’s look at another option, similar to “debugger”. Back to the Sources tab, notice the line numbers to the left of the code. If we left-click on a line number, we can set a breakpoint, which will have the exact same effect as writing “debugger” in the code. Left-click on lines 56, 62, and 66 in the same application, then refresh the application.
Breakpoint1.png

Breakpoint 1



The application pauses immediately at the first breakpoint. Now, we could go back to the Console tab and again inspect variables and properties to our heart's content. Not only that, by clicking the curved arrow to the right of the Play button at the top of the screen, we can step through our application and watch the excitement as we see how the code executes step-by-step. Or, we can click the Play button at the top of the screen, and let the application run to completion, or to the next breakpoint.
Breakpoint2.png

Breakpoint 2



And another Play button click brings us to the next breakpoint.
Breakpoint3.png

Breakpoint 3



The point of this blog is to highlight the usefulness and functionality of the Console, but we do want to point out another usage of setting breakpoints here as well. Breakpoints allow the developer the ability to see the order in which asynchronous code executes, how functions are run and what parts get skipped or fail. For more information about debugging tips with JavaScript applications, here are a couple additional resources from the past several years:
In this installment, we learned how to access and use the Console tab inside Chrome Developer tools to reveal the properties and values of variables and objects in our JavaScript code. This information can greatly facilitate the debugging and coding of a web-based application. This concludes part two of a multi-part series on JavaScript Debugging Tips. Join us next time when we delve even deeper into some Developer Tools, and we all get raises. Happy debugging!
Noah S. and John G. - SDK Support Services

more
2 4 2,663
GregoryLehner
Esri Contributor

This blog post provides the latest updates regarding deprecated features in ArcGIS 10.4 and in the recent release of ArcGIS 10.4.1.

With each release, the platforms and functionality supported in the ArcGIS platform are assessed and adjusted based on customer needs and technology trends. The purpose of the Deprecated Features for ArcGIS document is to provide as much advanced notice as possible regarding these changes.

For more information on our deprecation plans, refer to the following PDF document, Deprecated Features Plan for ArcGIS 10.4 and 10.3.x Series (this deprecation plan is also available at the following technical article in the Esri Support Knowledge Base). The documentation linked above provides additional information about each note below, in addition to recommendations of alternative workflows and applications.

Here are some of the major changes in the update for ArcGIS 10.4 and 10.4.1:

  • The ArcGIS Engine SDK for Cross-platform C++ will not be supported after ArcGIS 10.4.1.
  • ArcGIS 10.4.1 will be the last release of Engine Linux. ArcGIS 10.4.x for Engine Linux will be supported till 2022.
  • ArcGIS 10.4.1 (and ArcGIS Pro 1.3) will be the last release that supports the PostgreSQL 9.2.x series.
  • ArcGIS 10.4.1 for Server will be the last release to include support for the Mobile Content Server and Mobile Data Access features in the GIS server.
  • ArcGIS 10.5.x for Server will be the last major release series to include support for the Search Service functionality in the GIS server.
  • ArcGIS 10.2.1 for Windows Mobile is the last release. No additional features, functionality, or performance / stability updates will be released for this application.
  • ArcGIS 10.4 is the last release that supports the Oracle Spatial GeoRaster data type.


Gregory L. - Online Support Resources

more
0 0 884
Noah-Sager
Esri Regular Contributor

Now that the ArcGIS API for JavaScript 4.0 has been released for a couple of weeks, this is an excellent opportunity to take a walk through some of the new syntax and functionality. This blog will go through a sample 3D application focusing on the Search widget. You can follow along with the sample code from the Esri Developer Support GitHub repository, and run the hosted sample here: View it Live.

Functionality-wise, the app displays a 3D map with four widgets: Search, Zoom, Compass, and Attribution. By default, the View includes the latter three widgets, as described in the documentation. If you’re not familiar with the 4.x changes, all mapping apps contain a map and a view. The map holds the data, and the view contains the visualization information for that data. In other words, the map is the subject, and the view is the camera; complete with filters, modes, and settings. All 2D apps will have MapViews, and 3D apps will have SceneViews (note: the term ‘scene’ indicates three dimensions across ArcGIS). The same applies for maps from ArcGIS Online and Portal for ArcGIS: a WebMap is 2D, and a WebScene is 3D.

2d3d_2-1024x662.png

2D map + 3D scene



You can input a location in the Search widget and either select a result from the drop-down suggestions, or press Enter on the keyboard to go to the first place in the list. The view will zoom to that location and place a picture marker symbol on the map. If you open the Developer Tools in the web browser, you will see some helpful console log messages indicating the progress of the Search widget.

In the code, there are many helpful comments describing the functionality, with links to references to find more information. The Map and SceneView constructors might be new, but they are very straightforward. What I want to focus on here are two things: the SearchViewModel (beginning on line 88), and the view.ui (beginning on line 117).

One of the awesome features of 4.0 is the separation of the styling and the business logic. This means that widgets have a view and a ViewModel. The view is the widget itself and handles the display of the widget, while the ViewModel handles the properties and configurations. I should mention that we don’t have to use the ViewModel if we don’t want to since the ViewModel properties are also wired to the widget view. This was done for simplicity purposes. As an example, let’s look at the Search widget in the code:
searchWidget.png

Search Widget and SearchViewModel



The actual widget constructor was used for naming the widget and setting the visibility to true (default is true anyway). The SearchViewModel handles all the configurations that were set to customize the user experience and interface the way I needed (see the sample for comments). What’s interesting about this ViewModel system is because it's separated from the widget constructor, it’s now way easier to share business logic amongst widgets and code bases. Here is some more information about the SearchViewModel.

The second interesting aspect of 4.0 I will discuss here is how we add the Search widget to the app. Let’s look at the code snippet from 4.0 and from 3.x. Currently, we can add the widget directly to the view’s user interface without creating a separate div element. This is an efficient (and dare I say, elegant) workflow.
addSearchWidget4.png

Add Search Widget 4.0



At the 3.x versions, we need to create a div element, reference the div when the widget is created, and reference it again inside the HTML body tag.
addSearchWidget3.png

Add Search Widget 3.x



For more information about adding widgets to the view, you can reference this documentation.

In summary, the ArcGIS API for JavaScript is a powerful product that leverages the power of GIS directly on your web browser. If you’ve been working with earlier versions of the API, reading the Transition to 4.x help document can get you going. And if you’re brand new, you can start with the Discover 4.x Guide. There’s a lot more to come as we continue to add functionality and awesomeness to the JavaScript API 4.x. Happy coding!
Noah S. - SDK Readiness Lead

more
1 0 466
GregoryLehner
Esri Contributor

Update, 2 June 2016: Google Chrome 51.0.2704.79 was just released; it fixes the change that caused a blank screen for ArcGIS Online, Portal for ArcGIS, and applications built with the ArcGIS API for JavaScript. If you are affected by this, please click the Customize and control Google Chrome button and navigate to "Help > About Google Chrome" to force an update check and upgrade to this latest patch level.

The previous version was 51.0.2704.63, and the fixed version is 51.0.2704.79.

Update, 27 May 2016: KB 13156 has been published on the Support website to provide additional information about this issue.

---------------------

Google released an update to Google Chrome (version 51), which was pushed out to the public on Wednesday, May 25th. Unfortunately, this update included a change that impacts anyone using Google Chrome to access ArcGIS Online or Portal for ArcGIS versions 10.3, 10.3.1, 10.4, or 10.4.1.

This change impacts many apps built on the ArcGIS API for JavaScript (versions 3.8 - 3.16), several subsets of custom apps built by users, partners, and Esri Professional Services (for example, any app that uses the feature table or an analysis widget), and, most notably, the "home app" in ArcGIS Online and Portal for ArcGIS.

You may be seeing a screen similar to this after logging in: a blank screen with few or no elements.

googlechrome51.jpg

What you can do:

If you are using Google Chrome to access ArcGIS Online, the above listed Portal for ArcGIS versions, or apps built with the above-listed versions of the ArcGIS API for JavaScript, please turn off auto-update in your Chrome browser now. If Chrome was updated, you will need to temporarily use another browser (such as Internet Explorer or Mozilla Firefox) until patches have been released.

What Esri is doing:

  • The ArcGIS Online team is preparing fixes that will go live this evening.
  • We are still working on a solution for Portal for ArcGIS.
  • Developers using the hosted version of the JavaScript API are unaffected, as it has already been patched.
  • We are working on a solution for JavaScript API developers that use either a custom build of the API or use it locally.


We will provide updates at the top of this blog post regarding Portal for ArcGIS and ArcGIS API for JavaScript as soon as we have more information. A technical article has been released for this issue, KB 13156, which provides some additional detail about this problem.

If you have run into any problems as a result of this bug that impact your workflows, please contact Esri Support Services at 1-888-377-4575.


Gregory L. - Online Support Resources

more
0 0 1,924
ArtemisFili
Esri Contributor

Beta versions of Esri vector basemaps are now available through ArcGIS Online as vector tile layers. These vector basemaps are accessible as both ready-to-use web maps and as vector tile layers you can add to a map. Additionally, vector basemaps include a variety of styles, some new and some that are similar to existing Esri basemaps. Web maps you create that contain vector tile layers can be used in web applications you configure or build using Web AppBuilder for ArcGIS. As a developer, you can build your own custom applications that use these vector tile layers using the ArcGIS API for JavaScript.

Please consider the following before deciding to use the current release of vector tile layers:

  • Vector tile layers are only supported in applications built with the ArcGIS API for JavaScript. This includes configurable applications, applications built with Web AppBuilder, and custom applications built with the JavaScript application programming interface (API). ArcGIS Runtime SDKs will add support in 2016.
  • Vector tile layers can be displayed in Internet Explorer 11 and in most other current versions of desktop browsers, including Chrome, Firefox, and Safari.
  • Vector tile layers have the best performance on machines with newer hardware.
  • There are issues displaying vector tile layers at a large scale.
  • Maps containing an Esri vector basemap are printed with the Esri Streets basemap. All other maps containing vector tile layers are printed without the vector tile layers.
  • The Esri vector basemaps are currently in the beta stage and are subject to change during this period. You may need to update or replace vector tile layers built using the beta versions of the vector basemaps. The Esri vector basemaps have some known limitations that Esri will address during the beta period, including the following:
    • Labels in languages that display right-to-left scripts, such as Arabic, are not drawn properly.
    • Labels along vector tile boundaries sometimes do not display completely.
    • The topographic map style does not contain some layers (for example, contours, landform labels, and spot elevations) that are included in World Topographic Map.
    • The topographic and streets (with relief) maps, which reference a hillshade base layer, only enable users to zoom in to about a 1:10k scale.
    • The tiles do not include layers for one-way arrows or address labels.
    • Some parks and land polygon features extend into the adjacent ocean areas.
    • River labels along very curvy lines are sometimes too compressed and difficult to read.
    • In some areas, local road labels and shields display, but not the underlying local roads.

Learn more about vector tile layers here.
Julie P. - Technical Product Manager, ArcGIS API for JavaScript

more
0 0 1,262