Reflections on Building Web Maps With Esri JS API From a Leaflet.js Fanboy

When I was in graduate school, I gave myself the goal of one day creating interactive web maps. This was in 2010. About five years later I was ready to learn a platform.

Still new to JavaScript, I decided to give the Esri JS API a try. I think I got as far as creating a map and adding an overlay layer. But I got stuck on creating a popup.

As I was aware of another platform called Leaflet.js, I decided to give that a try. I was much more successful with Leaflet.

During these past few years, I have built several embedded and single-page web map apps with Leaflet.js and Esri REST services. These have included a non-profit membership map, filter-by-date subdivision and land development reviewed plans map, and many others.

Last August, I decided it was time to give the Esri JS API another try. I was fortunate to be able to take an instructor-led course. And I have since transitioned a few maps from Leaflet to Esri.

I wanted to share a few reflections on working with both platforms. I believe both have a place for developers. And it is worth taking the time to learn the basics of both.

Yeas For Esri

  • Built to seemlessly integrate with our Esri web services
  • Various map widgets built into library (default map extent, address/layer search, etc)
  • Support for 3D views
  • API underpins Web AppBuilder and Classic Storymap templates

Yeas For Leaflet

  • OpenSource platform at heart with an amazing community
  • Plugins allow for integration with many data types and service providers
  • Easy and intuitive to learn
  • Lightweight library

Below are links to one Esri JS API and one Leaflet.js map I’ve built. Feel free to view these and run dev tools to compare the two platforms yourself.


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s