Web Maps the Easy Way

Figure 8. Raining Days as function of precipitation, with regression line.
Static map introducing basic geography of Middle-earth used on the One Wiki to Rule Them All online encyclopedia.

I like stories with maps. I suppose it goes back to reading The Hobbit as a kid, and following Bilbo’s adventures on the small, black and white, but very cool, maps of Middle-earth that were included at the front of the paperback book I had. I poured over that thing…“Where were those trolls?” “Which part of Mirkwood were the spiders in?” (That is one of my favorite parts!)

I’ve been hooked on stories with maps ever since. I find that including a static map on a webpage catches my attention and can be a good way to make or support a point. Including an interactive map (see below) can be even better by letting readers do a bit of their own exploring, to really understand the point.

Creating an effective map requires some skill, or at least competency, in using geographic information systems (GIS); knowledge of, and access to good, usable data; a bit of cartographic flair; and some Web resources to create and host your map. But what if you don’t have a herd of nerds around to provide you with the needed expertise in GIS, data processing, cartography and Web know-how to make an interactive map? Or maybe you do have a nerd herd, but they already have their plates overflowing with work and you want to do a bit of exploring on your own?  It turns out that there is a solution. There are now some websites that can help with all of these tasks. I’d like to share with you some thoughts from my recent experiences in learning to use these sites as a (relatively) intelligent, but novice user of Web maps, Web services, etc.

Before beginning, I found I needed to address three related questions in order to end up with an effective map: 1) What is the purpose of the map, 2) what data need to be mapped to meet the purpose, 3) how should readers use the map?  Let’s consider these questions one at a time.

What Is the Purpose of the Map?

What is the question or issue that you are thinking about? How will a map help answer it? Do you just need to show the location of some item? If so, an interactive map might be overkill. Do you want to conduct a sophisticated analysis on a lot of different data sets? A Web map is probably not up to the task. Do you want users to see and explore the spatial relationship between a few key data sets? This seems to me to be one sweet spot for Web mapping. How about just some catchy eye-candy with a bit of functionality…something that makes it fun for readers to tell others about your site? That too might be a reason to use a Web map. Also, think about having a laser-like focus on the purpose. Keep the message simple and the presentation can be elegant. Clearly identifying your purpose right up front and keeping it firmly in mind will help answer the other questions.

What Data Need to Be Mapped?

Before we go too far down the data rabbit-hole, let’s consider the data sets wanted a bit more abstractly. We’ll want a background map, that is easy; but what kind of background map? Should it be bland so it fades into the background, or very colorful, like NASA’s Blue Marble, so it adds to the visual appeal of the finished map? The answer to that goes back to the purpose of the map.  What other data do you need? Images (raster data) can be nice, but may be slow to load. Not always, but sometimes. Shapefiles are a bit plainer (in my opinion), but can have data tables that can add a lot to your map, if used well. How many layers should there be? I found that having more than three or four layers on a map started to hide as much information as it revealed. Maybe you could get as many as six or seven if they are very different in character and are crucial to making your point, as in the map embedded below dealing with South Florida drainage and development and ecosystem impacts. Give some forethought to these data issues and jot down a few data sets you want to use.

Embedded map hosted on the GeoCommons website

Now that you have an idea of the data needed, where can you find it? Do you have these data? If so, think about how willing you are to share them with the world. Make sure they are in good shape and ready for presentation. Get your metadata ready and be sure you can release them.

What other data sets would be useful to look at? What if you don’t have all the data you need? Do you know of a source for them? If you don’t have the data, all is not lost. There are a large number of data sets available online at sites like Data.gov, or ArcGIS.com. In fact, much of the problem is sieving through the online data to find what you are looking for.

How Do You Want Readers to Use the Map?

Is this map going to be the story or is it going to be a supplement to another story? Will it be something that users can come back to over and over or is it more of a one-time use, when readers will view it, get the point, and move on? Can it stand on its own as an independent website? Does that make sense? If so, it will need to tell the entirety of the story you are trying to get across. That will impact your data and design. However, if your map will be embedded into another page with supporting information, it can be a bit leaner and still get the point across.

How Do You Do All This?

Now that we’ve got a good idea about the purpose and what we need on the Web map, how can we make one? I’ve been exploring two sites on which you can create and host Web maps: ArcGIS.com and GeoCommons. The steps in creating a map on these two platforms are similar:

1) Create an account and log in

This is needed to upload your own content and to save your maps. Both sites offer a free sign up option for making maps for your personal use. It’s the usual give us an email and password routine. Easy-peasy.

