Migrating from Google Maps JavaScript API to ArcGIS API for JavaScript

ArcGIS JavaScript
Sep 6, 2018 · 4 min read

Have your costs to display a map in your web app drastically increased with Google’s recent pricing changes? If so, you aren’t alone. This pricing update has driven many developers that were using the Google Maps API to explore web mapping alternatives and move to ArcGIS. There are a couple of reasons for this.

First, the ArcGIS API for JavaScript is a state of the art web mapping API with powerful developer tools for exploring data and creating visualizations in both 2D and 3D, widgets for building compelling user experiences, and client-side processing for creating interactive apps using the latest browser technology.

Second, with an ArcGIS Developer Subscription you can do a lot for free:

  • Use of all of Esri’s APIs and SDKs for web, native, and mobile platforms
  • 1,000,000 basemaps and geosearch transactions per month
  • Credits towards generating routes
  • Unlimited non-revenue generating apps
  • Unlimited users
  • Access to a wide selection of rich content and services hosted in ArcGIS Online
  • Style basemaps and manage your map content
  • Host, query and analyze geographic content

If you’re ready to migrate your web app from the Google Maps JavaScript API to the ArcGIS API for JavaScript, here’s a quick overview on some of the basic concepts.

Get going developing with the API

Get started by signing up for the ArcGIS Developer Program at no cost. This will give you access to everything listed above, plus quite a bit more (see the Developer website to learn more).

To load the Google JavaScript Maps API you reference the API and include your Google API key like this:

With the ArcGIS API for JavaScript you won’t need an API key; you can simply reference the API and stylesheet like this:

Display a map

Here’s how you initialize a new map with Google:

With ArcGIS, a new map is initialized in this way. Notice that you create both a map and a view. A view enables separation between the map data from visualization of the data in either 2D or 3D (or both).

This code will create a map with Esri’s World Navigation vector basemap. If you’d like, you can choose another basemap from the ArcGIS Online basemaps such as satellite imagery, topographic, dark gray canvas, or another basemap you have access to.

Adding a marker

Adding a marker with Google is done in the following way:

To add a marker with ArcGIS, a new graphic is added to the view’s graphics collection.

The code above creates a cyan colored circle “simple marker” symbol, but there are more ways in which you can symbolize your marker. For example, you can select a symbol from Esri Icon Font. Here is an example of using a map pin icon:

In ArcGIS, a more dynamic option for selecting a symbol is using your data’s attributes to drive the color, size, and opacity of the symbol. To see this in action, have a look at this sample showing how you can create graphics from GeoJSON earthquake data, and dynamically set the size of each graphic’s symbol according to the magnitude of the earthquake.

Use a popup

Google’s InfoWindow is used for displaying content in a popup window, and is attached to a marker in this way:

You can add a popup with the ArcGIS API for JavaScript by creating a popup “template.” Templates define the content of the popup. Here are all steps combined to create the map and view, add a marker with a pin icon, and attach a popup:

View this app in codepen.

For fun, you can play around with the same app in 3D by simply using a “SceneView” rather than a “MapView.” See the code and live 3D app here.

Next steps & more resources

Check out the following tutorials on migrating web apps from Google to ArcGIS:

There are a variety of resources for learning about the ArcGIS API for JavaScript and maximizing your productivity when building your web apps:

  • Explore hundreds of samples in a live sandbox for playing around with the code
  • A helpful guide focused on key topics about developing with the API
  • Searchable API reference.
  • ArcGIS API for JavaScript dev labs, which are step by step tutorials for learning how to develop with the API, for example:

Find places

Display point, line, and polygon graphics

Display and track your location

Get a route and directions

Search for an address

Style a vector basemap


Originally published at www.esri.com.

ArcGIS JavaScript

Written by

The @Esri team behind creating beautiful, interactive mapping apps to explore and understand your geographic data. https://developers.arcgis.com/javascript/

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade