It's all about the map in this sites header today. The header background shows a dynamically generated map of the coordinates shown in the right top corner, or my last recorded place. I can select my current location (latitude and longitude) and the header background map is updated accordingly. So how exactly does this work?!
No Google or Yahoo! maps?
- You understand and agree that you must retain the attribution text and links contained within all Yahoo! Maps and Yahoo! Map images without alteration.
- Your will not store or allow end users to store map imagery, map data or geocoded location information from the Yahoo! Maps APIs for any future use.
I would break these terms as I convert the original image to a grayscale version and store the map on the server for performance reasons so the Yahoo! Maps are out of the question. Google or Yahoo! Maps are great for out of the box functionalities but if you want more freedom you will probably have to look elsewhere (or pay for licenses if possible).
Luckily for us there are other solutions out there. Let's take a look at OpenStreetMap for example. OpenStreetMap is a ‘wiki style’ editable map, made by people like you and me. The content is available under the Creative Commons Attribution-ShareAlike 2.0 license which means anyone can use (and remix) the data as long as you share it with a similar license.
This ‘Wikipedia-like’ approach has some drawbacks as well: the map is incomplete and the data is not 100% reliable. On the other side you can correct or complete the map where needed. This may or may not be important for your project but I only needed a nice background image for this website so a general overview of the area is more than sufficient.
OpenStreetMap has a RESTfull way to build a map image with a given latitude, longitude, zoom level and image size. Here is how (or see an example for my city):http://tah.openstreetmap.org/MapOf?lat=<lat>&long=<long>&z=<zoom>&w=<width>&h=<height>&skip_attr=1
skip_attr defines if you want to include an OSM attirbution image in your map or not.
The process flow:
- The current location is updated on the website,
- a map of this new location is downloaded from a map server,
- the downloaded map image is converted to grayscale and
- the generated image is saved to disk.
We'll use RMagick and Ruby on Rails to convert the downloaded image to something else so make sure you have this installed first.
That's it, this method downloads and converts the image and saves it in your images folder so from now on you can use this image in your website:
- Take Control of Your Maps explains how to build you own map stack.