Composite image of the beginning Web map on GeoCommons showing three possible basemap styles
Composite image of the beginning Web map on GeoCommons showing three possible basemap styles.

2) Open a starter map

Click the “Make a Map” button on GeoCommons, or in ArcGIS.com, go to “My Content” and click the “Create Map” button. In both cases, a basic interactive map appears and you have the option to begin adding data to your map. You can also select a different map background at this point, based on your previous thoughts. In ArcGIS.com use the “Basemap” button along the top edge to view the “Basemap Gallery.” In GeoCommons, just click the “Basemaps” tab on the left side of the window that automatically popped up. If you have closed that window, click the “Change” button at the bottom of the right side menu. Try a few, just for fun; there are probably a couple that fit your general criteria for the type and background you want.

3) Add some data

Once your have selected a basemap, you can add your desired data sets. On the GeoCommons site, select the “Find Data” tab on the left to search for data sets that have been uploaded to GeoCommons by others, or by you. The text-based search function is pretty straightforward and easy to use. The “Within the Map” tab can be used to limit the search results based on the current map view, so try zooming in to your area of interest and searching with that tab.

If you are uploading your own data, use the “Create” tab to upload it either publicly or privately. Once you’ve uploaded a file, you can geolocate it. If you’ve uploaded a shapefile but have not uploaded all of the required files, you will be prompted to upload the missing ones. You can also upload data from from other online data catalogs by adding a URL. I won’t cover that in this blog. One nice thing about GeoCommons is that you can change the way your data is displayed. That is also a bit more than I can cover in this blog, but it’s pretty straight-forward and  there is a great online user manual, see below for the link.

For ArcGIS.com, use the “Add” button to search for layers, create a new one on the fly, or add layers from your computer or the Web. The “Create Editable Layer” functionality is pretty slick. You can add points, lines or polygons to your map, using simple drawing tools. You can have all of these vector types in the same layer, giving you the freedom to be a bit more creative in how you put data sets together. For instance, you could show a point source of pollution, the polygon layer over which it had spread, and a boundary line dividing area above and below a certain criteria. Those would all be in one layer, instead of in separate point, line, and polygon shapefiles.

Sample map on ArcGIS.com showing a layer created on the site composed of different types of vectors: a point, lines, and polygons
Sample map on ArcGIS.com showing a layer created on the site composed of different types of vectors: a point (the green plus sign), lines, and polygons. There are three different backgrounds also shown in this composite image.

For uploading data, ArcGIS.com supports a smaller set of formats and is a bit more formal in how the data is uploaded. For instance, shapefiles need to be uploaded as one zipped file, not as a series of related files. Frankly, I applaud this requirement. I’d like to see zipped shapefiles become a standard method of passing them around and of using them.

ArcGIS.com can also display data services from other data catalogs. Again, that is a bit beyond where I can go with this blog, but I have invited some follow-up posts about how to do this. Stay tuned!

 4) Share your map!

Now that you have a map that you like, you just need to share it with others. Save your map, give it a useful name, tags, and description. Choose who you want to be able to view the map, or perhaps even edit it if you want to try a bit of crowd-sourcing. You can generally choose to make both the map and editing privileges available to everyone, some groups of users, or just private to only you. On GeoCommons, you will get a URL that will take you directly to the map as a stand alone webpage. If you click on the “About” button, your viewers (and you) will see not only the description you provided, but also an option to generate the HTML needed to create an embedded map on another website. Very slick!

On ArcGIS.com you have the same types of options for sharing, but they also carry some increased functionality, in that certain members of groups can re-share content shared with them, depending on the permissions. There is a good online help section about this. What you can share and with whom you can share it will also depend on if you are using an organizational account or a personal one.

If You Need More Help

There is a lot more detail that I can’t cover here. Fortunately, there are a variety of ways to learn more. Both the websites I’ve talked about have extensive online help resources. The top-most ArcGIS.com help page and the GeoCommons user manual are good places to start. Both sites have videos as well as written help available.

As previously mentioned, I’ve invited a couple colleagues to post some follow ups to this post about how to use Web services from different sources and map them in ArcGIS.com and GeoCommons. Stay tuned to this blog for those comments and, potentially, follow-up blog entries.

If this sounds interesting and you want to learn more and maybe even try it within a fun group setting, I encourage you to check out the Hacka-Mapathon that is going on as part of Coastal GeoTools 2013. At that event, you can learn more about Web maps and compete with others as teams to make fun maps that address a management need. Even if you will not be at the GeoTools conference, you can create a Web map and submit it. We would love to see what you can do! More details can be found on the GeoTools Hacka-Mapathon page.

