Web Maps

As much as I love me some paper maps (see my previous post), most folks do not use them nearly as much as they used to.

I know I don’t.

With a smart phone in hand, there really is no excuse to scramble through your glove box looking for an out-of-date map. Or stop at a local store and buy a city map. For good or bad, the world we live in now includes digital maps.

And while those of us old-timers still appreciate a well-designed, ‘real’ map, web maps can do so much more.

You know how to access a web map. Those are everywhere and most of us have used Google, Yahoo, or Bing maps* to navigate our little slice of the world. But what if you wanted to show your data? How do you harness all that open-source goodness to show off your projects?

Google Maps

The ubiquitous Google provides the use of their map engine through the Google Map API. It is quite simple, and because of the proliferation of Google Earth (a desktop application), the data format widely used with Google Maps (.kml or .kmz) can easily be created or exported from many standard GIS software packages. Heck, if you are careful, you can just type the .kml file yourself. It really is that simple.

You’ll need several things to get started:

  1. Your data in .kml or .kmz format,
  2. A web page where you want to place your web map (and administrative access to that web page),
  3. A specific API key from Google,
  4. Time to write a bit of code.

That’s it. Once you have all those things in place, I guarantee you’ll have a map just like this one up and ready to go:

EDIT: Oops! I changed over to a new server and my JavaScript pluggins are on the blink. I will update soon!

Regardless, if you want to find out more on how to work with Google Map APIs, check out this site for a quick tutorial.

Open Layers (with GeoExt)

With as simple as Google Maps are, why would you not use it? Why are there so many other options?

One thing that Google likes more than anything else in the world is data. Specifically, your data. If you read the fine print when you sign up for a Google API key, you’ll see that once you accept their terms, your data is pretty much in the hands of Google to do as they please. Some folks may want to share their data that much.

For those folks unwilling to give Google full access to their database, there is Open Layers.

Open Layers is an open source API that allows anyone to use their base data as well as port over Google and Bing base maps. All for free. They do not require an access key. You have control over the javascripts and load them directly onto your website (rather than reference an online version as with the Google API), so you need never worry about a broken link because the API got upgraded. And it is just as simple to use as Google Maps.

You can check out quite a few examples here. As you peruse the simple examples, keep in mind, you can go a step further with Open Layers and use GeoExt. GeoExt, also open source, couples Open Layers with ExtJS, allowing for more customization.

If you want a more extensive tutorial on Open Layers visit Erik Hazzard’s site here. To find out more about GeoExt, just go to the source and start learning!


I just discovered Leaflet and I am quite impressed with what I’ve seen so far. Developed by Vladimir Agafonkin, an artist, the API’s look and feel is different…and maybe even better than Google Maps. That’s primarily because it is using OpenStreetMap‘s base maps that tend to use more vivid colors, but the coding does have some nifty short cuts that the other API’s just do not have (like adding map features with associated data with one line of code).

One thing to note, the API does relies on the Leaflet map script placed in the body (not the header) of your html as well as additions to your CSS. Just keep that in mind when building pages into automated coded websites (like any WordPress hosted site).

ArcGIS Online

For those of us who use ESRI products, ArcGIS Online feels like a home away from home. The terminology is similar to what we are used to and there’s very little file conversions we have to do to our geodatabases, shapefiles, and rasters. But, it is not as straight forward as the other examples listed above. Though you don’t need an ESRI license (at any level) to use ArcGIS Online, your options are limited without an ArcServer license. In addition, you are at the mercy of ESRI’s geoservers which can be slow for the likes of you and I.

Regardless of its drawbacks, ArcGIS Online provides a nifty platform to share you data, giving you access to cartography and analysis tools not available in most web mapping tools. You will need an ESRI global account to start, so I suggest signing up for one (it’s free). Once you’ve done that, create your masterpiece over on the ESRI site, then it is just a matter of embedding your map with a very small snippet of html code. Like this:

View Larger Map

(Yes, it takes a while to load.)

But! No Javascript necessary. The map is interactive (click on a line and get instant data). And if you click through on the ‘View Larger Map’ link, you’ll be taken to ArcGIS Online where you can explore much more.

Speaking of Much More…

Did you think that was it? There are many more web mapping options out there, but the above examples should get you started on simple web projects no matter your budget. If you have any questions on how to get your web map started, I would be more than happy to help.

EstherArt_BlkWritten by Esther Mandeno, owner of Digital Mapping Solutions

*I’m sure there are more commercial sites offering their map services.