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:
- Switching basemaps
- Loading webmaps from an organization
- Searching for an address or place (geocoding)
- Searching for a location on the map (reverse geocoding)
- Routing and turn by turn directions
- Authentication using OAuth2
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:
- Alert – A simple notification widget.
- Authenticate – An authentication widget to sign in and out of an ArcGIS portal.
- WebMapBrowser – A simple webmap browser widget to change the webmap used in your application.
- UserNav – A menu container widget used in conjunction with the Authenticate widget.
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!
Commenting is not enabled for this article.