UPDATE: Regretfully, Coastal GeoTools 2013, and the upcoming Hacka-Mapathon, has been cancelled (read more at the above links). However, we will conduct a virtual Hacka-Mapathon in the future. Stay tuned to this blog for more information or email Geo.Tools@noaa.gov to be informed of future developments.


Don’t let lack of a GIS shop and a full set of in-house data sets stop you from getting the map you need. Making a map does take some thought, effort, and a bit of attention to detail, but isn’t hard. There are online resources to help you and you can learn more and give it a try at the Hacka-Mapathon, part of GeoTools 2013. Remember, you don’t need to be at GeoTools to submit an entry.

Also, I invite all you readers to post comments sharing your experiences. I have only scratched the surface and know I have a lot to learn. I would love to learn what you found the most helpful or the hardest to deal with in your web-mapping experiences. Also, please post links to online data catalogs you find useful, with a bit about what types of data they have and anything else you would like to share about them.

Lastly, if you, too, followed Bilbo’s adventures the hard way, on a little paper map, experience the power of Web maps and test your knowledge and memory using the LotrProject Web map of The Hobbit ! This is a great use of an interactive Web map that shows what can be done by combining text and user-controllable graphics. Now that you know how to start, you are only limited by your imagination. After all, “Roads go ever ever on…” Who knows where this one will take you?

One comment

  1. Great blog Dave. For anyone interested in a little more detail about how to publish a web map using ArcGIS Online, I wrote up the following step-by-step instructions. Please post a reply if have any additional questions.

    1. Setup
    1.1. Go to arcgis.com
    1.2. Click Sign In
    1.2.1. If needed, register for new account
    2. Build a Map
    2.1. Click the MAP button in the top banner
    2.2. Click the Basemap button
    2.2.1. Select a basemap from the available options
    3. Add a Layer From ArcGIS Online
    3.1. Click the Add drop-down list
    3.1.1. Select Search for Layers
    3.1.2. In Find: type a keyword to search (example: Hurricane Evacuation Routes)
    3.1.3. Click Add to get layers to appear in the map
    3.1.4. Click Done Adding Layers when finished
    4. Add a Layer that is not published to ArcGIS Online
    4.1. Go to the ArcGIS Service Directory where you can find services (example: Coastal Service Center’s http://coast.noaa.gov/ArcGISPUB/rest/services)
    1.1.1. Browse to the REST page for the service you want (example: Social Vulnerability Block Groups http://coast.noaa.gov/ArcGISPUB/rest/services/sovi/sovi_blockgroups/Ma…)
    1.1.2. Copy the URL for the map service (example: same URL as previous step)
    1.1.3. In your arcgis.com map, click Add
    1.1.4. Click Add Layer from Web
    1.1.5. In URL: paste path to the map service from earlier step
    1.1.6. Click Add Layer’
    2. Add a Layer From a File
    2.1. Click the Add drop-down list
    2.1.1. Select Add Layer from File
    2.1.2. Select the Choose File button Note that data can be a zipped shapefile, text file, or GPS data file (there are file size limitations)
    2.1.3. Click Import Layer
    3. Improve Cartography
    3.1. Rename a Layer
    3.1.1. In the legend, click the middle icon – Show Contents of Map
    3.1.2. Hover over layer to rename then click on right-pointing arrow
    3.1.3. Select Rename
    3.1.4. Enter new name
    3.1.5. Click OK
    4. Change Symbology
    4.1. In the legend, click the middle icon – Show Contents of Map
    4.2. Hover over the layer to change then click on right-pointing arrow
    4.3. Select Change Symbology
    4.4. Click Symbols drop-down list
    4.4.1. Change symbols as needed
    4.5. Click Done
    4.6. Click Done Changing Symbols
    5. Save Map
    5.1. Click Save
    5.2. Provide Title, Tags, and Summary
    5.3. Click Save Map
    6. Share
    6.1. Click Share
    6.2. Mark checkbox for Everyone (public)
    6.3. Close
    7. Build a Web Application
    7.1. Click Share
    7.2. Click Make a Web Application
    7.3. Select Publish under Storytelling Basic
    7.3.1. Provide a title and add additional tags or a summary if needed.
    7.4. Select Save and Publish
    7.5. Click Close
    Also, here is an Esri blog with some additional tips for doing pretty much the same thing…http://blogs.esri.com/esri/esritrainingmatters/2013/01/04/easy-button-me


Leave a Reply. Comments are moderated.

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

WordPress.com Logo

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

Google photo

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

Twitter picture

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

Facebook photo

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

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.