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.