Displaying Data Using Feature Layers

This is the third post in a series of posts regarding the ESRI JavaScript API and creating maps on the web. The first one I showed how to create a simple street map, and the second one was on how to draw a single point on the map. In this post, I’ll go a little more in depth on displaying some useful data on the map because that’s what makes maps useful. Read More

Gulp vs Grunt

I’m working on a web side project using Node.js and Express.js. If you’re not familiar with either of those things, I’ve linked to both of their homepages. Express.js isn’t a requirement for what I’ll be talking about here, but having a working knowledge of Node.js would be helpful.

Gulp & Grunt

Gulp and Grunt are both task runners based on Node.js. I won’t go into the nitty-gritty on what can be accomplished with both of these toolsets. If you go to their respective sites, it will do a better job explaining that than I can. What I will be discussing is just a comparison of the two on how it relates to the their config files.

The Project

After starting the project, I initially went with Grunt as that was the easiest to setup and get the project going. At some point, I decided to get the same tasks using Gulp. After porting the tasks to Gulp, I wanted to share the two files because, 1: For anyone to point out what I’m doing wrong or can do better, but 2: as a sort of reference for task translation between the two.

I’ll show the files first, and then I’ll kind of break them down.


Grunt:

Gulp:

 Breakdown

The jshint and less tasks are just for basic linting of JavaScript files and compiling LESS CSS. I know that Express will compile the LESS for me, but I want to add CSS linting at some point hence why I created the task to compile the LESS.

I did my unit tests using Mocha. I have two sets of tests, one for unit testing models and controllers, and one for doing full integration testing of the Express controllers. The unit tests just need for the app to set itself up to make sure models are registered along with other initialization steps. The integration tests actually spin up the Express serve to handle requests and interacting with the DOM.

The Grunt file has some maybe confusing pieces that I wanted to clear up. The first being thetime(grunt);. This shows how long a Grunt task takes to execute. Gulp already does that. The other piece is the loader. As seen at the bottom of other Grunt files, each plugin needs to be registered with Grunt before it can be run. The load-grunt-tasks package looks for Grunt plugins that you have installed and registers them for you. This saves many lines of repetitive code in the Grunt file.

Wrap Up

After switching everything to Gulp, I’m really happy with the result. As you can see, Gulp results in less code. One thing I also really like about Gulp is something fail to grasp is the fact that a lot of Gulp’s plugins don’t come from plugins at all. As long as a package implements the streaming standard, Gulp can use it in a task. I hope to go more into that in a future post. I more than welcome suggestions on how I can improve both of these files.

JavaScript Array ‘find’ Method

In working on a JavaScript API at work, I made this little snippet for adding a find method to JavaScript arrays. Since latest APIs are including a forEach and a filter, a find made sense but wasn’t there which baffles me. More than anything, I’m putting this here so I can find it later. 😛

Here it is, short and sweet:

 

Draw a Point On Our ESRI Street Map

In my previous post, I showed how to create a simple street map using the ESRI JavaScript API. This is a continuation on that post and builds on knowledge gained from that article. So if any of this doesn’t make sense, refer back to that post.

As the title suggests, I’m going to be discussing drawing a point at a specific latitude and longitude. The code may be simple, but I’m going to try and explain some of the mechanics going on behind the scenes.

Let’s get started.

Just to refresh, this was the code to create a map:

That should give you the simple street map from the previous post.

Create the Point

Now, we want to draw a point. First thing is to bring in the Point module:

As we did with the map, we need to instantiate an instance of the point:

Don’t worry about the fact that those numbers are not direct lat/long values. That will be discuss in a further post.

Symbology

When creating the point, the constructor takes longitude (x value) first, and the latitude (y value) second. The coordinates above are for Chicago, IL. Now we just need to add it to the map and it will show up….wrong. The thing with a point is that it is exactly what it is, a point. There’s no symbology associated with it and we can’t just add a simple point to the map and expect to see it. So we should bring in a module that will help us draw the point. There’s a number of different symbology modules available, we are just going to use a SimpleMarkerSymbol, which is primarily used for points and multipoints. Along with the symbol, we will need the Color module so we can specify the color of our symbol:

The above creates the symbol and sets the color of the symbol. The color module can take a number of different things to create a color. The documentation is pretty simple on what you can do with the Color module.

Draw the Graphic

We are one step closer, but there’s still one more step before adding and drawing our point on the map. Now that we have a point and a symbol for that point, we now have to create a graphic. Every map creates its own graphics layer that sits on the top of all the layers. This layer is reserved for drawing geometries that don’t come from the layers that are added. This is where we want to draw our point. With that being said, we need one more module, the Graphic module. A graphic is a combination of a geometry (point, line, or polygon) and some sort of symbology. Once the graphic is created we can then add that to the map. So here’s what our final code looks like:

There’s a couple pieces that have been added. One being the load event for the map. This gets fired after the first layer gets successfully added to the map, which is a weird time for a load event to fire but that’s what the documentation states. We wait for that because the graphics layer should be added and ready to accept graphics at that point. Most operations that have to be done to the map outside of adding layers should be done after the map loads just to make sure that all the properties of the map are correctly set. We create the graphic passing in our geometry (or point), and our symbol, then add it to the map’s graphics layer.

If all that worked correctly, you should see a blue dot drawn over Chicago:

Point on Simple Street Map

Point on Simple Street Map

If you like these posts or have suggestions for other posts on working with the ESRI API, let know on Twitter or leave a comment.

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.