Advanced Mapping Mashups
Moving Beyond the Basics
So you've made your Google My Map and it's pretty cool, right? But at some point you may want to move beyond the basics and into the world of highly customized, interactive online maps. If you are feeling adventurous enough to start posting customized, complex information on an online map that you want share with others through your own website, then you are ready to graduate from the WYSIWYG development tools to the world of coding with a mapping API.
There are many, many different online maps.To begin your customizing odyssey, you need to first find which mapping API best suites your needs. What is an API, again? It's your access to an online mapping application, like Google Maps. This section assumes you already have your data ready to display on a map (a KML or a database) and a good idea of how you want it displayed.
Why an API? It still sounds scary...
- Add much more data
- Use already developed tools like searches with your data
- Get the look you want for your specific users
- Much more flexible development
- Allow the map and data to interact with your entire website
Where do I start?
First, spend a little time thinking about what it is you really want and need. Here's a list of 44 Mapping APIs - there are many lot out there and different APIs have different strengths. Note: if you are using a database, some APIs can interact easier with certain database programs rather than others.
| A few mapping APIs | Description |
| Google Maps API | Interface is familiar to most users, lots of developer help, multiple base maps to chose from, lots of free tools to add for more user interaction, if this is important. |
| Google Earth API | 3-D mapping imagery embedded on your website with your data! However, requires the user to download a plugin and there are no plugin options for Mac users. This is new, so less developer help available. |
| Bing Maps API | Access to oblique imagery as a base map and birds-eye-view, but requires a stronger stomach for computer coding. |
| Yahoo Maps API | Similar to Google Maps API in terms of developer help and base map options. Has better address locator and place names, if address searches are more important for your data. |
Once you have decided on the API to use, start looking in to the wealth of developer help that is available for these APIs. In most cases, the API home website is the best place to start for this. In some cases, before you start teaching yourself code, there are also programs that act as mashup wizard-like interfaces for customizing these APIs.
| Development Tool | Description |
| MapBuilder | A wizard-like interface for customizing your Google Maps API. A little restrictive on customization, but allows you to enter information in prompted fields, rather than hand-code from scratch. |
| MapCruncher | A program to use for adding data to your Bing Maps API, doing the "mashing" for you. However, the mashup cannot be viewed in Safari or Opera, yet. |
| MapMixer | This is a quick upload-tool that allows you to add your maps as a layer on top of the Yahoo! Maps. This is handy for viewing static maps with Yahoo! Maps zoom tools. |
Getting Dirty Under the Hood
The beauty of APIs is that the customization of them is just about endless and there are a lot of documents, blogs and help-sites that offer free suggestions and troubleshooting. By now we have seen many examples of what is possible with mapping mashups and have a better understanding of the potential of our own projects. Let's pop the hood on that API code and get a little messy!
You will need:
- A website developer program, such as Dreamweaver, and access to the webpage you will add you mashup to. This gives you access to the code - the meat! Unless you want to buy your IT Department lunch for the next year, it's best if you have this program and access to your website from your own desktop.
- The mapping API of your dreams. Often, when you register a mapping API, they will give you a block of code to "remember". Copy and paste this code into your webpage with you website developer program and now you have access to customize the API!
- Your data to be "mashed". We hope you have made a note of what database programs and files are compatible with your API!
- A clear concept of what you wish to achieve with you mashup on your website...there's so much and it's easy to get side-tracked!
To better understand the pieces, you should now have a webpage with your API code pasted into the webpage's code. This adds a "window" to the API program. For example, if you have added the Google Maps API code to your page, you essentially have added a "window" to Google Maps on your webpage. This is similar to embedding, however, you have access to manipulate the Google Maps "window" by adding your own controls and data.
When the map API is initially added to your page, it is what we refer to as "bare bones." You will need to make it functional by adding base maps, navigation tools, scale bars, and other utilities. Most mapping APIs have an automated way of doing this by adding a line of code to your webpage. For your map APIs specific vocabulary, go to the map APIs code documentation. For example, to add the ability to zoom with the scroll on your mouse in Google Maps API, you type in to your code:
map.enableScrollWheelZoom();
That's it! You're a "coder"! Just don't tell any coders you think you're a coder...
You now need to add you data to the map API on your page. In most cases, if you have a photo, point of interest, or KML/KMZ, you will do this in what is called an "overlay" meaning we will lay the data over the map API. For help on how to do this, first visit the map APIs home page, then look for code documentation or an example that you can copy. This is the easiest way to learn how to code if you are a beginner!
| Google Maps API | |
| Yahoo Maps API | |
| Virtual Earth API |
In most cases, the code you need has already been written and is readily available to copy and paste into your webpage. We have included a tutorial on customizing a Google Maps API to help show what code should be inserted where on your webpage.
API "wizards" and APIs that we cover in a little more detail:
MapBuilder
Google Maps API
Virtual Earth
Other APIs
CT Examples
Smart Choices - Public Schools in Greater Hartford Region (Trinity College)
East Rock Park Inside and Out (Yale University & Friends of East Rock Park)
National NEMO Network LID Atlas (National NEMO)