Loader of the Things: One Library to Load Them All

UPDATE 5/11/18: The recently released @arcgis/webpack-plugin is a viable alternative to esri-loader if you are using webpack with the latest version of the ArcGIS API for JavaScript. See this blog post for details on when you should use one or the other.

The esri-loader library hit the 2.0.0 milestone this week.  This release doesn’t add any features, but merely removes the old callback APIs that were deprecated when we introduced the promise-based ones in v1.5.0. If you’ve been using the new APIs, you can save yourself a few bytes by upgrading to 2.0.0. You can read more in the 2.0.0 release notes.

One does not simply load modules from the ArcGIS API

One does not simply load modules from the ArcGIS API

The work leading up to this milestone got me reflecting on the broader state of loading ArcGIS API for JavaScript modules and I came to this conclusion:

If your ArcGIS web application uses any other module loader besides the Dojo loader (i.e. webpack, Rollup.js, etc.), you should be using esri-loader.

That’s a bold statement, so let me back it up.

Continue reading “Loader of the Things: One Library to Load Them All”

Happy holidays from the cedar team!

cedar logo - holiday style

This week we released cedar 1.0.0 in beta and updated the charts in the Hub to use the new version. This lays the ground work for us to make it simpler for ArcGIS Hub users to create and share richer visualizations of their open data.

The focus of cedar v1 is making it easier to create multi-series charts with data from one or more feature layers. Here are a few highlights of what will be changing in v1:

Take a few moments to play around with the new cedar for yourself and let us know what you think.

Cedar multi-series line chart

Continue reading “Happy holidays from the cedar team!”

Using the ArcGIS API for JavaScript in Applications built with webpack

Update: See my Jan 2018 post on esri-loader for my most recent thoughts on how to load ArcGIS API for JavaScript modules.

It seems like webpack is becoming the most popular module bundler in the Angular 2 and React communities. It is not (yet) possible to have webpack directly load modules from the ArcGIS API For JavaScript. However, the ArcGIS developer community has come up a couple innovative workarounds that make it easy to add ArcGIS maps and services to applications built with webpack. Unfortunately I’ve seen a few developers run into trouble because they don’t understand how these abstractions work.

In this post, I’ll explain the hack that underlies these solutions and explore the pros and cons of two patterns for loading ArcGIS modules in applications that are built with a module bundler. Although most of the examples shown use webpack, the same patterns can be applied to rollup.js as well.

Continue reading “Using the ArcGIS API for JavaScript in Applications built with webpack”

ArcGIS Image Service Support in Esri Leaflet

I’m excited to see support for ArcGIS image services landing in Esri Leaflet Beta 6. In addition to serving up raster data such as imagery and digital elevation models, image services provide powerful analytical capabilities. Now Leafelt users can visualize infrared imagery and LiDAR data, get the elevation where a user clicks, and much more. I’m looking forward to seeing how the Leaflet community brings these new capabilities into their applications.

Infrared Imagery in Esri Leaflet
Using the new L.esri.ImageMapLayer class to display an ArcGIS image service in Esri Leaflet

Continue reading “ArcGIS Image Service Support in Esri Leaflet”

Generating Custom Widgets for Esri’s WebApp Builder with Yeoman

Recently I’ve been developing custom widgets for the ArcGIS Web AppBuilder, and I have found that there is a lot of boilerplate code that you have to create for each new widget. I thought that a Yeoman generator would be a useful way to scaffold out the widget files, so I created generator-esri-appbuilder-js.

What It Does

The package contains a couple of generators that walk users through a series of prompts to gather information about a custom widget that they want to develop for the Web AppBuilder, and then scaffolds out the widget’s files.

Screenshot of running the generator-esri-appbuilder-js generators
The generator prompts you for widget properties and then scaffolds out the required files.

Continue reading “Generating Custom Widgets for Esri’s WebApp Builder with Yeoman”

Using Bootstrap Map? You Might Not Need jQuery…

I’ve been working with Allan Laframboise to add examples of how to use Esri’s popular Bootstrap Map framework without a dependency on jQuery. The Dojo-Bootstrap library, a Dojo port of the Twitter Bootstrap JavaScript modules, finally has a release candidate that is compatible with Bootstrap 3.x. This enabled us to replace the references to the Bootstrap JavaScript with references to the Dojo-Bootstrap modules and completely remove the reference to jQuery.

