Simple Street Map Using the ESRI JavaScript API

For the past year or so I’ve been working on creating maps for the City of Scottsdale (current employer). First one was redoing the public maps which can be found here. Now it involves integrating maps into some of the internal systems. These maps are based on the ESRI JavaScript API. I gave a talk about this very topic. Since I feel I’ve become quite knowledgable in this area, I figured I would start sharing some tips & tricks I’ve come across working with this API.

If you’re familiar at all with ESRI, they have numerous products that include ArcMap and ArcServer. For a lot of the features that the JavaScript API has rely on an ArcServer exposing a REST API on the backend. I will try to show examples in the future that don’t rely on ArcServer just to show that there’s no financial investment needed to create maps with the API.

So lets jump right in.

Bring In the API

The only two pieces required to work with the API are as follows (as of this post the current version is 3.9):

Obviously the css would go in the head and you can put the script pretty much anywhere. Although there’s only one script file brought in, there’s a lot more coming down inside that package. One of those is the Dojo framework. There’s a number of reasons why they based their API on Dojo but probably the most important is SVG support. Which, when making maps, makes sense that they would need that. Other components included are put-selectordgrid, and xstyle. I will not be going into depth into any of those in this post but maybe in the future.

 Initial Markup

This is what the markup should be for the page. There’s not a lot there. We brought in the two API pieces, we have a #map div to use as the container for the map, and use some styles to make the map take up the whole page.

Not doing anything too crazy yet.

Creating a Map

This is where we start getting into the meat and potatoes.

Something I didn’t mention before when talking about Dojo is that is uses AMD to load all the various modules. This way you can select what pieces you do or don’t want. If you’re not familiar with AMD and how it works with JavaScript, RequireJS has a great article explaining it. Dojo uses the AMD format instead of the CommonJS format. With that being said, let’s start by bringing in the map module:

If you’re at all familiar with AMD, this should be pretty straightforward. We are asynchronously loading theesri/map module which is passed in as an object in the callback as Map. If you also want to make sure that the DOM is ready before creating the map, Dojo does have its own DOM ready implementation. Just add it to the require paramenters:

This will not call the callback function until the DOM is fully loaded. The exclamation point denotes that it’s a AMD Plugin instead of a module, and that’s why no parameter is needed for it.

Now that we have the Map object, all we need to do is instantiate one, point it at our container, and set a few options, then we have a map.

The Map object’s constructor takes two arguments. The first being the ID of the div to put the map in, and the second being an options object. Let’s take a look at each of the options specified above:

  • center: [-56.049, 38.485] – The latitude and longitude to initially center the map on.
  • zoom: 3 – The initial zoom level. Higher the number, the more zoomed in it will start out at.
  • basemap: "streets" – ESRI provides a number of free basemaps that are available. Options include: "satellite", "hybrid", "topo", "gray", "oceans", "osm", "national-geographic".

If you want to look at all the options available for the map.

Result

Here’s what the full page should look like:

If you copy that into an HTML page and run it in the browser, you should get something that looks similar to this:

Simple ESRI Map

Closing

This is just the first in a few posts I hope to make showing how to use the ESRI JavaScript API in many different ways. If you have any feedback or suggestions for topics relating to mapping in JavaScript, you can hit me up on Twitter.