ArcGIS API for JavaScript

Maps App JavaScript

Example App: Maps App JavaScript

The ArcGIS for Developers Example Apps are a great way to start working with the ArcGIS Platform through the lens of a specific ArcGIS product. These example applications are designed to address real world needs, and go beyond what you might normally come across in standard tutorials or samples. The goal is to provide developers some guidance on best practices on building applications with the ArcGIS platform. You can read more details about the Example Apps in this blog post.

For you eager souls that have been looking for something written in JavaScript, we put together the Maps App JavaScript using the latest version of the ArcGIS API for JavaScript. The code is hosted on GitHub in the maps-app-javascript repository.

Modern Development Tooling

The Maps App includes all the modern essentials you would need to get started to build a full-scale application using the 4.x version of the ArcGIS API for JavaScript. The entire application is written in TypeScript, and uses Webpack in combination with the ArcGIS API for JavaScript. The Maps App also utilizes Service Workers to help enable caching of data and files for faster startup times of your application. Styling is provided with Calcite Web, and the CSS tooling uses Sass and PostCSS. The Maps App also uses a variety of Webpack plugins to build optimized files and images used when you deploy your application.

In addition to using all of these development tools, we also include a handy testing process. The Maps App uses Intern 4 for unit testing and provides a number of example unit tests you can review. Unit testing is a way to test pieces of your application to help isolate the issue, and can be extremely useful to find problems early in the development process.

Functionality Showcased

While most samples or tutorials emphasize one area of functionality, the Maps App JavaScript includes the kinds of features you would expect to find in a production application. Here is an outline of what you can accomplish with this app:

Widgets

Using widgets in your application can ease the development process by giving you pre-built chunks of functionality that you only need to configure, and don’t need to create from scratch. Building off these widgets and customizing them to suit your specific needs is also a great way develop apps. The Maps App JavaScript provides patterns for creating your own custom widgets with the ArcGIS API for JavaScript. Some of the custom widgets provided in the Maps App:

All these widgets are built using Calcite Web to provide a consistent user experience.

Build Awesome Apps

We often get questions on how to build ArcGIS API for JavaScript applications with various tools, from Webpack to unit testing, so we hope the Maps App JavaScript helps provide you with some guidance. We avoided using any 3rd party JavaScript frameworks for this application to give you a framework agnostic foundation for building scalable apps with the ArcGIS API for JavaScript. Feel free to take the example application and use it to start your own projects.

Hack it, pick and choose the pieces you’re interested in, do with it as you please. Go forth, and build some awesome apps!

About

Passionate about squirrels, maps, and writing (not necessarily in that order). Big fan of JavaScript. Journeyman mapper of Utility Lines and Public Restrooms. Product Engineer on the ArcGIS API for JavaScript team. In Noah’s spare time, he also enjoys parenting.

About

Softwhere Developer, blogger, author, geodev, and connoisseur of programming languages and JavaScript frameworks. I like to write code, sometimes it even works.

Next Article

What’s New in Basemaps (February 2018)

Read this article