Bootstrap Map: Now with Dojo-Bootstrap
Now you can choose whether you’d like to get started using Bootstrap with jQuery or Dojo.

You can try out the new Dojo examples live at:

http://esri.github.io/bootstrap-map-js/demo/dojo/getstarted.html

Continue reading “Using Bootstrap Map? You Might Not Need jQuery…”

Esri Landscape Modeler Application

Screenshot of Landscape Modeler

This week the Landscape Modeler application that was previewed at the International User Conference in June has hit the ArcGIS Marketplace.

Landscape Modeler is a web application that allows users to perform fast weighted overlay analysis at multiple scales or over a large area. This is ideal when there are multiple users that want to develop their ideas about suitability analysis models and share their results with each other.

You can find out more about Landscape Modeler listing on ArcGIS Marketplace (don’t worry, it’s free to any user with an ArcGIS Online organizational account). However, I wanted to mention a few things that I find interesting about this application from a developer’s perspective.

Continue reading “Esri Landscape Modeler Application”

Landscape Modeler Application Presented at Esri UC 2013

The Landscape Modeler application that I’ve been working on was presented during the plenary session of the 2013 Esri International User Conference. Lanscape Modeler is a JavaScript application that enables ArcGIS Online users perform weighted overlay analysis with the new landscape datasets that Esri is hosting on ArcGIS Online. The application is able to perform real-time weighted overlay at scales ranging from that of a city to the entire country by leveraging the ability of ArcGIS image services to apply raster functions on the fly.

Below is a video of the quick 2 minute run through that Suzanne Foss presented in San Diego where she demonstrates how to use the application to develop a conservation plan for an area outside of Santa Cruz:

The app will be released in the coming weeks, so stay tuned.

Getting to Know the ArcGIS Online Platform

A few of the sessions at the 2013 Esri Developer Summit got me interested in learning more about how I could utilize some of the new features of ArcGIS Online to help me build web mapping applications. As a developer, my instinct is to approach each new application with a blank page in SublimeText and a cup of coffee, but I’m getting better at learning to utilize the services that are out there to help jump start new development.

Full disclosure: I’ve been working for Esri for close to a year now. I’m sharing my personal experiences in trying to better understand the strengths and weaknesses of the ArcGIS Online platform versus other online mapping platforms. I won’t pretend to be able to be completely impartial, but it is also not part of my job to advocate for the platform.

Now that we’ve got that out of the way we can get down to business. My goals are to understand:

  • How far I can get without writing a single line of code
  • The limits of the built in features of the platform like web maps and templates
  • How to start a project using those built in features (e.g. for rapid prototyping) and then transition to a custom solution to get beyond those limits

The Plan

My plan is to tackle a small application from a few different angles. After seeing the Developing custom JavaScript Applications with ArcGIS Online presentation where they running routes as sample data, I was inspired to build a map of my own trail running routes in Southern California.

Continue reading “Getting to Know the ArcGIS Online Platform”

Creating Mapping Applications with the ArcGIS API for JavaScript and Dojo Bootstrap

When the design team doesn’t do Dijit*

Recently, our design team delivered a functional HTML wireframe that was developed with Twitter Bootstrap. Ordinarily that would not be a problem, but the application we’re working on is based on the ArcGIS API for JavaScript and as such relies entirely on Dojo. The developers wanted to be able to leverage as much of the designers work as we could without having to include jQuery – a dependency of Bootstrap’s JavaScript components. A little digging around lead me to Kevin Andre’s Dojo Bootstrap project – a pure Dojo implementation of Twitter Bootstrap. We were able to successfully use Dojo Bootstrap in our ArcGIS API for JavaScript based mapping application. This enabled us to leverage the declarative mark up and styles already written by the designers without adding a jQuery dependency.

Just in time for the 2013 Esri International Developer Summit, I’ve created a simple application that demonstrates how to incorporate Dojo Bootstrap with the ArcGIS API for JavaScript:

Continue reading “Creating Mapping Applications with the ArcGIS API for JavaScript and Dojo Bootstrap”